Webruno — Open Source Next.js Website Builder & Headless CMS Alternative (JSON-Based, No Database Required)

A free, open-source Next.js website builder and headless CMS alternative. Build a real website — landing pages, docs, blogs, storefronts — by editing plain JSON files. No database, no CMS login, no drag-and-drop lock-in, and no backend required to get started. Fully self-hostable and MIT licensed, so you can run it, modify it, and ship it commercially.

Live Demo →  •  Docs →  •  Report a Bug  •  Request a Feature

---

Table of Contents

• Why Webruno
• Comparison
• Quick Start
• Editing Your Site
• Known Issue
• Building for Production
• Self-Hosting
• Connecting a Real Backend
• Deploying
• Commands Reference
• Community & Support
• License

---

Why Webruno

Most no-code website builders (Wix, Webflow, Squarespace) lock your content behind their platform — you can't self-host, you can't version-control your pages, and migrating out is painful. Most headless CMS options (Strapi, Sanity, Contentful) solve that but require a database and a backend just to write your first blog post.

Webruno is built for people who want a middle ground:

• No backend required to start — every page renders from local JSON files. Clone, run, edit, done.
• Plain-file content — pages are JSON, not database rows. Diff them in git, review them in a PR, roll them back like code.
• Add a backend only when you need one — flip one environment variable to switch from static JSON to a live API, for stores, dashboards, or anything with dynamic data.
• No lock-in — it's a standard Next.js app underneath. Eject any page to full custom React components at any time; JSON pages and coded pages coexist.
• Fast to learn — the entire page-building system is ~6 block types (row, col, text, paragraph, button, image) plus navigation for menus. Read the docs once, build any layout.
• Self-hosted and open source — MIT licensed, no vendor, no subscription required to use it.

Comparison

	Webruno	Strapi	Wix	Webflow
Self-hosted	✅	✅	❌	❌
No backend/database required to start	✅	❌	❌	❌
Open source	✅ MIT	✅	❌	❌
Content as plain files (git-diffable)	✅	❌	❌	❌
Built on Next.js (React)	✅	—	❌	❌
Add a live backend later without rewriting pages	✅	—	—	—
Free to self-host at any scale	✅	✅	❌	❌

---

Quick Start

git clone <this-repo-url>
cd next
yarn install
yarn dev

Open http://localhost:3000. You'll see a demo site with a home page, a docs page, a contact page, and a blank starter page — all built from JSON files in src/mocks/data/, no backend running.

Start here:

• / — the homepage, explains this system as you scroll
• /docs — full reference for every block type
• /starter — a blank page template, ready to duplicate
• /contact — a simple example page

---

Editing Your Site

Every page and the header/footer live under src/mocks/data/:

src/mocks/data/
  theme.json          ← header + footer, shown on every page
  page/
    home.json          ← served at /
    docs.json          ← served at /docs
    starter.json       ← served at /starter
    contact.json       ← served at /contact

To change something, open the file, edit a value, save. The dev server hot-reloads.

To add a new page, copy page/starter.json to a new filename:

cp src/mocks/data/page/starter.json src/mocks/data/page/pricing.json

That file is now served at /pricing — no routing code to write. The same pattern applies to any content folder (page/, post/, product/, etc.) — the file path under data/ becomes the URL path automatically.

Full explanation of the block system (what a row, text, button, image block is, and how to write your own) is on the /docs page once the app is running, and mirrored in docs.json if you'd rather read it as a file.

Add real images to public/, matching whatever path you reference in an image block's content.src (e.g. "src": "customer/logo.png" needs a file at public/customer/logo.png).

---

⚠️ Known issue — read before editing buttons

There's currently a mismatch in this codebase between the button renderer and the admin editor's field list:

• The rendering component reads content.action for the button's link.
• The admin editor's blockSettingsDefs.ts currently writes to content.href instead.

If you edit a button through the visual editor right now, the link may not work. Until this is fixed (tracked in an open issue — contributions welcome), edit button JSON directly and use content.action, as shown in every example in this repo.

---

Building for Production

yarn build     # creates an optimized production build
yarn start     # runs that build locally, e.g. to test before deploying

yarn build works the same whether you're in mock mode or live-server mode — it just bundles whatever NEXT_PUBLIC_API_MODE is set to at build time.

---

Self-Hosting

1. Clone and install as in Quick Start.
2. Set .env.local:

   NEXT_PUBLIC_API_MODE=mock

3. yarn build && yarn start
4. Point a domain at your machine's IP (or use a reverse proxy) and you're live — no external services, database, or account required.

---

Connecting a Real Backend

When you need live data — orders, accounts, inventory, anything dynamic — point the app at a real backend instead of JSON files.

Option A — buy hosting from us. We give you a base API URL, you plug it in below.

Option B — run your own backend, implementing the same endpoints this app expects (/customer/page/:slug, /theme, /customer/product/:offset/:limit, etc.).

Either way, update .env.local:

NEXT_PUBLIC_API_MODE=live
NEXT_PUBLIC_BASE_URL=https://your-api-domain.com
NEXT_PUBLIC_IMAGE_DOMAIN=https://your-api-domain.com

Restart the dev server (or rebuild for production). All API calls already go through a shared request wrapper that reads this variable — nothing in your page code needs to change.

---

Deploying

This is a standard Next.js app, so it deploys anywhere Next.js does:

• Vercel / Netlify — connect the repo, they detect Next.js automatically, no config needed.
• Your own server / VPS — run yarn build then yarn start behind a process manager (pm2, systemd) and a reverse proxy (nginx, Caddy).
• Docker — build a container image around the standard Next.js production output (yarn build + yarn start, or Next's standalone output mode if you want a smaller image).

If you're running in mock mode, there's no database or backend to deploy alongside it — just the Next.js app itself.

---

Commands Reference

Command	What it does
yarn install	Install dependencies
yarn dev	Start local dev server with hot reload
yarn build	Create optimized production build
yarn start	Run the production build locally

Env variable	Mock mode	Live mode
NEXT_PUBLIC_API_MODE	mock	live
NEXT_PUBLIC_BASE_URL	(ignored)	https://your-api-domain.com
NEXT_PUBLIC_IMAGE_DOMAIN	(ignored)	https://your-api-domain.com

---

Community & Support

• Questions / bugs → open an issue
• Ideas / feature requests → open an issue using the feature request template
• Contributing code → see CONTRIBUTING.md
• Direct contact → support@webruno.com

If this project is useful to you, consider starring the repo — it helps other people find it.

License

MIT — free to use, modify, and ship commercially.

---

Keywords: Next.js website builder, open source website builder, headless CMS alternative, JSON CMS, self-hosted website builder, no-code alternative, React website builder, static site JSON, git-based CMS, Strapi alternative, Wix alternative, Webflow alternative.