Like Webflow and Framer, Versoly is a visual development app. As you create a page you get to see it in real time. Just by dragging and dropping elements onto the page, I can create a full website.
But obviously there is code there, in the background.
Unlike Webflow and Framer, it’s not abstracted code. It’s real code, like a real developer would write. It’s simple HTML, CSS. And JS if you want it.
<div class="col flex flex-col justify-center items-center py-4 bg-primary-100 lg:w-6/12">
<h2 class="font-bold">Where do we start?</h2>
<p class="mb-6 lg:text-xl">What's your biggest pain point right now?</p>
<div class="flex flex-row flex-wrap justify-center gap-2">
<p class="badge badge-lg bg-primary">SEO</p>Versoly comes with VS Code editor built in. You don’t have to use it, but it’s reassuring to know that when I do, Versoly will validate my code. If it's not valid, it won't run. No more pushing to live to check if things will work.
Imagine a Microsoft Excel spreadsheet where you can only edit the content in the cells if you use Excel. If you couldn’t export in an industry standard format, you wouldn't use it.
You want the data as a CSV that you can export to Google Sheets or import into a CMS. It's the same with a website. It's your code. You created it, even if you did that visually. It should belong to you.
With Framer, with Webflow, that's just not true. Yes, you can export Webflow code. Yes, you can host it. But just try editing it.
With Versoly you get industry standard code that just works. Change it in any code editor. Host it where you want.
Versoly doesn’t hold you hostage to their platform. But you’ll keep paying your $19* a month because you’ll be having so much fun.
You can’t export CMS data with Webflow. But because of the unique way Versoly links the CMS to the “front end” you can export the CMS data too. Granted it won’t be so easy to edit* that (though you can, as it comes as plain HTML), but if you want to self host a static site, built using the Versoly CMS, that’s perfectly possible.
This is because Veroly produces static pages from the CMS content. Which also means that pages render very quickly, no matter how many items you have.
The CSS used in Versoly is Tailwind. Developers either love Tailwind or they hate it. Tailwind puts the CSS in with the HTML. Right there in the <H1> or <p> or <div>. So it’s easy for me to see where I’m going wrong with flex box, or why the heading is the wrong color.
Can you read this link from a footer? If you’ve come from Finsweet’s Client First, I bet you know exactly what’s going on here.
< a class = " mb-4 px-4 text-neutral-950 no-underline" href = "#" > Sign UpAlthough Versoly uses Tailwind, a lot of the structural stuff is borrowed from the Bootstrap system. The 12-column grid with a section, container, rows, columns. This makes it really easy to keep your designs clean and responsive. I've stopped using Grid almost entirely. Except where I need very specific layouts.
But the vast majority of the work can be created using Flex. When you're trying to work fast, creating landing pages, marketing pages, blog posts it's just very simple. If you’ve used MAST from @nocodesupply in Webflow you’ll know what I mean.
And now that is true these days of Webflow (though not Framer). But the workflow in Webflow is not particularly straightforward. Whereas in Versoly you can add a HTML element and it will appear in the Navigator. Because the Navigator simply reflects the HTML on the page that you are creating.
The Versoly UI is a set of component classes that make it really easy to get started but give you total flexibility when you need it. For example, in one click you can choose a user interface that's based on square 90-degree angles on buttons, or rounded, or fully rounded pill-shaped buttons. And that will influence the whole of the system.
Versoly uses the Tailwind system of color-50 thru color-950. So you have 11 color shades. And Versoly will create those automatically from a specific color. Or you can put them in individually if you've created your own palette. Versoly uses Primary, Secondary, Tertiary and Neutral as the four main colors.
You don't have to use them all if you've got a simple design that just has a single primary color and neutral. That's absolutely fine. But you have that palette set up so that you can use the right shade to get the contrast that you're looking for.
And because you have a standard system for color variables, I just cut and paste a component from one project to another, and the colors change automagically.
Out of the box, Versoly can use any Google font. But you can use any font that you want. Although why anybody these days is using anything other than Poppins, Inter or Bricolage Grotesque, I'm not sure.
When you build a component you can use it in any project. So even if you have built a component with rounded buttons, if you drop it into a project that has square buttons, it will just work with square buttons.
Conflicts in classes are just not possible when you're using Versoly. You can use any component in any project that you like. You can copy pages directly from one project to another. It speeds up your creation process enormously. No conflicts or renaming of classes. It just works.
Versoly wants everyone in the world to have a pro account. With that you’ll make your custom domain SaaS site, or your freelancer portfolio site.
Once you have a pro account, you can work on any Versoly project by being invited to a workspace. It's easy to bring in a freelancer to help out on a particular build. Just invite them and they're in. Workspaces also have individual names, so it's easy to know which workspace you're working with.
Dev mode gives you access to everything in Versoly, including the VS Code editor.
Design mode removes the VS Code editor
Non-technical mode removes the VS Code editor and a lot of the styling, leaving just typography, spacing, and background CSS editing.
Content editors are free with Versoly. You can have as many people as you need editing the CMS.
Any modern, fast moving marketing organization needs to create new pages, and edit existing pages without handing over to a dev. From a 2 person SaaS to a dedicated 10 person marketing team, having autonomy to experiment, check the data, and iterate is vital.
Versoly includes Page Backups so you never need to worry about losing changes. Page Versions let you copy a page and make variants, which you can Publish to Draft.
So if when I’m adding special sections just for Mother’s Day* deals, I can get them ready in advance, QA the page and then go live on the day. After the event, I just revert to the previous version.
Versoly comes with built in analytics. It’s privacy friendly, with no cookies, so sure, it’s more limited than whatever Google is turning out these days. But it lets me see where traffic is coming from including
I can also see what the Popular, Entry and Exit pages are.
I can track events too, so I can see which CTAs and links are the most clicked. It’s easy to set this up whenever I add a CTA, button or link. No messing about with an external provider.
The data sits outside of the “front end” of the project and you have to add the CMS collection as a Site Variable. It’s an extra step that I always seem to forget about, but fortunately the UX has improved over the last year or so with reminders to make the connections.
What this means is that I can add multiple pages for the same collection. Let’s take a Blog for example. I want a List page to show all the blog posts, and I want a Details page to show a single blog post. No problem so far.
Now what if I want to group posts by Author. I want to design a single List page, but I want a bunch of pages, each one with all the posts by one author.
In Versoly I can create whatever URLs I want for navigation and SEO purposes.
For example I can build
/blog/category/a-really-great-blog-post
/blog/a-really-great-blog-post
/blog/category/sub-category/a-really-great-post
(to list all posts written by me)
/blog/author/jonny-holden
/blog/jonny-holden
Ok, so I cheated. I don’t hate the CMS in Versoly. In fact it’s one of the best things about this particular visual development tool. I used to get into the weeds with trying to nest things, even when using Finsweet’s solutions. Not any more. It’s all pretty straightforward now, though I still recommend taking some time to organize your data and structures using something like Octopus.do.
So there we have it. Versoly really did surprise me when I started using it. It’s a bit of a learning curve if you’ve not used Tailwind or Bootstrap before, but the potential is enormous. I can’t recommend it enough to SaaS and agencies alike.