Show HN: Nash, I made a standalone note with single HTML file (keepworking.github.io)

536 points by yevgenyhong ↗ HN
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.

152 comments

[ 2.9 ms ] story [ 228 ms ] thread
This uses HTML, CSS and JavaScript... but all in one file.
That's right. Exactly!

I wanted the document to be edited without a separate editor.

It’s a nice idea.. good job.
I'm curious, somehow I remebered as JS not getting executed when opening a html file from filesystem, but clearly that isn't the case since this works. Did this change? Maybe I'm just misremembering
You are definitely misremembering, unless you are talking about external JS files on ancient MSIE versions I think.
If the JS is embedded within the HTML file it should’ve always worked, but when the HTML loads the JS file from somewhere else (that isn’t a relative path or a full URL that’s hosted somewhere else) it would usually fail, thus it wouldn’t work without running it through some kind of server that resolves the path
script type="module" doesn't work from file systems. To my great annoyance. Other than that, I'm quite certain JS has worked from file systems since it existed.
These days, local html seems to be running javascripts.

If you send html to Telegram, the preview will not run js when the recipient opens it. I think Android and IOS work differently.

I still don't understand what is this even though I read all you wrote both here and on the web page.
Ok, after clicking around for 10 minutes I think I figured out what this is: it is a single-page WYSIWYG HTML editor with the ability to export either everything including itself, or just the HTML without the editor.

How is this useful? For quick writing and sharing of HTML files, but not the links, but the files themselves.

Very interesting,thank you.

The idea is you would write everything in the webpage, like. Google Doc. Then you can download that web page and share it with anyone anywhere and nearly everyone will be able to read it because it will open in a browser
Would I be able to store and edit this type of note on Google Drive? I like to keep documents in the cloud so I can access and edit them from anywhere, like Google Docs. But I don't think Drive can actually open html files, despite working entirely inside the browser.
On my dropbox, I was able to modify and share it on the web or apps. It was not saved.

When I opened html on the file app on my iPhone, js didn't run, so I could only see it

I don't think it's perfect in many ways.

By 'note' I guess they mean rich text editor.
(comment deleted)
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)

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.
This was actually the intent of some early versions of the WWW.
You're not really grokking either my comment or how the existing read-only mode actually works right now.
Is this similar to TiddlyWiki https://tiddlywiki.com/ ?
The HTML part of it perhaps but tiddlywiki is also about connecting ideas.

I think this focuses much more on the standalone HTML part of it.

In the same vein, one could also distribute P2P apps via a standalone HTML file by hooking it up via WebTorrent and using their STUN servers. Or at least, I know that it's possible in the past. Just an example, standalone HTML files can be fully fledged apps is my point.

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.
HTML is underrated. Most of the screens we look at daily, including our code editor are HTML pages.
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.

According to the latest stack overflow dev survey 74% of respondents use vs code. I think it's a pretty safe statement.
It's interesting, I also do not like the implication that we are all using vscode and feel slightly offended that someone would assume that I do. (The original statement is worded ambiguously and can be understood in this way.)

Anyway, I find it remarkable that a piece of software that I don't even use can trigger such a reaction in me, from a perfectly benign and innocent statement about the prevalence of HTML.

Sorry I didn't mean to offend anyone.

That said, I'm genuinely interested in understanding why you felt that way, is using VSCode considered something to be ashamed of or something, is it because it's a Microsoft product?

PS: I have a strong positive bias towards VSCode due to personal history, so just trying to understand the developer perspective :)

> Sorry I didn't mean to offend anyone.

I know, and it's nothing that needs an apology from you. Sometimes people (like me) feel offended over nothing, and it's more interesting for them to question why that is, instead of blamig the other party. That's not to say the reverse can't be true, just that it's tempting and too easy to project one's own offendedness if one isn't careful.

But back to the interesting question of what's up with vscode.

It's a very subjective thing for me, which probably explains the emotional reaction. I'm aware that vscode must be a very solid and practical tool for so many people to use it. But it gives me a negative gut feeling, mostly for the following reasons:

Using what is essentially a browser to edit text feels wrong and bloaty, not unlike going on a cruise ship just so you can eat at a restaurant.

It's made by Microsoft. I'm old enough to remember when they were not ashamed of being openly nasty, how they tried to lock us all into their own walled garden, and the glimpse Internet Explorer gave us into what that would look like. It's hard to trust this company, even if they have taken on a more benign appearance.

So, it just feels very wrong to use a weirdly bloaty browser-editor that a company with a track record of being a Big Bad Influence gives away for free. (I have similar misgivings about Chrome, which does not help vscode.)

Therefore, I prefer dedicated editors and IDEs made by people whose main goal is to make just such tools, and who I can pay for (as a purchase or donation). In summary: vscode works well, but using it makes me feel icky, and there are similar or better alternatives available to me that don't give me such a feeling.

So if there is a public statement that can be read to imply that I'm somehow happily using vscode feels a little like getting mud thrown at me, if that makes any sense, and there's a strong urge to clean up the record and, by extension, myself.

Yeah, I also think it's weird how that works. It's things like this that make me understand better the secret inner workings of people interacting with other people. :)

Ok got it, I think I can relate to your feelings if someone assumed that I use TypeScript or React ;)

I got the courage to ask because I felt that you sounded open for a bit of self-introspection. Thanks for taking the time to describe something that's difficult to describe!

When I joined Microsoft in 2007, Visual Studio was at a state that it didn't even have syntax highlighting for Javascript. Many years later, I got so excited when Microsoft hired Erich Gamma from IBM's Eclipse IDE project (long story) because I knew what was coming. VSCode was originally called Monaco editor, built on top of WinJS library, and was just a little web component. Over the years, it changed significantly to become what it is today.

From your perspective of VSCode being a "Microsoft product", I totally get what you're saying, but VSCode has been one of the few exceptions for me for the reasons explained, and more.

Thanks for providing your perspective and a bit of backstory. It's interesting for me to hear from someone with such a different point of view. It certainly gives more nuance to the topic.
> even if they have taken on a more benign appearance.

The 'nasty' MS hasn't gone away. However their negative actions tend to be swept under the rug as somewhat confined to big biz and govt. Look at their headlines from the last five years for details.

Pretty sure IntelliJ contains a bunch of bundled webviews for various things.

Also, extrapolating usage of vscode seems pretty fair since they said "most"

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.

I can relate to this. I also used typewriters, and my first computer was a mac plus. vim felt so weird and alien to me.

Then I decided to really give it a try and let go of everything I had learned. Now I'm a daily neovim user. kickstart.nvim is really what made it possible to use as a daily coding tool.

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.

See my other comment in this thread. It's 3/4 devs according to SO.
Call me a neckbeard, but 3/4 of devs are not representative of 3/4 of devs in the industry in my opinion. And especially not of 3/4 of devs on HN.

According to: https://survey.stackoverflow.co/2024/technology#most-popular...

It seems that the order of most used technologies on SO is JS, SQL, HTML, CSS, and only then Python. We skip back to TypeScript and then Bash before finally getting to Java, C#, and C++.

I daresay that self-selected people who read, and sign up for, and fill out a survey at Stack Overflow does not represent the industry as a whole.

  > Call me a neckbeard, but 3/4 of devs are not representative of
That should read:

  > Call me a neckbeard, but 3/4 of devs responding to Stack Overflow surveys are not representative of
(comment deleted)
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.

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

UX suggestion. You don't need the "as read only" save options if when you do a normal save the page tells you if it has been changed. That'll get you down to 2 menu options and make me think less.

The "as read only" options produce an HTML document that lacks the editor features - when you open that file from your computer, you'll see static content (although it just changes a couple of HTML attributes and leaves all the JavaScript in, inactive). The normal options re-create the entire page - editor, content and all.
But why is that useful? Just do what Confluence does. Read only, then click a pencil to edit.
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.
How file can access anything? It is just data. It can not do anything.
Executables are files too.
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.
Runtimes and operating systems consist of files, too.
HTML: the only markup language that we ever needed.

All it was missing was a self-contained WYSIWYG editor for it.

Nice job! There was a previous discussion about this idea with a mention of TiddlyWiki:

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

One of my favorites in this space is Feather Wiki: https://feather.wiki/
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.

The wysiwyg buttons don't seem to function on Android Chrome mobile, at least for me.
Nice. I do backend web dev, and it's sometimes useful to have a lightweight testing frontend that's more flexible than Swagger. I've had a lot of success vibe coding my way through these frontends with Claude by rapidly iterating on a single file containing HTML + CSS + JS. It's quite fast to get something good enough working, and putting everything in a single HTML file format keeps it simple enough for me, a guy who doesn't do frontend, to mostly understand what's going on. "All in one" HTML file is a good trick :)
Thanks for making this. Sometimes I want to just write a quick note and serve as a static html file and this is very useful for that purpose.
Would the use case here be like a dirt simple splash page / redirect / under construction page?
a simple download page for beta software in a closed group, a birthday invite with all the relevant info
(comment deleted)
(comment deleted)
This is neat! Reminds me of the good old days of single-page websites. Now, if only it could automatically back itself up to the blockchain... just kidding (mostly).
I actually was hoping to find something like this, but that uses local storage as a backend so it can be plugged into my reframe [1].

It would be nice to have a reasonably nice text editor for notes and whatnot everytime I open a new tab.

[1] https://reframe.canine.sh/czhu12

(comment deleted)
This is quite cool, but I am not sure I understand the difference between 'Save' and 'Share'. They both seem to just save a file.
This is so good. Thank you for this.
If I write a url like news.google.com and select it, then click you linkurl button It should use my text. I just had to re-enter the link. So if I highlight something please accept that as a link, even if I didn't put https:// at the front.

There's a lot of value in these kinds of things to manage your own bookmarks if you choose to without having to expose them to Google and a Google doc or something. Of course you risk losing your file.

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.

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.

The downside, of course, is needing to code in JavaScript.
As opposed to? You can use typescript and compile too. And/or still bundle with esbuild
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.
I like this about quarto. You can create a standalone html file and share with people.