21 ms·

Show HN: Nash, I made a standalone note with single HTML file

• mattl 2y ago
  This uses HTML, CSS and JavaScript... but all in one file.
  • yevgenyhong 2y ago
    That's right. Exactly! I wanted the document to be edited without a separate editor.
    • mattl 2y ago
      It’s a nice idea.. good job.
    • _def 2y ago
      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
      • lifthrasiir 2y ago
        You are definitely misremembering, unless you are talking about external JS files on ancient MSIE versions I think.
      • chrisldgk 2y ago
        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
      • recursive 2y ago
        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.
      • yevgenyhong 2y ago
        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.
• atmanactive 2y ago
  I still don't understand what is this even though I read all you wrote both here and on the web page.
  • atmanactive 2y ago
    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.
  • aprilthird2021 2y ago
    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
    • venusenvy47 2y ago
      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.
      • yevgenyhong 2y ago
        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.
  • vekatimest 2y ago
    By 'note' I guess they mean rich text editor.
• croisillon 2y ago
  recently i tried to write a local wiki with tiddlywiki and failed lamentably, ending up writing directly an html file * Nash appears to simplify my job, thanks! * plus this for an easy TOC https://codepen.io/cgurski/pen/qBrNrPo https://codepen.io/cgurski/pen/qBrNrPo
• deleted 2y ago
  [deleted]
• cxr 2y 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/ 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 2y 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 2y ago
      This was actually the intent of some early versions of the WWW.
    • cxr 2y ago
      You're not really grokking either my comment or how the existing read-only mode actually works right now.
• joleyj 2y ago
  Is this similar to TiddlyWiki https://tiddlywiki.com/ https://tiddlywiki.com/ ?
  • 20after4 2y ago
    Certainly a similar idea.
  • melvinroest 2y ago
    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.
• joeyguerra 2y ago
  Cool.
• genshii 2y 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 2y ago
    HTML is underrated. Most of the screens we look at daily, including our code editor are HTML pages.
    • OtomotO 2y 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.
      • sanex 2y ago
        According to the latest stack overflow dev survey 74% of respondents use vs code. I think it's a pretty safe statement.
        • dxdm 2y ago
          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.
          • hakaneskici 2y ago
            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 :)
• lifthrasiir 2y 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 2y ago
    This webpage has a warning on close right now but that's a generally good suggestion.
• nextts 2y ago
  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.
  • zahlman 2y ago
    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.
    • nextts 2y ago
      But why is that useful? Just do what Confluence does. Read only, then click a pencil to edit.
• alwayslikethis 2y 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 2y ago
    How file can access anything? It is just data. It can not do anything.
    • Timwi 2y ago
      Executables are files too.
      • npodbielski 2y ago
        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.
        • Timwi 2y ago
          Runtimes and operating systems consist of files, too.
• mikae1 2y ago
  You could make this self contained and truly portable with "real" save using https://rpdillon.net/redbean-tiddlywiki-saver.html https://rpdillon.net/redbean-tiddlywiki-saver.html
  • Alive-in-2025 2y 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
  • mariusor 2y ago
    I built something like this a while back, you can see it at https://original.littr.me https://original.littr.me
• em3rgent0rdr 2y ago
  HTML: the only markup language that we ever needed. All it was missing was a self-contained WYSIWYG editor for it.
• hakaneskici 2y ago
  Nice job! There was a previous discussion about this idea with a mention of TiddlyWiki: https://news.ycombinator.com/item?id=43179649 https://news.ycombinator.com/item?id=43179649
  • justin_oaks 2y ago
    One of my favorites in this space is Feather Wiki: https://feather.wiki/ https://feather.wiki/
    • yevgenyhong 2y 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.
• indigodaddy 2y ago
  The wysiwyg buttons don't seem to function on Android Chrome mobile, at least for me.
  • gverrilla 2y ago
    First you need to SELECT text.
• colonCapitalDee 2y ago
  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 :)
• rwbt 2y ago
  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.
  • SOLAR_FIELDS 2y ago
    Would the use case here be like a dirt simple splash page / redirect / under construction page?
    • rwbt 2y ago
      a simple download page for beta software in a closed group, a birthday invite with all the relevant info
• deleted 2y ago
  [deleted]
• deleted 2y ago
  [deleted]
• fsfsd43535 2y ago
  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).
• Evidlo 2y ago
  Does this support Chrome's filesystem API?
  • slowtrek 2y ago
    Good idea, that's available on many browsers: https://developer.mozilla.org/en-US/docs/Web/API/FileSystem https://developer.mozilla.org/en-US/docs/Web/API/FileSystem
    • porridgeraisin 2y ago
      The GP is talking about a different API: https://developer.mozilla.org/en-US/docs/Web/API/File_System_API https://developer.mozilla.org/en-US/docs/Web/API/File_System... This is one that Firefox refuses to implement (a personal gripe for me)
• czhu12 2y ago
  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 https://reframe.canine.sh/czhu12
  • deleted 2y ago
    [deleted]
• pgreenwood 2y ago
  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.
  • layer8 2y ago
    Save uses an a href (link) with download attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#...), which will usually trigger a normal file download. Share uses Navigator.share (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share https://developer.mozilla.org/en-US/docs/Web/API/Navigator/s...), which should invoke the browser’s “share” menu if it has one.
• zaphod420 2y ago
  This is so good. Thank you for this.
  • Alive-in-2025 2y ago
    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:// 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.
• godot 2y 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 2y 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 2y ago
      The downside, of course, is needing to code in JavaScript.
      • jasonjmcghee 2y ago
        As opposed to? You can use typescript and compile too. And/or still bundle with esbuild
      • kristopolous 2y ago
        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.
  • memhole 2y ago
• busymom0 2y ago
  That pizza pic at the top. Are those shrimps on it? Any good?
  • yevgenyhong 2y ago
    Yes it has shirimp topping, I really liked it.
• ekianjo 2y ago
  Excellent little tool. Thank you for making it
• jjkmk 2y ago
  Great idea, however for some idea ctrl + z (undo) does not work.
• stevage 2y ago
  Calling it a "note" is a bit confusing. I'd call it a self-modifying editable single-file web app.
  • defanor 2y ago
    Indeed, that one would be more descriptive. At first I thought that the project is a joke about pretend-discovering that you can create a web page without tools other than a text editor, and without embedding external resources, similar to vanilla-js.com. I wonder whether "note" is readily understood as "a document edited in a WYSIWYG editor" by some, possibly because it is called that way in some software.
    • yevgenyhong 2y ago
      It's because I didn't think hard enough when I named it. I should have described it as a document with a built-in editor.
• hliyan 2y 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">
  • shashanoid 2y 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 2y 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 2y ago
      What do/did you use to convert pdf to html?
  • hakaneskici 2y 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 https://news.ycombinator.com/item?id=43179649
  • noduerme 2y 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.
• beeflet 2y ago
  Damn, I was working on the same thing but I got caught on implementing LaTeX-compatable <math> support and bitmap/svg diagram drawing. (https://files.catbox.moe/25hxc3.zip https://files.catbox.moe/25hxc3.zip) Also I used emscripten to embed a PNG encoder into the browser The UI of this is a lot better though, for markup-style tasks.
• albert_e 2y ago
  Looks Great ad a freeform note taking tool / blogging tool I would like to understand more how this works -- where the data is stored esp if I were to self host it.
• zareith 2y ago
  Love this. The proliferation of software that imposes artificial limitations and puts features that can be (and have been) easily performed locally, behind subscriptions is quite frustrating. I have been working on a free markdown editor that works entirely in the browser and can edit local files through the new filesystem access api (available in chromium only browsers). https://zareith.github.io/chillmd/ https://zareith.github.io/chillmd/
• computerex 2y ago
  Hello, very cool app. I have been making apps like this using my tool here: https://domsy.io https://domsy.io It's pretty cool how quickly and easily I can generate little static apps like this for ad hoc use cases. I have made a weight tracker, expense tracker, prototypes for work, cards for my wife, slides for work, etc. For example, this slide show app: https://domsy.io/share/644305ab-d36b-40a9-80e7-f0b52abaa18b https://domsy.io/share/644305ab-d36b-40a9-80e7-f0b52abaa18b I import it in domsy.io and give AI a text dump of everything I need, it uses the js in that html to convert to slides that I can download to pdf.
• csprimer-in 2y ago
  [dead]
• Tepix 2y ago
  Tried it in mobile safari. When i i highlight a word and then use one of the font controls, i expect the word to remain highlighted. Also i can't seem to remove formatting like bold/italics by selecting it again.
• fsckboy 2y ago
  I'm clearly missing something, despite the minimalist explanation. So, this is my bug report. I'm not going to explain more, because this is a minimalist bug report.
• noduerme 2y ago
  I think something underrated but cool about this is that it's kind of like a virus. It saves its own JS source code in every file it saves, so that file can go on to make other files. Or maybe that's not cool? I guess I could think of some nefarious ways to implant a little malicious script in a standalone I send someone, that doesn't activate until they send it to someone else who was a target...
• account-5 2y ago
  This is excellent. I wonder how hard it would be to add functionally for lists and tables. Tables would likely be difficult. Great work.
• crushingk 2y ago
  Love this.
• dobin 2y ago
  I am also creating a Log viewer in a single HTML file (like Splunk, but a bit smaller). Pure JavaScript with no dependencies makes it runnable and integratable everywhere, which is nice. https://github.com/dobin/SemiDataSieve https://github.com/dobin/SemiDataSieve
  • SahAssar 2y ago
    Something you might be interested in is that journalctl (systemd's logger) can output real time logs in a format for server-sent-events (journalctl -o json-sse) so with a minimal bash http wrapper you can get realtime logs from most linux systems into your app.
• smusamashah 2y ago
  Does it make a readable HTML if Javascript was to be disabled? edit: yup it does. Can use Ctrl + S to save via browser too instead of the save icon. Nice work. I wanted to make/have something like this [1] and got claude to get something close as a PoC. https://news.ycombinator.com/item?id=42464740 https://news.ycombinator.com/item?id=42464740
• rcarmo 2y ago
  I like this kind of simple tooling - I built a simple custom “homepage”/dashboard the other day: https://github.com/rcarmo/onepage-by-spec https://github.com/rcarmo/onepage-by-spec
  • rcarmo 2y ago
    Just updated it to "save" as well.
• clemensnk 2y ago
  Nice work! I’ve built a research prototype called Webstrates (webstrates.net) and recently created a local-first version: MyWebstrates (https://github.com/Webstrates/MyWebstrates https://github.com/Webstrates/MyWebstrates). I just tested your note on it, and it works nicely. Here’s what I did: I copied the HTML of Nash, went to https://my.webstrates.net https://my.webstrates.net, created a new blank webstrate, opened Developer Tools, and replaced the entire DOM with the Nash HTML. Now the content persists across reloads. To enable real-time collaboration, run this in the console: webstrate.addSyncServer('sync.webstrates.net') Then share the URL: https://my.webstrates.net/?s/<document-hash>@sync.webstrates.net/ https://my.webstrates.net/?s/<document-hash>@sync.webstrates... Now it’s live-editable with others! Webstrates works by storing and syncing changes to the DOM. With the chance of killing my sync server, here's a Nash note on MyWebstrates: https://my.webstrates.net/?s/41W5owzLg94wDQAin4yJXGnFyKWN@sync.webstrates.net/ https://my.webstrates.net/?s/41W5owzLg94wDQAin4yJXGnFyKWN@sy...
  • deleted 2y ago
    [deleted]
  • yevgenyhong 2y ago
    Wow, this is really cool. I should remember it later and study more.
    • pimbrouwers 2y ago
      I came to say exactly this. I was sucked right into this. I am looking forward to reading more thoroughly and understanding it better.
• levmiseri 2y ago
  For something very similar — but with markdown, less features, and minimal UI — I made https://kvak.io https://kvak.io
  • account-5 2y ago
    Is this local or on your site? It doesn't seem similar if it online...
• cushychicken 2y ago
  I really like this, for two reasons: 1) I’ve been getting sick of Jekyll and using it to write, because I find all the work of managing images tedious. 2) my first name is Nash, so this feels like it was made for me. :)
  • yevgenyhong 2y ago
    I hope this was a good gift for you. ;)
    • cushychicken 2y ago
      I haven’t tried sticking an image in it yet, but I drafted a blog post in it already this morning. Very fun. Nice and lightweight. I like it. I may submit a PR for you - I have some ideas about how I could make this more personally useful. Saving off files as Markdown is one idea I had. Would solve my “no pretty markdown editor” woes, and also allow me to chuck output from this directly into my existing GitHub Pages blog.
• curtisszmania 2y ago
  [dead]
• Mizu_048 2y ago
  ooo~ Remarkably similiar to nullboard https://nullboard.io/preview https://nullboard.io/preview https://github.com/apankrat/nullboard https://github.com/apankrat/nullboard
  • everybodyknows 2y ago
    Supports Ctrl-z!
• d_philla 2y ago
  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 https://tabnotes.page (just type a note)
  • rjsteixeira 2y ago
    I remember this and used it for a while! Great idea.
  • brulard 2y ago
    Just one note in local storage? What would you use it for?
    • d_philla 2y ago
      just if i need to type something quickly, to somewhere with effectively zero startup time, just quickly pop a new tab and get a thought down. it's easy for me to lose a thought when im in the middle of something complex, so "time-to-written-down" is kinda the only thing that matters to me
• damhsa 2y ago
  for some reason firefox wasnt saving my changes when i saving as html-only, but saving as complete web page it did.
• secretslol 2y ago
  [dead]
  • secretslol 2y ago
    Whoever downvoted me, care to give any constructive critisism about what exactly deserved the downvote? I'm not meaning that in an arsey way, I'm just a sucker for constructive feedback.
• gradientsrneat 2y ago
  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: https://news.ycombinator.com/item?id=6005295 https://news.ycombinator.com/item?id=6005295 https://news.ycombinator.com/item?id=5135194 https://news.ycombinator.com/item?id=5135194
• ilaksh 2y ago
  Very cool. Did you use an AI tool to help write it? If so, which tool and which LLM model?
• thot_experiment 2y ago
  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 https://thot-experiment.github.io/big_mood/ https://thot-experiment.github.io/big_mood/
• josephernest 2y ago
  I've done a similar tool a few years ago, with "contenteditable". It's great. Especially for non-tech people who want to quickly edit articles on a website. (that was an experiment). The problem I had: when people copy/paste HTML from external sources, after a few edits, a few months later, you see that the HTML is just a horrible mix of various mixed up tags, the structure is lost, you have <div><div><div><div><p><div> everywhere and it's impossible to clean it in WYSIWYG. OP, did you find a satisfying solution to this problem? A good compromise for sanitizing of copy/paste content? TL;DR: not remove the images, but clean the <table class="cf gJ" cellpadding="0"><tbody><tr class="acZ"><td class="gF gK"><table class="cf ix" cellpadding="0"><tbody><tr><td class="c2"><h3 class="iw gFxsud"><span class="qu" role="gridcell" tabindex="-1"> stuff when copy/pasting?
• dusted 2y ago
  That's neat.
• ArkimPhiri 2y ago
  Wow! thats an interesting one
• ternera 2y ago
  This is impressive! I like how you make this without the use of frameworks. Nice job!
• nkabbara 2y ago
  Hey :)! That's my name: https://nashkabbara.com https://nashkabbara.com