Readit News logoReadit News
Posted by u/yevgenyhong 9 months ago
Show HN: Nash, I made a standalone note with single HTML filekeepworking.github.io/nas...
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.
hliyan · 9 months ago
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 · 9 months ago
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 · 9 months ago
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.

nashashmi · 9 months ago
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 · 9 months ago
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 · 9 months ago
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.

hakaneskici · 9 months ago
I made a live demo of the concept a few weeks ago; it's such as simple but powerful hidden feature of HTML:

https://news.ycombinator.com/item?id=43179649

shashanoid · 9 months ago
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 · 9 months ago
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 · 9 months ago
What do/did you use to convert pdf to html?
rad_gruchalski · 9 months ago
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 · 9 months ago
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 · 9 months ago
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 · 9 months ago
The downside, of course, is needing to code in JavaScript.
memhole · 9 months ago
I like this about quarto. You can create a standalone html file and share with people.
cxr · 9 months ago
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 · 9 months ago
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 · 9 months ago
This was actually the intent of some early versions of the WWW.
cxr · 9 months ago
You're not really grokking either my comment or how the existing read-only mode actually works right now.
mikae1 · 9 months ago
You could make this self contained and truly portable with "real" save using https://rpdillon.net/redbean-tiddlywiki-saver.html
mariusor · 9 months ago
I built something like this a while back, you can see it at https://original.littr.me
Alive-in-2025 · 9 months ago
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 · 9 months ago
Nice job! There was a previous discussion about this idea with a mention of TiddlyWiki:

https://news.ycombinator.com/item?id=43179649

justin_oaks · 9 months ago
One of my favorites in this space is Feather Wiki: https://feather.wiki/
yevgenyhong · 9 months ago
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 · 9 months ago
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 · 9 months ago
How file can access anything? It is just data. It can not do anything.
Timwi · 9 months ago
Executables are files too.
genshii · 9 months ago
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 · 9 months ago
HTML is underrated. Most of the screens we look at daily, including our code editor are HTML pages.
dotancohen · 9 months ago
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.

Deleted Comment

OtomotO · 9 months ago
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.

noduerme · 9 months ago
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.

lifthrasiir · 9 months ago
Suggestion: It should warn when you have edited it and are about to close the page without saving. Consider adding an `onbeforeunload` handler.
gradientsrneat · 9 months ago
This webpage has a warning on close right now but that's a generally good suggestion.