Show HN: Nash, I made a standalone note with single HTML file
136 comments
·March 14, 2025hliyan
Much of the heavy lifting is done by this simple but powerful attribute, something surprisingly few developers seem to know about. It's been around for quite a while.
<div id="editor" contenteditable="true">snewman
This one line was like 90% of the original implementation of Writely (the startup that became Google Docs; source: I was one of the founders).
The other 90% was all the backend code we had to write to properly synchronize edits across different browsers, each with their own bizarre suite of bugs in their contenteditable implementations :-)
Imustaskforhelp
This is a truly a great insight from how simple things can create industry giants like google docs.
I believe that a lot of problems can be converted into synchronization problems in browsers.
Are there any general synchronization libraries / applications that you suggest within browser / outside browser?
Thanks in advance.
pkage
Not OP, but common solutions in this space represent the state as conflict-free replicated data types (CRDTs). Some popular browser-based libraries for that are Y.js[0] and Automerge[1].
[0]: https://yjs.dev/ [1]: https://automerge.org/
nashashmi
I thought it was a dynamic text box souped up with all sorts of tricks and semantics to make it appear like a rich text editor
noduerme
Yeah, it's pretty amazing. Back in 2016 I was still doing a lot of custom sites for small/mid businesses, and realized that almost all of this could be done with WP or something except (1) WP styling is really annoying and I don't want to maintain that, (2) I didn't want to rely on plugin functionality and upgrading WP, and (3) I wanted people with different levels of access to be able to edit different parts of the same page, which is basically impossible in most CMSs. So I basically wrote a CMS from scratch that relied on nothing but contenteditable and TinyMCE, and handed those tags to the appropriate portions (with back-end checks on what people could or could not edit before it was committed, obviously). But the point is, once a client (or their employees) are logged in, they get the right to edit the portions of their own pages that they have credentials for. The CMS puts a nice little dashed border around the parts they can edit, and all of their fonts and colors are saved in TinyMCE preferences so they don't need to hunt around or muck with any HTML (although they can, if they want to).
This ends up feeling rather magical to the clients, because they don't need to go to an editing page to make changes before seeing what it will look like. They just literally edit the content in place on the page, and hit save to deploy it live.
Most of these sites are still in operation after 5-10 years and require almost zero maintenance on my end.
swiftcoder
In about 2009, the university I worked at adopted one of those enterprise CMS thingamajigs, but this one was called RedDot, and the central UX conceit was a red dot next to every piece of content, which transformed it into an edit control when clicked...
Under the hood it was about as shit as every other enterprise CMS of the era, but our users fucking loved it.
connorgurney
Ah, RedDot - that’s a throwback if I ever heard one!
hakaneskici
I made a live demo of the concept a few weeks ago; it's such as simple but powerful hidden feature of HTML:
shashanoid
I love this. Once made a pdf editor by converting a doc to HTML then throwing in contenteditable="true" in the top-most div lol
eps
I had the same bright idea, but it doesn't work Firefox.
Turns out that it creates two representations of the PDF content - one is text, which has 0 opacity and another is prerendered image of the same layered on top of it. The latter is what's displayed. So while you can enable contenteditable and get the editing cursor, no changes you make will be shown. Oh, well.
vhantz
What do/did you use to convert pdf to html?
rad_gruchalski
Reads like “oh, here’s this amazing thing, it’s called the wheel and the it’s been around for quite a while”. I’m pretty certain I’ve been working with this 20 years ago.
ContentEditable first introduced in ie 5.5 in 2000, available in all major browsers in 2007.
godot
I like it a lot, and I see from the source you're coding in vanilla js, which is awesome. It's underrated how much of an interactive web app you can build without using any libraries or frameworks nowadays.
I actually also really like the idea of building simple/local web apps in a single HTML page. A while ago my child and I visited a science museum and played with a simple stop motion animator. I decided to make a web app just like it and built it as a single HTML page, copied it to her laptop and she can use it without internet. I built it using React and a bundler though, because I'm too lazy to write vanilla js. It just bundles into a single HTML file. Maybe I'll post a Show HN some time.
kristopolous
really, just like we had a "you don't need jquery for that" we need a "you don't need react (or vue, or svelte, or whatever else you are thinking) for that."
plain, vanilla js and some decent skills will do nearly almost everything in a cleaner and more maintainable way.
after decades of maintaining other people's stuff, dumb design by smart people beats all the other combinations.
johnecheck
The downside, of course, is needing to code in JavaScript.
kristopolous
Just learn it right. I'm tired of people fighting it because they think they can learn it by intuition and then create monstrosities that are easily solved by the language they refused to understand properly in the first place.
jasonjmcghee
As opposed to? You can use typescript and compile too. And/or still bundle with esbuild
memhole
I like this about quarto. You can create a standalone html file and share with people.
cxr
Great work.
Consider changing the behavior so that when the page is opened in the browser from the local disk, then it opens edit mode automatically, but when it's published to someone's website and accessed on the open web (check if the address is http/https), then it's a normal, read-only view expected from most pages.
Of course:
1. there should be a way to override this (a query string param or magic URL fragment) so you can look at it in edit mode, too
2. there should be a blanket exception for certain domains/URL prefixes—defaulting to keepworking.github.io (or <https://keepworking.github.io/nash/>)—so it activates edit mode on that site, too, which means that you personally don't have to do anything special to make the demo work (best if this exception is user-modifiable, so e.g. someone else can get the same behavior if they want without using the trick from #1)
zaphod420
I actually really like the idea of websites that allow you to edit the content and save it locally... IMO, this is brilliant and should stay as is.
dotancohen
This was actually the intent of some early versions of the WWW.
cxr
You're not really grokking either my comment or how the existing read-only mode actually works right now.
thot_experiment
I love this sort of thing! I have a mood boarding app I wrote that functions the same way, packing itself and its state into a single HTML file on save.
here in case anyone wants to check it out
mikae1
You could make this self contained and truly portable with "real" save using https://rpdillon.net/redbean-tiddlywiki-saver.html
Alive-in-2025
Yes, please make it offer to save a file. That gets us much closer to the capability of having private bookmarks if we want to
hakaneskici
Nice job! There was a previous discussion about this idea with a mention of TiddlyWiki:
justin_oaks
One of my favorites in this space is Feather Wiki: https://feather.wiki/
yevgenyhong
Yes, before I wrote the post on HN, I shared it with my local community and they told me about the same two features.
I think those two services are more appropriate for the name "Note".
For my project, I should have used Page or Document for the project name.
alwayslikethis
I wish browsers had better support for local web apps. If local files can access persistent storage easily, this can open it up a lot of opportunities for quick and easy GUI apps. Basically the opposite of electron.
npodbielski
How file can access anything? It is just data. It can not do anything.
Timwi
Executables are files too.
npodbielski
Then it is really a runtime that have an access. I.e. it depends if process have an access to a file from which user is executing a bash script.
genshii
This is cool. It's funny how we are (or maybe just I am) so used writing the JS parts of websites outside of the actual HTML that my first thought upon seeing this was "wow it's crazy that this can be done with just HTML". And then looking at the source and seeing all the JS in plain old script tags made me remember that that's a thing that you can do.
hakaneskici
HTML is underrated. Most of the screens we look at daily, including our code editor are HTML pages.
dotancohen
VIM is an HTML page? Or JetBrains editors render an HTML page?
I know that some people code in an HTML page rendered in Electron, that would be Atom and VS Code and family, but that's far enough from the majority of people that declaring "our code editor" is disingenuous.
sanex
See my other comment in this thread. It's 3/4 devs according to SO.
null
OtomotO
Eh, no?
My Code editor is NeoVim or it's IntelliJ
But there is no HTML page involved at all.
What I want to hint at: You're extrapolating the usage of VSCode.
sanex
According to the latest stack overflow dev survey 74% of respondents use vs code. I think it's a pretty safe statement.
hakaneskici
As a side joke regarding vim; I have a theory that my exposure to typewriters as a kid prevented me from adopting vim as an editor :)
Pressing the letter keys for anything other than typing feels so weird to me. My brain might still be thinking of the SHIFT key as a physical modifier that literally shifts the typewriter letters from uppercase to lowercase position.
I admire fast vim users, it's a joy to watch them code.
harrisonjackson
Pretty sure IntelliJ contains a bunch of bundled webviews for various things.
Also, extrapolating usage of vscode seems pretty fair since they said "most"
noduerme
Not necessarily a thing you should do if you want any kind of separability or version control. But definitely a thing you can do.
What blows my mind is that people use frameworks where they include stuff that's not even JS in their HTML, stuff that needs external JS to attach to it or hydrate it. That feels like the worst of both worlds.
I definitely come from an opposite place where JS is king and I don't have any files with an ".html" extension exept for "index.html". And I don't have any HTML in my JS, either. Anything that's a partial template is ".htm" and gets hydrated before it gets added to the DOM.
rcarmo
I like this kind of simple tooling - I built a simple custom “homepage”/dashboard the other day: https://github.com/rcarmo/onepage-by-spec
rcarmo
Just updated it to "save" as well.
lifthrasiir
Suggestion: It should warn when you have edited it and are about to close the page without saving. Consider adding an `onbeforeunload` handler.
gradientsrneat
This webpage has a warning on close right now but that's a generally good suggestion.
d_philla
I love this. I made something similar, even more bare-bones, for myself a few years ago. I still use it literally everyday: https://tabnotes.page (just type a note)
brulard
Just one note in local storage? What would you use it for?
rjsteixeira
I remember this and used it for a while! Great idea.
gradientsrneat
Ahh, good old contenteditable.
This is probably the simplest method, put straight in the address bar:
data:text/html, <html contenteditable>
You'll need a bit longer URI in order to support unicode.
Related Hacker News discussions:
Hello HN, I hope it will posted as well. I made a note in single html file. This does not require a separate membership or installation of the software, and if you download and modify an empty file, you can modify and read it at any time, regardless of online or offline. It can be shared through messengers such as Telegram, so it is also suitable to share contents with long articles and images. It is also possible to host and blog because it is static html file content.