3 Modern Open-Source Tools for Building Websites

Creators need to protect themselves from Enshittification (i.e., companies that hook their visitors with generous offers, wait until they have mass adoption, and then pursue aggressive profits at the expense of their users).

Creators who leverage open-source website builders and other creative tools benefit from transparent pricing, the ability to self-host, full data ownership, and customizable features.

Here are three essential open-source tools: one website builder, one design tool, and one content management system. At the end, I'll show you how all three work together.

Webstudio: Open source website builder

• Similar to: Webflow
• License: AGPL-3.0
• Best known for: Website building
• Has free tier on cloud version: Yes

What is Webstudio?

Webstudio is an open-source website builder that is hyper-focused on providing the best frontend builder and letting users connect to any backend, such as headless CMSs and databases.

Key features and benefits:

• Full power of CSS in a visual tool – Control every property, unit, and breakpoint, without writing code.
• Frontend that can talk to any backend – Fetch any HTTP API and bind response data.
• Naming styles is optional – Experiment and create one-off style changes without naming anything.
• Reusable styles without classes – Build a large website without the pain of combo classes.
• Scale without worrying about costs – From your first visitor to your billionth, pay only for what you use.
• No hosting lock-in – You can self-host anywhere without paying Webstudio.
• Responsive websites – Use the default breakpoints or define custom ones for responsive design, enabling precise control over the layout and appearance of websites across different devices.
• Ludicrously-fast performance – When using Webstudio Cloud, projects are deployed to the Cloudflare Edge, milliseconds away from your users and search engines.
• Perfect image optimization – Upload images at full resolution, and visitors will load converted, compressed, and responsive images, ensuring fast load times.

Switching to Webstudio

Let’s explore what it’s like switching to Webstudio from various platforms.

Switching from traditional open-source website builders

While there are the usual open-source website builders on the market, such as WordPress, Drupal, and Joomla, many creators are exhausted dealing with plugins/themes/modules, hosting, and maintenance and seek a next-generation tool.

Webstudio provides a no-maintenance experience for creators, letting them focus on building websites and ditch the setup and site upkeep tasks associated with traditional open-source website builders.

Switching from Webflow

Webflow pioneered the no-code professional website builder with many CSS properties, animations, and no server or plugin maintenance. However, creators became frustrated with combo classes, pricing structure, and ecosystem lock-in.

Webstudio is a next-gen Webflow alternative that provides a similar website page builder experience for the good qualities and modernizes the not-so-good qualities. Webstudio creators, especially those coming from Webflow, will enjoy the ability to:

• Add, reorder, and remove tokens without combo class nonsense.
• Experiment and create one-off style changes without having to name anything.
• Export projects and host them elsewhere without having to pay for Webstudio.
• Preview HTML embed scripts directly on the canvas.
• Connect to any headless CMS

Switching from Framer

Framer gives designers a website builder that behaves like prototyping software such as Figma but actually enables them to create a full-functioning website in one go. However, Framer is not open source, becomes difficult to maintain for anything but a small website, and has limited CMS functionality (such as no relational data).

Webstudio is an open source Framer alternative providing designers with the full power of CSS in a visual tool. Some designers may find that switching to Webstudio has a learning curve due to Framer abstracting or renaming many web design and development concepts. For example, the actual web development name of "Layout Stack" is "Display Flex". While this may be a learning curve, standardizing on globally accepted terminology makes your experience highly transferable to different platforms or even to writing code yourself.

Penpot: Open source design tool

• Similar to: Figma
• License: MPL-2.0
• Best known for: Prototyping
• Has free tier on cloud version: Yes

What is Penpot?

Penpot is a free and open-source design tool that allows designers and developers to speak the same language.

Key features and benefits:

• Free – It's open source, MPL-2.0-licensed, and free to use.
• Seamless cross-team collaboration – Penpot aligns its naming conventions with CSS naming conventions, allowing designers and developers to speak the same language and improve collaboration.
• Interactive prototyping – Create rich interactions, letting users demo ideas to the team and get feedback.
• Responsive designs – While other prototyping tools merely provide a canvas for fixed breakpoints, Penpot, which aligns with CSS standards, enables designers to create for not just the several fixed breakpoints but all the sizes in between.

Switching from Figma

Even though Penpot is an open-source Figma alternative, it doesn't mean Figma knowledge transfers to Penpot 1:1. This is, unfortunately, due to Figma using proprietary naming conventions such as "Auto Layout", instead of what it's called in CSS, "Flex".

However, the juice is worth the squeeze. Learning the proper naming conventions makes your domain knowledge transferable to other platforms. It also makes what you build transferable to developers, enabling seamless communication and transition to production.

Ghost: Open-source blogging engine

• Similar to: WordPress
• License: MIT
• Best known for: Blogging
• Has free tier on cloud version: No (would need to self-host)

What is Ghost?

Ghost is an open-source blogging platform enabling creators to publish content, manage and grow a newsletter, and monetize it.

Key features and benefits:

• Straight-forward blogging – You don't need years of expertise to get a professional blog up and running.
• Own the data – Creators own their data, making it portable to other platforms if needed.
• Creator stats – Growth statistics are built in, letting creators know how big their audience is and how their newsletters are doing.
• Grow an audience – Native tools make it easy and motivate creators to grow their audience without fumbling with complicated funnels and analytics.
• Monetize content – Built-in tools allow creators to monetize their content without the hassle of setting up complicated systems.
• Template – Many unique templates can be installed for your blog that will look great on desktop, tablet, and mobile.

Switching to Ghost

Let’s explore what it’s like switching to Ghost from various platforms.

Switching from WordPress

While WordPress is open-source, it has evolved from a blogging platform to an "everything" platform and has become tiresome to maintain. WordPress users enjoy the simplicity of working with Ghost, letting content creators focus on content creation.

WordPress users looking to focus on content creation without the hassle of plugins and page builders will find switching to Ghost simple.

Write, publish, repeat.

Switching from Webflow

While Webflow offers many templates, flexible design capabilities, and a customizable CMS, many users think using Webflow for blogging is overkill. Plus, Webflow doesn't have native integrations to grow and monetize an audience.

Editors, designers, and developers will find switching from Webflow simple.

All three of these tools work together. Here's the dream setup.

Each one of these tools has a superpower:

• Webstudio – Website building
• Penpot – Prototyping
• Ghost – Blogging

All three tools work together.

Step 1: Design your website in Penpot

Penpot outputs designs using a standardized format (CSS), making it transferable to Webstudio.

Step 2: Copy and paste Penpot into Webstudio

Webstudio supports pasting in CSS, automatically translating it to the various UI fields, enabling designers to build the website.

Step 3: Integrate Ghost with Webstudio

At Webstudio, we are hyper-focused on providing the best visual development platform, enabling users to integrate with any content management system such as Ghost.

You or your clients can work directly on Ghost for blogs, and once saved, the content will automatically show up in Webstudio (it's fetched in real-time).

These three tools are the trifecta of open-source website building, from prototyping to building to blogging. Creators can build professional websites without the concern of platform lock-in and price changes.

Happy designing, building, and blogging, creators!