OpenPage

OpenPage is an open-source website builder in the no-code/website-builder category whose single core function is to describe an entire website as one typed JSON config that both a visual drag-and-drop editor and an AI endpoint can read and write. Unlike code generators such as Lovable, v0, or Bolt, OpenPage does not emit source code; unlike Framer or Webflow, it does not store designs in a proprietary cloud format.

What is OpenPage?

OpenPage is an MIT-licensed, self-hosted website builder for React that takes a text prompt or drag-and-drop edits as input and produces a structured JSON document (plus an exported standalone HTML file) as output. The JSON holds a theme object and an ordered list of blocks, each with an id, type, variant, and props. The visual editor, the renderer, and the POST /api/generate AI endpoint all operate on that same document.

What makes OpenPage stand out?

• JSON-first architecture — every human or AI edit produces clean, diffable, version-controllable JSON instead of generated code, avoiding hallucinated imports and broken builds.
• Visual drag-and-drop editor — real-time preview, block reordering, and inline text editing, backed by Zustand and Immer for undo/redo history.
• AI generation via Gemini — a prompt posted to /api/generate returns a complete SiteConfig with theme, blocks, and content.
• 19 block types and 42 layout variants — navbar, hero, features, pricing, cta, footer, testimonials, stats, faq, team, contact, newsletter, logocloud, content, image, video, gallery, divider, and banner.
• 10 theme presets — Dark Minimal, Ivory, Clean, Sand, Amber, Ocean, Rose, Purple Haze, Slate, and Forest, controlling background, text, accent, fonts, radius, and borders via CSS custom properties.
• One-click HTML export — a self-contained file with inlined theme styles, Tailwind CSS via CDN, and Google Fonts, deployable to Vercel, Netlify, GitHub Pages, or S3.
• Tech stack — React 19, TypeScript 5.9, Tailwind CSS v4, Vite 7, @dnd-kit for drag and drop, and Lucide icons; roughly 5-second production builds and a 176 KB gzipped bundle across 9,300+ lines of TypeScript.

Who is it for?

• Startup founders and marketers who want a landing page generated from a prompt in under 30 seconds and then fine-tuned visually.
• AI agent builders who need a structured API so an agent can add blocks, swap themes, or change copy without breaking a build.
• Developers and agencies who want to version-control a marketing site as JSON and review edits in pull requests with clean diffs.
• Product teams forking the MIT-licensed codebase as the foundation of a white-label page builder.

Use cases

• Landing pages: generate a full page from a text prompt, then adjust blocks and content in the editor.
• Agent workflows: post a prompt to the generate endpoint, receive a SiteConfig, mutate it programmatically, and render or re-post it.
• Client sites and portfolios: build visually, export standalone HTML, and deploy to any static host.
• Prototyping: drag blocks to sketch a layout and hand the exported HTML to a development team.

How does OpenPage work?

Clone the repository, run npm install and npm run dev, then open the editor at http://localhost:5173. Create a site, add blocks from the block picker, choose variants, edit content inline, pick or customize a theme, and export. For AI generation, add a GEMINI_API_KEY to .env and deploy the endpoint to Vercel.

Pricing

OpenPage is free under the MIT license, with no paid tiers, usage limits, or telemetry stated in the documentation.

Alternatives

Framer and Webflow are proprietary visual editors with proprietary storage; Lovable, v0, and Bolt generate source code from prompts. OpenPage stores sites as portable JSON and is self-hostable.

FAQ

Is OpenPage free?

Yes. OpenPage is released under the MIT license for personal and commercial use, and the project states there are no paid tiers, usage limits, or telemetry. AI generation does require your own Gemini API key and a Vercel deployment for the serverless endpoint.

Does the exported site need a build step?

No. Export writes a single standalone HTML file with inlined theme styles, Tailwind CSS loaded via CDN, and Google Fonts, so it opens directly in a browser or deploys to any static host with no runtime dependencies.

Can AI agents edit an OpenPage site?

Yes. The POST /api/generate endpoint accepts a JSON body with a prompt field and returns a complete SiteConfig. Because the schema enforces validity, an agent can add blocks, change props, or swap themes and still produce a renderable site.