This article is an account of my first experience using the quietly touted Webflow alternative, an open-source website builder that offers a new take on visual development.

I came across The Webflow alternative two months ago on Twitter. Initially, I didn’t pay much attention because new tools pop up daily, and I had made a promise to myself at the start of the year to stop jumping between tools unnecessarily. My focus was to master the ones I already knew well (like Webflow).

Why I Tried Webstudio

After hitting a few roadblocks with Webflow, I was searching for a leaner, cheaper and more flexible tool. That’s when I decided to try Webstudio, an open-source website builder that’s being quietly touted as a Webflow alternative. I was practicing on Webflow by rebuilding a design from the Relume Design League, and I ran into some issues:

• Lag and slow performance: Webflow was noticeably laggy, taking time to load the dashboard and apply changes. A quick scroll through Twitter confirmed I wasn’t alone.

• Custom code restrictions: On the free plan, I couldn’t add custom CSS or JS, not even a link to externally hosted code. A few months ago, this was possible, but that feature had been removed.

• Affordability: I couldn’t justify upgrading since I was building personal projects, not client work.

I pushed through using only Webflow’s native features (proud of that; actually, you can see what I came up with here, but I wasn’t satisfied. I wanted to become very good at using a no-code builder, so I started exploring alternatives. That’s when I remembered Webstudio.

Getting Started: My First Impressions

I signed up using the "Sign in with GitHub" option. There's also Google login, though I think an email sign-up would be a useful addition.

After signing up, I joined the Discord server and introduced myself. A team member was kind enough to share the documentation with me.

Webstudio UI & UX

As I created my first project, the first thing I noticed was light mode 😅. I live in dark mode (Twitter, VS Code, WhatsApp), so this was a bit of a shock. Still, that didn’t stop me.

The builder UI felt quite familiar so there wasn't much of a learning curve. However, one of Webstudio’s core philosophies is using tokens instead of classes for styling. This is a shift, but once you get used to it, it’s powerful.

If you’re coming from another builder, you’ll probably be building in under 40 minutes. The UI is intuitive and responsive.

Craft Style Guide

I started by using the Craft style guide. The Webstudio team recommends it as the standard for building scalable, maintainable websites. It includes consistent tokens, CSS variables, and practices that speed up development.

Responsiveness

A visual builder isn’t complete without responsive design tools. Webstudio starts with a base screen where styles apply to all viewports. From there, you can adjust for three default breakpoints:

• 991px and down

• 767px and down

• 479px and down

These work well for most projects. You can also customize or add new breakpoints easily.

Performance & SEO

I didn’t experience any lag while using the builder. I hope that remains the case as more features are added.

Pagespeed Score (Default)

After publishing my site to staging without any optimization:

• Performance: 76

• Accessibility, SEO, Best Practices: 80+

After Optimization

Using results from PageSpeed Insights and axe DevTools, I made a few changes:

Accessibility:

• Added alt text to all images.

• Used aria-label on icon buttons

• Proper heading structure (

  to
  )

Performance:

• Set the hero image to load: eager

• Enabled loading="lazy" on all other images

• Replaced a background-image property with an tag so I can get image optimization.

After these changes, I got the following score

Pros & Cons

What I Liked:

• Ease of Use: Smooth learning curve. The UI is intuitive, and with a few docs or YouTube videos, you’ll be building quickly. The builder is fast too.

• Custom Code: You can embed HTML and add scripts in the head — even on the free plan.

• Open Source: You can self-host the builder and contribute to it — the code is public.

• CMS Flexibility: Webstudio doesn’t come with a built-in CMS. Instead, it encourages integration with any CMS of your choice. Their CMS finder tool comes in handy to help find a suitable CMS of choice (fun fact: their own site uses Webstudio + Baserow.)

• Radix Components: You can use unstyled radix components with built-in accessibility and WAI-ARIA specification.

• Community: The community is growing but responsive. I’ve gotten help every time I asked.

Missing Features & What I Didn’t Like:

• No Dark Mode : Not a dealbreaker, but it’s my comfort zone.

• No Native Animations or Interactions (yet): Their animation engine is in closed beta (I got to test it — promising so far). For now, you can use animation libraries like GSAP, Anime.js, etc.

• No Reusable Components: You can’t create reusable components at the moment which is something I consider essential when building a large project.

The Webstudio team has made massive progress for a tool that launched in 2023. I’m excited to see what’s next.

Webflow vs Webstudio: A Quick Comparison

Webstudio feels like a breath of fresh air from other website developers, it is not just another tool, it a serious contender.

Here’s a more extensive comparison article between Webstudio, Webflow, and Framer.

Who Should Use Webstudio?

Freelancers, startups, agencies, solo founders; if you’re looking for a performant, customizable, and open-source alternative to Webflow, Webstudio is worth a try.

How I Can Help You

Whether you're

• Launching a new business

• Redesigning your website

• Looking to migrate website from Webflow , Squarespace, Wordpress, Framer to Webstudio

• Hiring freelancers to work with you

I can help. Reach out via email or on Contra.

What I’ve Built with Webstudio

• Prodigy: Fintech/SaaS landing page

• WayFarer: Adventure/travel landing page

Would I Recommend Webstudio Over Webflow?

If you're building client websites at scale, Webflow might hold strong in some area but Webstudio is contender because of features like generating CMS pages from API (integration with third-party headless CMS makes this possible), for single-page websites, Blogs, prototypes, and if you want control with open-source freedom then Webstudio is worth checking out. For me, it’s not about choosing one forever it’s about choosing the right tool for each job.

I’d love to hear your thoughts when you try out Webstudio!