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? Toolbars?
There aren’t any! It's just you, and your content.
Build with blocks
In edit mode the purple dashed areas let you add blocks.
Select the dashed area 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 areas 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 area 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 to a gallery
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.
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… ahem, Tailwind.
How does this work?
This site uses a new open source rich text editor I've created - Svedit. It uses Svelte and enables the editing experience you're trying here. Learn more about why I created yet another rich text editor! Editable Website builds on SvelteKit to enable full websites with multiple pages and a persistent backend where only an admin can make changes.
Take a look at the source code for this site.
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: