Edit this blog post!
This is a regular HTML page. But if you click or tap on the text, you will be able to edit it!
HTML is magic!This isn't a fancy styled <textarea>, it's a <div> element which uses the contenteditable global attribute.
There are some nifty features - depending on your browser.
- You can
- add more bullets
- by pressing enter
How 🆒 is that?!
- Same goes
- for numbered lists
- click here and type a new line
Splelcheck is enabled using spellcheck="true" so ya myte cee som wigggly rred linees underr sertin wordz.
Pre-formatted text is also editable Just tap in here and type away. Fun!
| Table | Headings |
|---|---|
| You can add text | into tables |
| But browsers don't | let you add new rows |
But, there are some limitations. You might not be able to visit this link; the browser doesn't know if your interaction event is to follow or edit.
You can't add new elements. If you type <h1> no new heading appears. You also can't indent bullet points.
The spell check will depend on which dictionaries you have installed.
You probably can't save the changes you've made. I mean, I guess you could copy and past them - but there's no native way to download what you've written.
Global attributes can be applied to any HTML5 element! Obviously, that's a bit nonsensical when applied to media elements like <img>, <video>, etc.
But you should be able to cut, copy, and paste this image to another part of the post:
Or, indeed, any other piece of content into the document.
Is there a risk that someone could edit your site to show something malicious? Yes, but they could do that anyway by editing the HTML directly in the browser.
You can also edit the page's CSS - using this little area:
<style>
</style>
(Thanks to Farai for the CSS tip!)
(The following bit isn't editable.)
Learn more about contenteditable on MDN.
If you've spotted any weirdness on your browser when interacting with this post - please drop me a note in the comments.
| Reply to original comment on twitter.com
Frederic Le Garrec says:
| Reply to original comment on twitter.com
#/cc @psd
| Reply to original comment on twitter.com
Welcome
| Reply to original comment on mastodon.technology
| Reply to original comment on twitter.com
Brett says:
<
h1> no new heading appears."
I found that you can paste them in if you copy from another webpage. On FF anyway.
Time to replace all our links with inline buttons.Z E says:
I hope you're well.