Item — HN Reader

If you are satisfied with absolutely zero features, just enter this in the address bar (+ save it as a bookmark)

   data:text/html, <html contenteditable>

Works at least in chromium based + Firefox

4 comments

Even better:

   data:text/html, <html contenteditable autofocus>

Love the elegance of this. Thank you.

OMG, I've lived this long and used the web without knowing about this. <bowing>

TIL about the contenteditable attribute, which it turns out can be used on arbitrary elements to make them editable!

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

You seem like a really cool person!

That made me think... it should be pretty easy to set that attribute on every element in the DOM (overkill, but then it makes every piece of text on the page editable, poof!) I can imagine giving that to not-too-technical users to play with changing things on a page - as long as they could paste a one-liner into the dev console:

document.querySelectorAll('*').forEach(function(node){node.setAttribute('contentEditable','true')});

Editable content also supports rich text copy-and-paste, so you can literally control+c a portion of a site and control+v into a content-editable, and it will look exactly how it did on the other site :D

When I used to demo sites to clients, before the meeting started, I’d go into the inspector and set body to be contenteditable.

That way I could edit text while they talked and at the end of the meeting I’d just do a full-page screenshot.

The problem with letting non-technical users have at it is that they don’t realize it’s temporary.

Bonus tip: set `display: block` on a style tag and add `contenteditable`, then users can even edit your page styles in real-time.

Just before you get too far down the content-editable-is-amazeballs rabbit hole I have to have a quick talk with you.

Sadly, the cross browser support situation is pretty flaky. In practice this means you’ll find a lot of variance in the user input you get depending on which browser it’s coming from. Makes it really difficult to keep styling consistent or parse the content of it.

Sadly this is one of those times we can’t have nice things.

Second this- it's my go-to when I just need some quick notes that won't be saved. I've thought about making a version with little markdown helps like automatic bulleting, but I like the simplicity as-is.

That's pretty darn good. If it only saved the data so I could open it again and see my note, it would be perfect.

File: Save-page-as

Then, re-open the file in Chrome. Re-save as needed.

EDIT: Looks like you can even drag-n-drop images and URLs into it.

If you want something that saves + local, you need an extension. This one comes to mind (chromium) https://chrome.google.com/webstore/detail/papier/hhjeaokafpl...

If one only needs a scratch pad, localStorage works. Just save this to a file and load the file into Chrome:

  <html contenteditable="true"><body></body></html>
  <script>
      const a=localStorage.getItem('saved-text-data');
      document.querySelector('body').innerHTML=a;
      setInterval(()=>{localStorage.setItem('saved-text-data', document.querySelector('body').innerHTML);}, 2000);
  </script>

I just about considered buying a short domain and putting this code up on there

This is the winner. Opening a new tab is the lightest weight action. Thanks for suggesting it!

You've changed your requirements here vs. your initial post:

Note from your original post: "It doesn't need to save,".