Imagine you could edit ✍️ your website live on the page
Dream no more…
This is Editable Website
Press ⌘ / Ctrl + e to enter edit mode.
Click where you want to edit.
Move around with the arrow keys.
Change anything you see!
Bold, italics and links with ⌘ / Ctrl + b, i and k
Undo with ⌘ / Ctrl + z
Save changes with ⌘ / Ctrl + s
(On this example page, changes are not persisted. On a real site, a logged in user would have their changes persisted to a database.)
Looking for the admin panel? There isn't any! It's just you, and your content.
Build with blocks
In edit mode the dashed gaps let you add blocks.
Select the dashed gap below this paragraph to see a flashing purple cursor.
Press Enter to add a block.
Change text styles (paragraph > heading etc) with Ctrl + Shift + Right.
Select one of the full width dashed gap to see a flashing purple cursor.
Press Enter to create a new top-level block.
Ctrl + Shift + Down cycles through block types.
Again Ctrl + Shift + Right lets you flip through available layouts.
To move blocks, drag from a dashed gap to select multiple, then cut and paste like usual.
Pro tip: Press Esc to select the parent block. Useful when editing text but wanting to change the parent layout.
Add images and videos
Open a folder on your computer that has some images.
Select one and copy it to the clipboard.
Select the placeholder below and paste it.
To replace an image, select it first, then paste the new one on top.
You can even paste several images at once.
Select three or four from your computer and copy to the clipboard.
Now select a vertical dashed area before or after an image above.
Paste and all the images will be added in one go.
When you add images in the text flow, like the one above, you'll be able to change its size using the handles at the edges of the image.
You can even paste short video clips onto any media placeholder. Currently .mp4 , .webm, and of course .gif are supported.
Link to other pages
Click on one of the cards below.
A link preview appears at the bottom.
Click “EDIT” or press ⌘ / Ctrl + k to bring up the link editor.
The cards above are links to examples of live in-place editable websites Johannes Mutter and I have already launched using this technology. You can see that any design is possible — it’s just HTML and CSS.
How does this work?
The source code is not only available for this site, but for all the foundations it is built on:
Frequently Asked Questions
How is this different to using a CMS?
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.
Is mobile editing supported?
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.
Where is the data stored?
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.
How about AI?
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".
Plugins?
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.
Hosting?
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.
Static builds?
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 client-side before upload: resizing happens in the browser via canvas and toBlob(), and WebP encoding is done with @jsquash/webp. It still makes sense to enable a proxy for images, so they can be delivered from a CDN.
License?
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.
Hello, I’m Michael
Since 2011 I’ve been taming web browsers to behave correctly and predictably when editing rich text.
I want you to be able to launch websites that anyone can edit. No more calls asking you to update someone’s WordPress site! They’ll be able to do it themselves.
Most CMSs are too complex for clients and too restrictive for developers. Change every pixel of your site, create new content types, or integrate 3rd party data. Everything you can do with Svelte, you can do with Editable Website.
I love it! How can I get it?
This is an an initial preview of Editable Website. There’s more to do before you can use it in production. Be the first to hear when it’s ready: