alt Hacker NewsShow HN: Minimalist editor that lives in browser, stores everything in the URL
I wanted to see how far I could go building a notes app using only what modern browsers already provide – no frameworks, no storage APIs, no build step.
What it does:
Single HTML file, no deps, 111 loc
Notes live in the URL hash (shareable links!)
Auto-compressed with CompressionStream
Plain-text editor (contenteditable)
History support
Page title from first # heading
Respects light/dark mode
No storage, cookies, or tracking
The entire app is the page source.
Comments
Was just working on something similar this morning. As an fyi you can avoid the string replacing in the base64 string by using `.toBase64({ alphabet: "base64url" })` and `fromBase64({ alphabet: "base64url"})`.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
Per the spec [0], a URL can hold at least 8,000 characters.
> It is RECOMMENDED that all senders and recipients support, at a minimum, URIs with lengths of 8000 octets in protocol elements. Note that this implies some structures and on-wire representations (for example, the request line in HTTP/1.1) will necessarily be larger in some cases.
Mainstream browsers support at least 64,000 characters [1], and Chrome supports up to 2MB [2].
[0]: https://www.rfc-editor.org/rfc/rfc9110#section-4.1-5
[1]: https://stackoverflow.com/a/417184/
[2]: https://chromium.googlesource.com/chromium/src/+/HEAD/docs/s...
I too built a one (text is stored in localstorage)
I did something similar with a spreadsheet years ago. It's lkudgy, but it works. You have to tab away from the input box and refresh the page, iirc.
https://gabrielsroka.github.io/webpages/calc.htm#a1:=Rate=3....
https://gabrielsroka.github.io/webpages/calc.htm#a1:=Rate=3.875;a2:=Years=30;a3:=NPer=Years*12;a4:=PV=644000;a5:=Pmt=Math.round(Math.pmt(Rate/12/100,NPer,PV)*100+1)/100;rows:5;cols:1
It's about 130 js loc
Cool project, but loading "Crime and Punishment" crashed my mobile browser.
I don't think urls were built for that kind of punishment.
I really like this from a privacy point of view. So much so that I'm thinking about adding a purely URL-storage solution as an option in my https://kraa.io editor.
I recently build a small framework to create JavaScript apps that use this kind of URL sharing and therefore don’t require a backend: https://github.com/grothkopp/lost.js
I keep this in the bookmark bar for the times I need a place to paste a quick bit of text (but it doesn't persist):
data:text/html, <html contenteditable>
I made something similar once, specifically targetted for guitar tablature https://tabviewer.app/ To make links shorter for sharing with others, I use a shortlink service. Pasting URLs of thousands of characters long can be problematic
shameless plug: i built something very similar but nobody cared: https://github.com/AlexW00/Buffertab
Think you've inadvertently found a way to provide extra tests for mobile devices.
The Crime and Punishment one consistently crashes Brave mobile for me. I assume it's the length of the URL - and seen another commentator say the same for chrome mobile (sure they both use the same codebase so likely an upstream issue).
Nice! I made a similar thing but the html for the text editor fits in a data uri, so it can be a bookmark or new tab page for taking quick notes
https://gist.github.com/smcllns/8b727361ce4cf55cbc017faaefbb...
You claim no tracking, and yet there's a Cloudflare Web Analytics beacon placed at the bottom of the page (thankfully filtered out by uBlock Origin)
I have something tangentially similar here: https://jsgist.org
If you click save you get the option to use a URL.
The problem with a URL every edit is a new URL. So you send the URL to a friend, then fix a typo, they need a new URL.
The other problem is of course the space limit.
I wonder if this can be paired with a local URL shortener? Chaining this with a local URL shortener can mean access to any doc with a single letter (or very letters).
> Respects light/dark mode
Not really… using js to change the CSS on the go is not a good practice. Why does it matter? Because of the “dark mode” browser extensions. They often use the presence of @media query (or other standard CSS means of setting dark mode colors), and if it’s the JS that changes the colors we often get partial Dark Mode, which does not work at all.
This is very interesting, very refreshing, very simple and clever, very well done, very everything good. Bravo and thank you.
Brings this to mind: https://hashify.me/IyBUaXRsZQ==
I've implemented the same idea a few years ago: https://pastila.nl/
Nice! I love this.
I built Ponder in the same vein. It, however, has 10 files. I did not use the URL, did not have double the fun, and now I’m sad.
Seems like we have all built something similar.
hopefully mine can stand out with all the extra features i have managed to cram in
Amazing. The crime and punishment example crashed my iPhone’s Google Chrome when I tap the URL haha
I feel this is more of a fun toy project because if i used it every day my browser history cache and browser performance would get annihilated
A few weeks ago I vibe coded a guitar tab editor just because I wanted to share a quick tab in a chat group with my band. When the first prototype already worked great, I just couldn’t stop to add features so that it now even has mouseover chord diagrams and copy and paste.
The sharing works just like here, by encoding the tab itself in the url.
In case you missed it: it is possible to style textarea via CSS and share it.
- https://textarea.my/#TYuxDcIwEEWpmeKUCiSIJQoKU0KFRBUWOGwnWDi...
I have a similar one using localStorage https://github.com/mkaz/browser-pad
I love this.
Now if you bootstrap the app code into the url too then you can have a minimal kernel to run any machine in url.
Then you can also make a Quine somehow.
I wrote a similar app when mathbin was shutting down. It allows about 1500 characters of mathjax-displayed notes. [1]
Neat. But why would you auto-set the title from markdown heading syntax when it doesn’t support markdown? (Or any rich text in fact)
Something similar by Eric Wastl (of Advent of Code fame): https://topaz.github.io/paste/
In Firefox, https://textarea.my shows up as as a completely static non-actionable white page. Just white, with default cursor. No errors on the console.
Thanks for sharing! I tried a similar content-in-url approach for a family grocery list app but I couldn't get the url that short. (It worked but it was a bit cumbersome sharing over Whatsapp.) Will see what I can learn from this!
I think a couple of days ago I stumbled upon your editor in corp Google intranets when I was looking for internal tool to pretty print some json, small world :)
My own plug, translate between SQL dialects, state stored in URL so you can share it:
Are <head>, <body>, and </html> missing intentionally?
Safari 15.6.1: Unhandled Promise Rejection: ReferenceError: Can't find variable: CompressionStream
Just started making my own recently with CodeMirror 6 during holidays. No saving function for now: https://qbane.github.io/cgm
This hack has completely disrupted my afternoon! Perhaps even forever after.
546,229 character-length URL for the Crime and Punishment example.
Half a megabyte for a URL. That certainly is a thing.
Can you make it monospace by default, so that this can be used as a code snippet bin?
love it, funny enough, I had similar idea pop into my head some weeks ago, just to be able to store quick notes and favorite them in my browser for later
It would be neat if ctrl+s offered to download the textarea to a .txt file.
The only thing missing is markdown and few themes. I think this is awesome idea for sharing. Love what you did with it.
Love it!
Now what if it didn't pollute browser history
I like these kinds of projects, but adding a file export/import is inevitable. It's less about the limits of a URL and more about practicality.
I also have no way to confirm that URLs aren't logged server side, so I'd never trust the claim about "no tracking". That's why these projects also end up self-hosted.
Funny how I made almost exactly the same but for maps.
I needed a way to share a link to a map, with drawings and the ability for the receiver to see their own location on the map.
Annotated screenshots solves the first but not the second.
Vibe engineered this, with many of the same ideas as OP.
Took an evening. Just in time apps for one specific use case is a thing.
And because it's so cheap to make and can be hosted cheaply with no backend, it can be given away for free.
https://nyman.re/mapdraw/#l=60.172108%2C24.941458&z=16&d=LU8...