<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Michael Adebambo</title>
    <description>The latest articles on DEV Community by Michael Adebambo (@blazingmike).</description>
    <link>https://dev.to/blazingmike</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F728409%2Fca596033-83a9-4ed6-80a2-cd77a58e78c4.jpg</url>
      <title>DEV Community: Michael Adebambo</title>
      <link>https://dev.to/blazingmike</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/blazingmike"/>
    <language>en</language>
    <item>
      <title>The Webflow Alternative We’ve Been Waiting For</title>
      <dc:creator>Michael Adebambo</dc:creator>
      <pubDate>Mon, 21 Apr 2025 13:17:43 +0000</pubDate>
      <link>https://dev.to/blazingmike/the-webflow-alternative-weve-been-waiting-for-132i</link>
      <guid>https://dev.to/blazingmike/the-webflow-alternative-weve-been-waiting-for-132i</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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).&lt;/p&gt;

&lt;h3&gt;
  
  
  Why I Tried Webstudio
&lt;/h3&gt;

&lt;p&gt;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 &lt;a href="https://www.relumedesignleague.com/" rel="noopener noreferrer"&gt;Relume Design League&lt;/a&gt;, and I ran into some issues:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Lag and slow performance&lt;/strong&gt;: Webflow was noticeably laggy, taking time to load the dashboard and apply changes. A quick scroll through Twitter confirmed I wasn’t alone.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Custom code restrictions&lt;/strong&gt;: 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.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Affordability:&lt;/strong&gt; I couldn’t justify upgrading since I was building personal projects, not client work.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I pushed through using only Webflow’s native features (proud of that; actually, you can see what I came up with &lt;a href="https://preview.webflow.com/preview/michaels-marvelous-site-033a26?utm_medium=preview_link&amp;amp;utm_source=designer&amp;amp;utm_content=michaels-marvelous-site-033a26&amp;amp;preview=c352742bce504680dc60cf830734294d&amp;amp;workflow=preview" rel="noopener noreferrer"&gt;here&lt;/a&gt;, 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.&lt;/p&gt;




&lt;h2&gt;
  
  
  Getting Started: My First Impressions
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

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




&lt;h2&gt;
  
  
  Webstudio UI &amp;amp; UX
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

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

&lt;h3&gt;
  
  
  Craft Style Guide
&lt;/h3&gt;

&lt;p&gt;I started by using the &lt;a href="https://webstudio.design/docs/craft-guide" rel="noopener noreferrer"&gt;Craft style guide&lt;/a&gt;. 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.&lt;/p&gt;




&lt;h2&gt;
  
  
  Responsiveness
&lt;/h2&gt;

&lt;p&gt;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:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;991px and down&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;767px and down&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;479px and down&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These work well for most projects. You can also customize or add new breakpoints easily.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc2fnes4gozixpee6swkl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc2fnes4gozixpee6swkl.png" alt="Edit breakpoints in Webstudio." width="800" height="473"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Performance &amp;amp; SEO
&lt;/h2&gt;

&lt;p&gt;I didn’t experience any lag while using the builder. I hope that remains the case as more features are added.&lt;/p&gt;

&lt;h3&gt;
  
  
  Pagespeed Score (Default)
&lt;/h3&gt;

&lt;p&gt;After publishing my site to staging without any optimization:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Performance: 76&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Accessibility, SEO, Best Practices: 80+&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  After Optimization
&lt;/h3&gt;

&lt;p&gt;Using results from PageSpeed Insights and axe DevTools, I made a few changes:&lt;/p&gt;

&lt;h4&gt;
  
  
  Accessibility:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Added alt text to all images.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Used  &lt;code&gt;aria-label&lt;/code&gt; on icon buttons&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Proper heading structure (&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; to &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Performance:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Set the hero image to load: eager&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Enabled &lt;code&gt;loading="lazy"&lt;/code&gt; on all other images&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Replaced a &lt;code&gt;background-image&lt;/code&gt; property with an &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag so I can get image optimization.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After these changes, I got the &lt;a href="https://pagespeed.web.dev/analysis/https-wayfarer-6dzkd-wstd-io/lu5z1fo39p?form_factor=desktop" rel="noopener noreferrer"&gt;following score&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnchrgmwzqvna7rmhrf1t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnchrgmwzqvna7rmhrf1t.png" alt="Mobile score" width="800" height="473"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fapivu2nbuvxfj8e3ibmt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fapivu2nbuvxfj8e3ibmt.png" alt="Desktop score" width="800" height="473"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Pros &amp;amp; Cons
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What I Liked:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Ease of Use&lt;/strong&gt;: 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.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Custom Code&lt;/strong&gt;: You can embed HTML and add scripts in the head — even on the free plan.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Open Source&lt;/strong&gt;: You can self-host the builder and contribute to it — the code is public.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;CMS Flexibility&lt;/strong&gt;: Webstudio doesn’t come with a built-in CMS. Instead, it encourages integration with any CMS of your choice. Their &lt;a href="https://webstudio.is/tools/headless-cms-finder" rel="noopener noreferrer"&gt;CMS finder tool&lt;/a&gt; comes in handy to help find a suitable CMS of choice (fun fact: their own site uses Webstudio + Baserow.)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Radix Components&lt;/strong&gt;: You can use unstyled radix components with built-in accessibility and WAI-ARIA specification.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Community&lt;/strong&gt;: The community is growing but responsive. I’ve gotten help every time I asked.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Missing Features &amp;amp; What I Didn’t Like:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;No Dark Mode&lt;/strong&gt; : Not a dealbreaker, but it’s my comfort zone.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;No Native Animations or Interactions&lt;/strong&gt; (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.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;No Reusable Components&lt;/strong&gt;: You can’t create reusable components at the moment which is something I consider essential when building a large project.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

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

&lt;h2&gt;
  
  
  Webflow vs Webstudio: A Quick Comparison
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;Webflow&lt;/th&gt;
&lt;th&gt;Webstudio&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Pricing&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Free plan limited (2 pages)&lt;/td&gt;
&lt;td&gt;Free plan is generous + includes unlimited pages&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Custom Code&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Not allowed on free tier&lt;/td&gt;
&lt;td&gt;Fully available on free tier&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Open Source&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Animations&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Native interactions&lt;/td&gt;
&lt;td&gt;External libraries ( eg GSAP, AnimeJS)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Components&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;You can create reusable components&lt;/td&gt;
&lt;td&gt;Not available&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Community&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Large, mature&lt;/td&gt;
&lt;td&gt;Smaller, but responsive&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;CMS&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Built-in CMS&lt;/td&gt;
&lt;td&gt;No Built-in CMS, Use any third-party CMS and data from any API&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Webstudio feels like a breath of fresh air from other website developers, it is not just another tool, it a serious contender. &lt;/p&gt;

&lt;p&gt;Here’s a more extensive &lt;a href="https://webstudio.is/blog/webstudio-vs-framer-vs-webflow" rel="noopener noreferrer"&gt;comparison article&lt;/a&gt; between Webstudio, Webflow, and Framer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who Should Use Webstudio?
&lt;/h2&gt;

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




&lt;h2&gt;
  
  
  How I Can Help You
&lt;/h2&gt;

&lt;p&gt;Whether you're&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Launching a new business&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Redesigning your website&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Looking to migrate website from Webflow , Squarespace, Wordpress, Framer to Webstudio&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Hiring freelancers to work with you&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I can help. Reach out via &lt;a href="//mailto:adebambomich683@gmail.com"&gt;email&lt;/a&gt; or on &lt;a href="https://contra.com/michael_adebambo_73hfuntd" rel="noopener noreferrer"&gt;Contra&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What I’ve Built with Webstudio&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Prodigy: &lt;a href="https://wayfarer-6dzkd.wstd.io/" rel="noopener noreferrer"&gt;Fintech/SaaS landing page &lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;WayFarer: &lt;a href="https://prodigy-h1xvz.wstd.io/" rel="noopener noreferrer"&gt;Adventure/travel landing page&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Would I Recommend Webstudio Over Webflow?
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;I’d love to hear your thoughts when you try out Webstudio!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>nocode</category>
      <category>frontend</category>
    </item>
  </channel>
</rss>
