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

  1. Same goes
  2. for numbered lists
  3. 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!

TableHeadings
You can add textinto tables
But browsers don'tlet 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:
Me wearing a Google Glass headset
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.


8 thoughts on “Edit this blog post!

  1. Frederic Le Garrec says:

    Displays well in Chrome, but does not display well in the outlook webmail view in Chrome. Interesting.

  2. Most browsers have removed the ability to write back to a page loaded from a file URL, but there are quite a few other approaches the TiddlyWiki community has developed to save edits (it's essentially a quine): tiddlywiki.com/#Saving



  3. Brett says:

    "You can't add new elements. If you type

    <

    h1> no new heading appears."

    I found that you can paste them in if you copy from another webpage. On FF anyway.

Leave a Reply

Your email address will not be published. Required fields are marked *