The next generation of Editable Website — a complete rewrite designed to make Svelte developers happy.
NOTE: v2 is a complete rewrite using Svedit. It's under active development — feel free to explore locally, but hold off on production deployments for now.
For anyone who enjoys creating websites using Svelte and wants to allow their clients to make edits directly in the layout as they browse their site.
For your next website project, you might not need a Content Management System (CMS) anymore. Start from a fully functional, user-editable website that supports common content types: prose, heroes, features, galleries, and listings.
Adapt colors and fonts to deploy a beautiful site within minutes — or customize the entire layout and model your own content types using the Svedit APIs.
Clone the repository:
git clone https://github.com/michael/editable-website.git
cd editable-websiteInstall dependencies:
npm installAnd run the development server:
npm run devTo re-seed the database with the initial demo content, use:
npm run dev:seedNext, you probably want to adjust the colors and fonts in app.css to match your style.
:root {
--background: oklch(0.98 0 0);
--foreground: oklch(0 0 0);
--accent: oklch(0.21 0.034 264);
--accent-foreground: oklch(0.98 0 0);
}
@theme {
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Libertinos Serif Display', ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}However, likely you'll want to customize more than that. E.g. edit Button.svelte to create your very own distinct button style. Anything in src/routes is meant to be customized by you for your project.
fly apps create my-editable-website
fly secrets set -a my-editable-website \
ORIGIN='https://my-editable-website.fly.dev' \
BODY_SIZE_LIMIT='30000000'
fly deploy -a my-editable-website --primary-region fra --vm-size shared-cpu-1x --vm-memory 256 --volume-initial-size 1
The editing infrastructure (Svedit) becomes an integral part of your website (at runtime). As a developer, all you do is define content types (e.g. Figure) and implement components (e.g. Figure.svelte) — they are editable by default.
There is experimental support for mobile editing — it works in principle. The current focus is on desktop UX, but mobile editing will improve over time.
All content lives in a single data/ directory — an SQLite database (db.sqlite3) and uploaded assets (assets/). Locally this defaults to ./data. On Fly.io it's a persistent volume at /data. To back up your site, copy this directory.
Editable Website is a foundational, AI-agnostic tool. That said, it makes perfect sense to utilize AI workflows to help building your custom site. Think prompts like "Create a hero block type with title + description and optional CTA buttons" and "Implement Hero.svelte with 5 distinct layout variations".
Editable Website is modular and you can and should reuse code across projects. However, I purposely don't want to establish a community maintained plugin repository. I want to encourage you to own all your code, for the benefit of simplicity, safety, and control. Share code snippets, not plugins.
Editable Website runs on any VPS. All you need is Node.js and SQLite. The repository includes a Dockerfile and fly.toml for one-command deployment to Fly.io — see Deploying to Fly.io above. The same Dockerfile works with any platform that supports Docker.
There's no point for static builds with Editable Website. The whole idea is that users edit content live, without having to wait for a rebuild to finish. SQLite is fast. Very fast. Web-optimized images are generated on the fly and cached on the server's file system. It makes sense to enable a proxy for images, so they can be delivered from a CDN.
Editable Website will at least be source-available. There will likely be an affordable one-time registration fee (per domain) for personal use, and a fair fee for commercial projects. I'm still working on the details. If you’re open to discussion, join the technical preview.
Find it here.