Open Source Framer Alternatives

Ownership is the argument Penpot makes. It is a design platform for teams building digital products at scale, used in a browser or deployed on servers you run, and it stores work in open standards such as SVG, CSS, HTML and JSON rather than a format only one vendor can read.

Because design is expressed as code, developers can read what designers produced without a translation step. An inspect tab hands over ready-to-use SVG, CSS and HTML, while CSS Grid and Flex layout let responsive interfaces behave from the start the way the shipped product will.

A handful of pieces connect design work to the rest of the toolchain.

• Design tokens: native tokens act as a single source of truth between design and development.
• Components and variants: reusable pieces keep interfaces consistent across projects and platforms.
• MCP server: multi-directional workflows let code and AI tools read and act on designs.
• Open API and webhooks: access tokens make the workspace programmable and wire it into existing systems.
• Plugin system: plugins extend the editor and integrate it with other applications.

Real-time collaboration is there when a team needs it and ignorable when working alone. Deployment stays agnostic: use the hosted service or install on your own infrastructure following the technical guide, which is what makes Penpot workable for organizations whose compliance and governance rules exclude a vendor-managed tool.

Designers working on top of a codebase usually hand mockups to engineers and wait. Onlook closes that gap with an open source visual-first code editor where changes made in the browser DOM land directly in Next.js and TailwindCSS source, positioning itself against Bolt.new, Lovable, V0, Replit Agent, Figma Make and Webflow.

Under the surface, project code loads into a web container that serves it, the preview appears in an iFrame, and the code is indexed and instrumented so every element maps back to its place in the source. Edits apply to the iFrame first and then to the code. The stack is Next.js with tRPC, Supabase and Drizzle for data, the AI SDK over OpenRouter for models, and Bun for the monorepo.

The editor covers the span between a blank project and a deployed site.

• Project creation: Start a Next.js app from text, an image or a prebuilt template.
• Visual canvas: Browse layers, manage brand assets and tokens, and preview the app in real time.
• Code access: A real-time editor sits beside the design, with checkpoints to save and restore.
• Branching: Try alternative designs without disturbing the main line of work.
• Deployment: Generate a shareable link or point a custom domain at the result.

Onlook runs on any Next.js and TailwindCSS project, imported or started from scratch, through the hosted app or locally. Support for other frameworks and non-Tailwind projects remains open work.

Webstudio is an open source visual development platform for developers, designers, and cross-functional teams. Visual builders usually trade control for convenience, wrapping CSS in an abstraction of their own and locking the output to one host. Webstudio does neither. You own the data, components, and infrastructure.

The builder works with CSS directly instead of through a naming layer, so what you set is what ships. Design tokens and components carry a design system across pages, data binding and resources pull content in from elsewhere, and Radix UI components supply accessible primitives to build on.

The builder gives a cross-functional team a shared surface.

• CSS control: styling with no abstraction sitting in between.
• Design tokens and components: a design system managed inside the builder itself.
• Data binding and resources: pages that read from a third party content manager.
• Dynamic pages: routes generated from that content rather than built by hand.
• Marketplace: components and sections contributed by the community.
• Collaboration: several people working on one project together.

Publishing is not tied to one place. A site can go out on a Webstudio subdomain, a custom domain, a static export or infrastructure you run yourself, and you can use the hosted version or roll out your own. The core is free and open source under AGPL-3.0-or-later. One optional animation package is proprietary and requires accepting the company's end user license before you use it.

Frappe Builder is a low-code website builder aimed at designers who want ease and developers who want customization. The editor works like Figma and publishing takes a click, so the distance between designing a page and having it live effectively disappears. Pages stay free of unnecessary scripts and styles, which is what most builders quietly charge you in load time.

It runs on the Frappe Framework, a full-stack web application framework, with the Vue-based Frappe UI library supplying the interface. That relationship also brings the framework's built-in CMS for structured content and dynamic data, so data-driven pages need no separate backend.

The tool covers design, data and what happens after publishing.

• Visual editor: drag-and-drop building with responsive views for every screen size and built-in dark mode.
• AI site builder: an agent called Bob that reads your existing pages, reuses your components and theme tokens, waits for approval on sensitive changes and leaves every edit revertable.
• Advanced scripting: global, client and per-block data scripts, typed block props, and properties bound to page data or query parameters.
• Page analytics: a built-in dashboard for page views, unique visitors and top referrers.
• One-click publishing: a finished page goes live without a separate deploy step.

Self-hosting runs from an install script that produces a production instance in about five minutes, with Docker Compose and a local bench setup available for development. Managed hosting exists on Frappe Cloud, and the company's own website is built with the tool.

The pitch for Silex is an argument against lock-in. This free and libre visual builder produces standard HTML and CSS, hosts anywhere, and lets you walk away at any point, with no subscription, no proprietary format and no tracking, which is the opposite of how most no-code tools are shaped.

The editor is built on GrapesJS, pairing drag-and-drop page building with HTML, CSS and JavaScript editors. Output is static, and templates are compatible with 11ty, so a site can be generated and deployed through CI like any other codebase.

Several pieces beyond the editor matter for real client work.

• CMS integration: bind components to WordPress, Strapi, Squidex or any GraphQL API.
• Desktop app: an alpha Tauri build for Windows, macOS and Linux that works offline with no account.
• MCP server: the desktop app exposes a Model Context Protocol endpoint, so a local Ollama model or another compatible client can edit a site by prompt.
• Plugin system: server and client extensions written in JavaScript or TypeScript.
• SEO tools: meta tags, Open Graph and per-page settings.
• Self-hosting: Docker, Node.js or a one-click CapRover deploy.

Silex is maintained by Silex Labs, a non-profit recognized as being of general interest, with transparent finances and no investors, which is the reason there is no premium tier to upgrade to. An online instance is free to try, storing your work in a GitLab account, and the desktop download needs no account at all.

Building a marketing site usually means choosing between a hosted page builder you cannot inspect and a codebase only developers can touch. Ycode is a visual website builder with a CMS attached, published as open source and also sold as a managed cloud service.

Work happens on a canvas where layouts, spacing, styles and responsive behavior are edited directly, and reusable components keep repeated sections in one place. Content lives in collections with fields you define, so structured data and page design stay inside the same tool. Designing from a written prompt is supported alongside direct manipulation.

Self-hosting is deliberately thin on moving parts.

• GitHub: the project is forked into your own account and maintained from there.
• Vercel: the site and its editor deploy to your Vercel account.
• Supabase: a Supabase project supplies the database behind the CMS.
• AI providers: Anthropic, OpenAI, Google and xAI models can each be connected.
• Languages: collections carry an unlimited number of translations.

Installation follows a written guide covering each account you need, and the documentation is actively maintained. The self-hosted edition sets no cap on users, pages or CMS items, while the cloud plan adds managed hosting and a global CDN with a content limit. Official support covers cloud projects, and the open source build is supported by the community on Discord.

Nordcraft builds web apps with server-side rendering, branching, version control and components, and this repository holds the packages that make the framework run. It is also the vehicle for a plan announced in 2024 to open the whole product and make a Nordcraft application self-hostable.

Each package is published to npm and consumed internally by the framework. The repository is built with bun, which handles install, linting, type checking and a single build across every package at once.

The packages divide the runtime along clear lines.

• Core: shared logic that every other package depends on.
• Runtime: hydrating, running and updating an application in the browser.
• SSR: the server-side rendering logic, and the current focus of the migration.
• Standard library: the built-in formulas and actions used by the runtime and during rendering.
• Search: issue rules and project traversal, powering the editor's issue panel inside a web worker.
• CSS parser: the parser behind the style panel in the editor.

The maintainers are candid about the status. Packages are used internally but are not yet ready for outside applications to consume, and most current work lands in the rendering package. Releases go to GitHub and npm once a version bump is merged. Issues and pull requests are welcome, and the documentation lives in its own open repository.