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?
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: