And it's super simple to implement! Just add `contenteditable=true` to your HTML elements and it's editable. Demo: https://jsbin.com/cuciwazofo/edit?html,output

It can be shorter even than that: contenteditable is a boolean attribute, meaning that it’s its presence that matters, not its value. In fact, “true” is an invalid value for validation purposes: only the empty string and the attribute name (for stupid-from-the-very-start XHTML convention reasons, XML not allowing omitting attribute values and people probably not being quite comfortable with empty string values) are valid. In HTML syntax, you can (and generally should) just write `contenteditable`, and that’s equivalent to `contenteditable=""`. If you really want to confuse those unfamiliar with boolean attributes, `contenteditable="false"` is editable (or, for a more easily understood one, `disabled="false"` is equivalent to `disabled="true"` or `disabled`).

Indeed, I know about this but generally people who are not familiar with HTML gets tripped up about this and the times I've had to explain it, it's been easier to just make it as explicit as possible.

Although it's possible that `contenteditable="false"` would trip them up even more, so good point.

I try it in chromium and firefox. I found that in both contenteditable="false wasn't editable.

My apologies: contenteditable isn’t a boolean attribute as I thought, but rather an enumerated attribute, with "", "true" and "false" being valid values.

https://html.spec.whatwg.org/multipage/interaction.html#attr... has the details. It comes down to the ability to specify contenteditable="false" within a contenteditable area, with the absence of a contenteditable attribute corresponding to the inherit state.

I had quite forgotten that it was possible to nest something non-editable within something editable. Fairly similar to user-select behaviour, really.

while this might be true from standard texts perspective, its not how it works in practice.

>If you really want to confuse those unfamiliar with boolean attributes, `contenteditable="false"` is editable

    document.querySelector('.content > div').setAttribute('contenteditable',false)

and editing no longer works.

As observed already in another comment, I erred on the contenteditable attribute, that it’s not actually a boolean attribute like the best-known one disabled; rather, it’s one of the handful of tristate attributes. But take one that’s actually a boolean attribute, and my remarks are completely correct. As for contenteditable, I’d still recommend writing `contenteditable` rather than `contenteditable="true"` (which two are equivalent).

Tbh, I find it quite annoying to read on mobile, because clicking on the texts opens the keyboard. An apparently I do this a lot while reading :D