Remix.run Logo
Remix clone Hacker News
new | show | ask | jobsGithub
▲ Show HN: Minimalist editor that lives in browser, stores everything in the URL(github.com)
284 points by medv 11 hours ago | 93 comments

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/

▲gnyman 8 hours ago | parent | next [-]

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 8 hours ago | parent | next [-]

> 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

▲block_dagger 8 hours ago | parent [-]

Fair. Though it seems that half of engineering is just giving a respectable name to whatever actually works.

▲mathgeek 7 hours ago | parent [-]

For software, but that's a well trodden path at this point. I've seen a few projects that are actually "vibe engineering" outside of software on the 3d modeling side so the terms are confusing.

▲blntechie 40 minutes ago | parent | prev | next [-]

This is so cool!! The responsiveness of the page is so much better than any maps app I have used.

▲nextaccountic 2 hours ago | parent | prev | next [-]

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

▲Gehinnn 7 hours ago | parent | prev | next [-]

This is very cool!

▲RandomDistort 8 hours ago | parent | prev [-]

Is this open source?

▲roxolotl 9 hours ago | parent | prev | next [-]

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...

▲maxloh 10 hours ago | parent | prev | next [-]

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...

▲medv 10 hours ago | parent | next [-]

Chrome limit is 2MB, Firefox is 1MB, WebKit is no limit.

Here is the Crime and Punishment by Fyodor Dostoevsky:

- https://medv.io/goto/crime-and-punishment-by-fyodor-dostoevs...

▲maxloh 9 hours ago | parent | next [-]

For what it's worth, there might be a 2GB limit on the iOS side.

https://github.com/swiftlang/swift-corelibs-foundation/blob/...

▲spicyusername 4 hours ago | parent | prev | next [-]

Incredible.

My absolute favorite thing about modernity is how enabled we are to riff on a riff of a riff.

In 1346, if a blacksmith came up with something cool, its quite possible that it died with them.

▲gchamonlive 7 hours ago | parent | prev | next [-]

Interesting, in Firefox mobile (actually fennec) if I tap the address bar, I get an empty text box.

EDIT: actually I can edit the URL, but it takes a while to load.

▲oneseven 5 hours ago | parent | prev | next [-]

hmmm makes me wonder if you could train llms on gzipped text. would save a lot of tokens that way.

▲scotty79 9 hours ago | parent | prev | next [-]

Works fine on Win11 Edge

▲hallole 10 hours ago | parent | prev [-]

LOL Tapping the address bar crashed my Chrome on mobile.

▲lurking_swe 8 hours ago | parent [-]

loaded OK for me on mobile safari.

▲kylecazar 8 hours ago | parent [-]

Loaded fine for me too -- but like parent, tapping the address bar to share afterwards crashed it on Android here :)

▲nosrepa 7 hours ago | parent [-]

My Firefox on mobile seemingly handled it fine.

▲berkes 9 hours ago | parent | prev | next [-]

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 9 hours ago | parent | prev [-]

> 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.

▲ghurtado 9 hours ago | parent [-]

Very good point indeed. In the worst case scenario, you would only have 1/5th of that capacity

▲gabrielsroka 5 hours ago | parent | prev | next [-]

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

▲meander_water an hour ago | parent | prev | next [-]

Cool project, but loading "Crime and Punishment" crashed my mobile browser.

I don't think urls were built for that kind of punishment.

▲jerrygoyal 38 minutes ago | parent | prev | next [-]

I too built a one (text is stored in localstorage)

https://gourav.io/devtools/notepad

▲levmiseri 9 hours ago | parent | prev | next [-]

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 7 hours ago | parent | next [-]

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 8 hours ago | parent | prev [-]

From a privacy point of view how is it any better than just using a local, native text editor?

▲levmiseri 7 hours ago | parent [-]

From purely privacy point of view it’s not. But if you also want markdown features, custom typography and easy sharing, this starts to make more sense.

▲growt 10 hours ago | parent | prev | next [-]

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

▲ctenb 10 hours ago | parent | prev | next [-]

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

▲planb 9 hours ago | parent [-]

Wow funny I‘m just seeing this after posting my tab editor in another comment. I have the same use case as you :)

https://github.com/planbnet/guitartabs

▲bdcravens an hour ago | parent | prev | next [-]

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>

▲surrTurr 8 hours ago | parent | prev | next [-]

shameless plug: i built something very similar but nobody cared: https://github.com/AlexW00/Buffertab

▲nickweb 9 hours ago | parent | prev | next [-]

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).

▲samcollins 10 hours ago | parent | prev | next [-]

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...

▲rfl890 4 hours ago | parent | prev | next [-]

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)

▲greggman65 7 hours ago | parent | prev | next [-]

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.

▲frizlab 4 hours ago | parent | prev | next [-]

> 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.

▲thelastgallon 3 hours ago | parent | prev | next [-]

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).

▲billforsternz 9 hours ago | parent | prev | next [-]

This is very interesting, very refreshing, very simple and clever, very well done, very everything good. Bravo and thank you.

▲valgaze 5 hours ago | parent | prev | next [-]

Brings this to mind: https://hashify.me/IyBUaXRsZQ==

▲zX41ZdbW 6 hours ago | parent | prev | next [-]

I've implemented the same idea a few years ago: https://pastila.nl/

▲codazoda 9 hours ago | parent | prev | next [-]

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.

https://github.com/codazoda/ponder

▲wwarren 10 hours ago | parent | prev | next [-]

Amazing. The crime and punishment example crashed my iPhone’s Google Chrome when I tap the URL haha

▲spacedoutman 6 hours ago | parent | prev | next [-]

Seems like we have all built something similar.

hopefully mine can stand out with all the extra features i have managed to cram in

▲planb 9 hours ago | parent | prev | next [-]

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.

https://github.com/planbnet/guitartabs

▲cantalopes 4 hours ago | parent | prev | next [-]

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

▲medv 10 hours ago | parent | prev | next [-]

In case you missed it: it is possible to style textarea via CSS and share it.

- https://textarea.my/#TYuxDcIwEEWpmeKUCiSIJQoKU0KFRBUWOGwnWDi...

▲marcuskaz 10 hours ago | parent | prev | next [-]

I have a similar one using localStorage https://github.com/mkaz/browser-pad

▲ljlolel 9 hours ago | parent | prev | next [-]

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.

▲mixedmath 8 hours ago | parent | prev | next [-]

I wrote a similar app when mathbin was shutting down. It allows about 1500 characters of mathjax-displayed notes. [1]

[1]: https://davidlowryduda.com/mathshare/

▲urbandw311er 6 hours ago | parent | prev | next [-]

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)

▲sltkr 8 hours ago | parent | prev | next [-]

Something similar by Eric Wastl (of Advent of Code fame): https://topaz.github.io/paste/

▲huhtenberg 9 hours ago | parent | prev | next [-]

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.

▲pglevy 9 hours ago | parent | prev | next [-]

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!

▲gisho 8 hours ago | parent [-]

I created a similar app just 2 days ago targeting Whatsapp (https://linqshare.com) . Context: In my locality, EA, we normally have Whatsapp groups raising funds for whatever reason; for every content edit, the admin has to copy-edit-paste updated content(which contains name and amount) to the group. This small app intends to provide a table that's easy to convey this info. App stores content in the url but a preview image (needed for Whatsapp share) is stored at R2. Let me know if you want the source code running at Cloudflare.

--edit-- test link: https://linqshare.com/#eJxtkM9KxDAQxl-lzLmHrv8Ova3IHlz04BY8F...

▲nemtsv 7 hours ago | parent | prev | next [-]

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 :)

▲WhyIsItAlwaysHN 8 hours ago | parent | prev | next [-]

My own plug, translate between SQL dialects, state stored in URL so you can share it:

https://sqlscope.netlify.app/

▲reconnecting 8 hours ago | parent | prev | next [-]

Are <head>, <body>, and </html> missing intentionally?

Safari 15.6.1: Unhandled Promise Rejection: ReferenceError: Can't find variable: CompressionStream

▲wdporter 8 hours ago | parent [-]

I probably shouldn’t presume to speak for the OP, but given that they’re optional, I would think so, yes.

▲qbane 10 hours ago | parent | prev | next [-]

Just started making my own recently with CodeMirror 6 during holidays. No saving function for now: https://qbane.github.io/cgm

▲nvahalik 11 hours ago | parent | prev | next [-]

Love your other tools, btw!

▲medv 10 hours ago | parent [-]

Thanks!

▲theoa 6 hours ago | parent | prev | next [-]

This hack has completely disrupted my afternoon! Perhaps even forever after.

▲jaysonelliot 9 hours ago | parent | prev | next [-]

546,229 character-length URL for the Crime and Punishment example.

Half a megabyte for a URL. That certainly is a thing.

▲xeonmc 10 hours ago | parent | prev | next [-]

Can you make it monospace by default, so that this can be used as a code snippet bin?

▲medv 10 hours ago | parent | next [-]

Sure! textarea.my support custom style attr: https://textarea.my/#Ky4tSlVUyCotLlEoLUhJLElVKC6pzElVSCwpKWJ...

▲throwaway150 9 hours ago | parent [-]

How do you share after that? I can open devtools and change the attribute but the URL doesn't update after that.

▲adamschwartz 10 hours ago | parent | prev [-]

Try https://a10z.co/note

▲edgars_xx 10 hours ago | parent | prev | next [-]

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

▲LordDragonfang 9 hours ago | parent | prev | next [-]

It would be neat if ctrl+s offered to download the textarea to a .txt file.

▲desireco42 9 hours ago | parent | prev | next [-]

The only thing missing is markdown and few themes. I think this is awesome idea for sharing. Love what you did with it.

▲ThrowawayTestr 10 hours ago | parent | prev | next [-]

https://textarea.my/#Cy4tsAcA

▲teach 10 hours ago | parent [-]

https://textarea.my/#Cy4tsOfi8ssvUcgtTc7QU_DIz0stLsmpVPBUSK0...

▲medv 9 hours ago | parent [-]

https://textarea.my/#ZY_NTgMhFIVd9ylYNZpMuQwDmZ9m4qM0SG9ncCg...

▲RonanSoleste 7 hours ago | parent [-]

https://textarea.my/#ZY87b8MgFIU7-1fQJWqlBDDG8iOyOnfvHlF8Y6g...

▲mzelling 10 hours ago | parent | prev | next [-]

Love it!

▲deafpolygon 11 hours ago | parent | prev | next [-]

Can you save anything?

▲rorylawless 10 hours ago | parent | next [-]

https://textarea.my/#i0wtBgA=

▲sltkr 9 hours ago | parent [-]

No that should be: https://textarea.my/#c8yrLMnIzEsHAA==

▲RonanSoleste 7 hours ago | parent [-]

More like: https://textarea.my/#c8yrLMnIzEu3BwA=

▲thomascgalvin 10 hours ago | parent | prev [-]

Not OP: sure, just bookmark it

▲tony_cannistra 10 hours ago | parent [-]

kinda -- but then you have to re-bookmark it every time you update it...

▲medv 10 hours ago | parent [-]

It also saves to localStorage

▲rane 8 hours ago | parent | prev | next [-]

Now what if it didn't pollute browser history

▲sublinear 10 hours ago | parent | prev [-]

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.

▲denisinvader 9 hours ago | parent [-]

hash part of url only available in the browser, as far as I know, server doesn’t have access to # value

▲jamesdwilson 9 hours ago | parent | next [-]

very easy for the server to intentionally (or by compromise) add a one liner to send the hash text up.

▲sublinear 9 hours ago | parent | prev [-]

Typos and URL mangles are common though, and I'd still have no way to confirm if it got logged in that case. It's out of scope for anything in the github source, and instead depends on the server hosting the page. I know this isn't meant to be super secure, but it's still worth a mention.

▲throwaway150 9 hours ago | parent [-]

Typos aren't making the hash part turn into something else. Like your parent comment explained to you, the hash part is not sent to the server. If you go out of your way to mangle the URL then of course a mangled URL without hash will likely get logged to the server. But I'm not sure how one would manage to go so much out of the way that they mangle the URL in a way that removes the hash.

▲sublinear 7 hours ago | parent [-]

You don't have a choice pasting links into some apps. They may strip out query and hash components, percent encode, force URL shortener services, etc.

Percent encoding is particularly bad since it may also bloat the length causing truncation and the decompress to fail. There's endless footguns with URLs.