WingNews logo WingNews GitHub [2]
top | item 46378554

Show HN: Minimalist editor that lives in browser, stores everything in the URL

468 points| medv | 3 months ago |github.com | reply

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.

https://textarea.my/

168 comments

order
[+] gnyman|3 months ago|reply
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...

[+] mathgeek|3 months ago|reply
> Vibe engineered

While I'm all for vibe coding as appropriate, there's a lot of humor to be found it calling it engineering. :D

[+] zenmac|3 months ago|reply
Great tool! There is a little issue with the +/- zoom buttons not working something cause it is over layed by other div blocks. On mac firefox.

Is the code open source online somewhere?

[+] nextaccountic|3 months ago|reply
This is pretty cool!

And if you are open to bug reports.. if I move around the drawings move smoothly with the map, but if I zoom in/out the drawings move only after the map zooming animation ends, rather than smoothly

[+] antman|3 months ago|reply
That is absolutely great! Using it now to plan a trip.

Could we also add text annotations? Also the delete button could delete just the last shape or a selected shape so as not to start over?

[+] ninalanyon|3 months ago|reply
Looks useful but doesn't work quite as expected for me.

In Vivaldi location tracking doesn't work. Version 7.7.3851.66 (Official Build) (64-bit) Chromium Version 142.0.7444.245 Extended Stable channel (may also include additional security patches) Channel Official Build Platform / OS Linux - linuxmint 21.3

And in Firefox 146.0.1 on the same machine the URL doesn't get updated.

[+] nolito|3 months ago|reply
But not well tested. Try to create a map and copy the url to another map. Now change the first map with more anotations or move the map center and copy the generated url and paste it into the other map on the other browser. That does not work (at least for me on different browsers).
[+] blntechie|3 months ago|reply
This is so cool!! The responsiveness of the page is so much better than any maps app I have used.
[+] piffey|3 months ago|reply
Love this. Can't tell you how many times I've screenshotted maps then drawn on directions for family/friends. Great idea.
[+] getupyang|3 months ago|reply
Really cool—this is the fastest-loading map I’ve ever used.
[+] maxloh|3 months ago|reply
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...

[+] berkes|3 months ago|reply
I guess the surveillance industry has enough incentives to make this ever larger, so they can fit more utm-trackers, campaign-ids, referal trackers and whatnot in URLs.

It's truly insane how large typical share-URLS for content on instagram, youtube or any other large platforms are. URLs that could've been example.com/t/some-large-enough-id?time=13337 are stuffed with hundreds of characters, just to gather more data on people using these links.

[+] dspillett|3 months ago|reply
> 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.

It is always worth remembering that, unless you have already ensured that the content has been rendered into a URI-safe subset of ASCII, a character and an octet are not the same thing.

[+] mrweasel|3 months ago|reply
What could the reasoning behind allowing anything beyond 64.000 characters possibly been? Even 64k seems unnecessarily large.
[+] gabrielsroka|3 months ago|reply
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
More examples https://gabrielsroka.github.io/webpages/

It's about 130 js loc

[+] 101008|3 months ago|reply
I am thinking from a piracy perspective. If I share a link that contains a book, what can be done from DCMA or legal regulators? They can't ask the server (textarea.my) to remove the link because it doesn't exist.

They can't track every website with the link and ask to be removed, either.

Could they ask textarea.my to not parse the link and thus, not display the content? Could textarea.my refuse?

[+] singiamtel|3 months ago|reply
I would hope not. The copyrighted content seems to be the link rather than anything in the app.

Your example sounds like stopping notepad from rendering copyrighted content

[+] tnecio|3 months ago|reply
In this case I'd say the link is the content. So it would be the place where you share the link, rather than the "rendering page", which should be more worried
[+] fsmv|3 months ago|reply
A book won't fit in the URL anyway even with compression
[+] rfl890|3 months ago|reply
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)
[+] gettingoverit|3 months ago|reply
By the look on the issues there, it seems the rest of the post is not that true either

Edit. Call me a hater, but... I know the guy! That's the guy from Google whose code never works in the most hilarious ways! See issues on the rest of his pinned repos.

[+] levmiseri|3 months ago|reply
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.
[+] omoikane|3 months ago|reply
From a privacy point of view, you might not want to use textarea.my since it includes some tracking bits at the end:

    <script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"6a22b097a2b44fa4af0a95817ce96ab5","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
[+] WD-42|3 months ago|reply
From a privacy point of view how is it any better than just using a local, native text editor?
[+] wingtw|3 months ago|reply
Start writing / Leaf list Settings Press on "add tag to filter by" Type any character

Aand im dropped back to empty editor with just that one character visible

(Firefox 146.0.1 (Build #2016132551), 86bb7f6af6312ba3c0161085f854bcdff68f1a91 GV: 146.0.1-20251217121356 AS: 146.0.2 OS: Android 14)

[+] ctenb|3 months ago|reply
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
[+] nickweb|3 months ago|reply
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).

[+] qingcharles|3 months ago|reply
Here's one I took from somewhere and optimized that is just a bookmarklet, so there's nothing remote:

data:text/html,<title>Notepad</title><textarea autofocus spellcheck=0 style="position:fixed;inset:0;padding:1em;border:0;font:monospace">

Your text actually survives a reboot in Chrome.

Can anyone think of a way to store the textarea value in the URL? I tried using JS to set a # but it's nonsensical in this context.

Edit: here's the best I could do:

data:text/html,<title>Notepad</title><textarea id=t autofocus spellcheck=0 style=position:fixed;inset:0;padding:2em;border:0;font:monospace></textarea><a id=s style=position:fixed;top:10px;right:10px>Right-click Open to save...</a><script>[,P,S]=location.href.slice(15).match(/(.<textarea[^>]>)[^]?(<\/textarea>.)/),t.oninput=U=_=>s.href='data:text/html,'+P+encodeURIComponent(t.value.replace(/&/g,'&amp;').replace(/<\/textarea/g,'&lt;/textarea'))+S,U()</script>

[+] greggman65|3 months ago|reply
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.

[+] wwarren|3 months ago|reply
Amazing. The crime and punishment example crashed my iPhone’s Google Chrome when I tap the URL haha