Minimalistischer Texteditor, der im Browser läuft und alle Inhalte in der URL speichert

 (github.com/antonmedv)
3 Punkte von GN⁺ 2025-12-25 | 1 Kommentare | Auf WhatsApp teilen
  • Ein schlanker Texteditor, der im Browser läuft und sämtlichen Text im URL-Hash speichert
  • Die Eingaben werden per deflate-Komprimierung verkleinert, um die URL-Länge zu reduzieren, und funktionieren ohne Backend-Server vollständig clientseitig
  • Enthält grundlegende Komfortfunktionen wie automatisches Speichern (500 ms Verzögerung), Dark Mode und mobile Unterstützung
  • Der Dokumenttitel kann mit # Title festgelegt werden, oder dem <article>-Tag lassen sich Style-Attribute hinzufügen, die ebenfalls in der URL gespeichert werden können
  • Dokumente lassen sich allein durch Teilen der URL übermitteln, was für einfache Notizen oder das Teilen von Code-Snippets nützlich ist

Überblick

  • textarea.my ist ein minimalistischer Texteditor, der vollständig im Browser ausgeführt wird
    • Alle Daten werden im URL-Hash gespeichert, sodass kein separater Server oder keine Datenbank erforderlich ist
    • Mit JavaScript erstellt und ohne Installation sofort nutzbar

Hauptfunktionen

  • Textkomprimierung (Compression magic)

    • Der eingegebene Text wird mit dem deflate-Algorithmus komprimiert, um die URL-Länge zu minimieren
    • Lange Notizen lassen sich mit einer URL von ungefähr 500 Zeichen teilen

  • URL-basierte Speicherung und Freigabe

    • Der geschriebene Inhalt wird im URL-Hash eingebettet und kann durch Kopieren des Links geteilt werden
    • Auch ohne Serverspeicherung ist eine Wiederherstellung des Dokuments allein über den Link möglich

  • Automatisches Speichern und Dark Mode

    • Bietet eine Funktion zum automatischen Speichern mit 500 ms Verzögerung nach der Eingabe
    • Erkennt die Farbmodus-Einstellung des Systems und aktiviert den Dark Mode automatisch

  • Mobilfreundliche Oberfläche

    • Auch auf Smartphones lassen sich Dokumente mit denselben Funktionen erstellen
    • Das responsive Design eignet sich für die Nutzung unterwegs

  • Architektur ohne Backend

    • Wie die Formulierung „Zero servers were harmed“ andeutet, ist es eine vollständig clientseitige App
    • Keine Serverlast und keine Probleme mit der Speicherung personenbezogener Daten

Verwendung

  • textarea.my aufrufen und sofort losschreiben
  • Während der Eingabe lässt sich beobachten, wie die URL länger wird
  • Die URL kann kopiert und mit anderen geteilt werden

Fortgeschrittene Tipps (Pro tips)

  • Gibt man in der ersten Zeile des Dokuments # Title ein, wird dies als Seitentitel gesetzt
  • Die Daten werden doppelt in localStorage und der URL gespeichert
  • Fügt man in den Entwicklertools dem <article>-Tag ein style-Attribut hinzu, wird auch dieser Stil zusammen mit der URL gespeichert

Beispiel-Links

  • Es gibt ein Beispieldokument zu Fyodor Dostoevskys Crime and Punishment
  • Es gibt ein Beispieldokument An Ode to Comic Sans, geschrieben von ChatGPT

Technische Merkmale

  • JavaScript-basiert
  • Datenverwaltung ausschließlich über URL-Hash und localStorage, ohne Serveranfragen
  • Durch die einfache Struktur werden Sicherheitsrisiken minimiert und schnelle Ladezeiten erreicht

Fazit

  • textarea.my ist ein ultraleichter Texteditor, der in einer serverlosen Umgebung läuft und
    einen ungewöhnlichen Ansatz bietet, bei dem sich Dokumente allein durch Teilen der URL speichern und übermitteln lassen
  • Ein geeignetes Werkzeug für Entwickler oder Designer, um einfache Ideen festzuhalten, Code-Notizen zu machen oder Testdokumente zu erstellen

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-12-25
Hacker-News-Kommentare

  • Lustigerweise habe ich fast genau dasselbe gebaut, allerdings für Karten
    Ich musste auf einer Karte zeichnen und einen Weg haben, einen Link zu teilen, damit andere ihren Standort sehen können
    Screenshots zu annotieren löst das erste Problem, aber nicht das zweite
    Also habe ich es im Stil von Vibe Engineering selbst umgesetzt. So eine Art „Sofort-App“ für einen bestimmten Zweck
    Ohne Backend lässt es sich günstig hosten und daher kostenlos bereitstellen
    MapDraw-Demo-Link

    • Wirklich großartig! Ich nutze es gerade für meine Reiseplanung
      Könnte man auch Textanmerkungen hinzufügen? Und es wäre schön, wenn der Löschen-Button statt alles zurückzusetzen nur die letzte Form entfernt oder eine Auswahl löscht
    • Der Ausdruck „Vibe engineered“ ist unglaublich witzig. vibe coding ist okay, aber es dann Engineering zu nennen, ist lustig :D
    • Die Reaktionsfähigkeit der Seite ist besser als bei jeder Karten-App, die ich bisher benutzt habe
    • Wirklich klasse! Ein Bugreport: Wenn man die Karte verschiebt, folgt die Zeichnung flüssig, aber beim Rein- und Rauszoomen bewegt sie sich erst nach dem Ende der Animation
    • Ein wirklich tolles Projekt

  • Ich habe heute Morgen etwas Ähnliches gebaut
    Es ist sauberer, bei einem base64-String nicht replace zu verwenden, sondern .toBase64({ alphabet: "base64url" }) und fromBase64({ alphabet: "base64url" })
    Siehe MDN-Dokumentation

  • Laut Spezifikation sind URLs mindestens 8.000 Zeichen lang möglich
    Wichtige Browser unterstützen mehr als 64.000 Zeichen, Chrome sogar bis zu 2 MB
    RFC9110 Abschnitt 4.1-5, Siehe StackOverflow, Chromium-Dokumentation

    • Chrome kann 2 MB, Firefox 1 MB, WebKit hat kein Limit
      Zur Referenz: Sogar der Link mit dem vollständigen Text von Crime and Punishment passt in eine URL
    • Es wirkt, als würde die Überwachungsindustrie URLs immer länger machen, nur um noch mehr Dinge wie utm-tracker oder Kampagnen-IDs unterzubringen
      Wenn man sich Instagram- oder YouTube-Sharing-Links ansieht, hängen da Tracking-Parameter mit Hunderten Zeichen dran
    • Nur zur Erinnerung: Zeichen (character) und Oktett (octet) sind nicht dasselbe. Wenn es nicht in URI-sicheres ASCII umgewandelt wurde, gilt nicht 1 Zeichen = 1 Byte

  • Ich verstehe nicht, warum man Daten in der URL speichert und sie aufbläht. Reicht es nicht, sie in localStorage zu speichern?

  • Ich habe früher etwas Ähnliches als Tabellenkalkulation gebaut
    Es funktionierte nur, wenn man im Eingabefeld per Tab weitersprang und dann die Seite neu lud
    Beispiellink
    Der gesamte Code war ungefähr 130 Zeilen lang
    Mehr Beispiele

  • Ich habe ein kleines JS-Framework gebaut, mit dem sich so ein URL-basiertes Teilen leicht umsetzen lässt
    lost.js GitHub-Link

  • Aus Privatsphäre-Sicht gefällt mir dieser Ansatz
    Deshalb überlege ich, in meinem Editor kraa.io ebenfalls eine URL-Speicheroption hinzuzufügen

    • Aus Privacy-Sicht enthält textarea.my allerdings Tracking-Skripte
      Es ist Cloudflare-Beacon-Code eingebettet, also ist Vorsicht geboten
    • Gibt es dann in Bezug auf Privatsphäre überhaupt einen Vorteil gegenüber einem lokalen nativen Texteditor?

  • Früher habe ich etwas Ähnliches für Gitarren-Tabulaturen gebaut
    Siehe tabviewer.app
    Das Problem mit den zu langen URLs habe ich mit einem URL-Shortener gelöst

  • Tolles Projekt, aber als ich „Crime and Punishment“ geladen habe, ist mein mobiler Browser abgestürzt
    Offenbar sind URLs nicht dafür gedacht, so viel „Bestrafung“ auszuhalten

  • Um mal ein bisschen Eigenwerbung zu machen: Ich habe auch etwas Ähnliches gebaut, aber niemanden hat es interessiert
    Buffertab GitHub-Link

    • Die Spracheingabe ist interessant. Ich frage mich, ob du statt der OpenAI API mal Whisper wasm in Betracht gezogen hast