Editor teks minimalis yang berjalan di browser dan menyimpan semua isi di URL

• Editor teks ringan yang berjalan di dalam browser dan menyimpan semua teks ke hash URL
• Isi yang dimasukkan dikompresi dengan deflate untuk memendekkan URL, dan bekerja sepenuhnya di sisi klien tanpa server backend
• Menyertakan fitur kenyamanan dasar seperti autosave (jeda 500ms), mode gelap, dan dukungan seluler
• Judul dokumen bisa ditetapkan dengan # Title, atau menambahkan atribut style pada tag <article> agar ikut tersimpan di URL
• Dokumen bisa dibagikan hanya dengan membagikan URL, sehingga berguna untuk catatan sederhana atau berbagi snippet kode

---

Gambaran umum

• textarea.my adalah editor teks minimalis yang berjalan sepenuhnya di browser
  • Semua data disimpan di hash URL sehingga tidak memerlukan server atau database terpisah
  • Dibuat dengan JavaScript dan bisa langsung digunakan tanpa proses instalasi

Fitur utama

• Kompresi teks (Compression magic)

  • Teks yang dimasukkan dikompresi dengan algoritme deflate untuk meminimalkan panjang URL
  • Catatan panjang dapat dibagikan dengan URL sekitar 500 karakter

• Penyimpanan dan berbagi berbasis URL

  • Konten yang ditulis dimasukkan ke hash URL, sehingga tautan tersebut bisa disalin dan dibagikan
  • Dokumen dapat dipulihkan hanya dari tautan tanpa penyimpanan di server

• Autosave dan mode gelap

  • Menyediakan fitur autosave dengan jeda 500ms setelah input
  • Secara otomatis menerapkan mode gelap dengan mengenali pengaturan mode warna sistem

• Antarmuka ramah seluler

  • Dokumen bisa ditulis di smartphone dengan fungsi yang sama
  • Desain responsif membuatnya cocok digunakan saat bepergian

• Arsitektur tanpa backend

  • Sesuai frasa “Zero servers were harmed”, ini adalah aplikasi sepenuhnya berbasis klien
  • Tidak ada beban server atau masalah penyimpanan data pribadi

Cara menggunakan

• Buka textarea.my lalu langsung mulai mengetik
• Anda dapat melihat URL makin panjang seiring isi bertambah
• URL dapat disalin dan dibagikan kepada orang lain

Tip lanjutan (Pro tips)

• Masukkan # Title pada baris pertama dokumen untuk menetapkannya sebagai judul halaman
• Data disimpan ganda di localStorage dan URL
• Jika menambahkan atribut style ke tag <article> di developer tools, style tersebut juga akan disimpan bersama di URL

Tautan contoh

• Tersedia dokumen contoh Crime and Punishment karya Fyodor Dostoevsky
• Tersedia dokumen contoh An Ode to Comic Sans yang ditulis oleh ChatGPT

Karakteristik teknis

• Dibuat berbasis JavaScript
• Data dikelola hanya dengan hash URL dan localStorage tanpa permintaan ke server
• Strukturnya sederhana sehingga meminimalkan risiko keamanan dan memastikan pemuatan cepat

Kesimpulan

• textarea.my adalah editor teks ultra-ringan yang berjalan di lingkungan serverless,
  menawarkan pendekatan unik yang memungkinkan penyimpanan dan pengiriman dokumen hanya lewat berbagi URL
• Ini adalah alat yang cocok bagi developer atau desainer untuk mencatat ide sederhana, memo kode, dan menulis dokumen uji

[GN⁺]

Komentar Hacker News

• Lucunya, saya juga membuat sesuatu yang hampir sama, hanya saja untuk peta
  Saya perlu cara untuk menggambar di atas peta dan membagikan tautan agar orang lain bisa melihat lokasinya sendiri
  Menambahkan anotasi pada tangkapan layar menyelesaikan masalah pertama, tetapi tidak yang kedua
  Jadi saya membuatnya sendiri dengan nuansa Vibe engineering
  Konsepnya seperti ‘aplikasi dadakan’ untuk tujuan tertentu
  Karena bisa di-hosting murah tanpa backend, jadi bisa dibagikan gratis
  Tautan demo MapDraw

  • Keren sekali! Saya sedang memakainya untuk menyusun rencana perjalanan sekarang
    Apakah bisa ditambahkan anotasi teks? Dan akan lebih bagus kalau tombol hapus tidak mengosongkan semuanya, melainkan hanya menghapus bentuk terakhir atau memungkinkan hapus pilihan
  • Ungkapan “Vibe engineered” lucu sekali. vibe coding memang oke, tapi menyebutnya engineering itu yang bikin lucu :D
  • Responsivitas halamannya jauh lebih baik daripada aplikasi peta mana pun yang pernah saya pakai
  • Keren sekali! Satu laporan bug: saat peta digeser, gambar mengikuti dengan mulus, tetapi saat zoom in/out, gambarnya baru bergerak setelah animasi selesai
  • Proyek yang benar-benar keren

• Saya sedang membuat sesuatu yang mirip pagi ini
  Daripada memakai replace pada string base64, lebih rapi memakai .toBase64({ alphabet: "base64url" }) dan fromBase64({ alphabet: "base64url" })
  Lihat dokumentasi MDN

• Menurut spesifikasi, URL setidaknya bisa sampai 8.000 karakter
  Browser utama mendukung lebih dari 64.000 karakter, dan Chrome sampai 2MB
  RFC9110 bagian 4.1-5, referensi StackOverflow, dokumen Chromium

  • Chrome 2MB, Firefox 1MB, WebKit tanpa batas
    Sebagai referensi, tautan seluruh teks Crime and Punishment juga bisa dimasukkan ke URL
  • Rasanya industri pengawasan membuat URL makin panjang hanya untuk menambahkan hal-hal seperti utm-tracker atau ID kampanye
    Lihat saja tautan berbagi Instagram atau YouTube, ada parameter pelacakan ratusan karakter menempel di sana
  • Sebagai catatan, karakter (character) dan oktet (octet) itu berbeda. Jika belum dikonversi ke ASCII yang aman untuk URI, ingat bahwa 1 karakter tidak sama dengan 1 byte

• Saya tidak paham kenapa data disimpan di URL sampai membengkak begitu. Bukankah cukup disimpan di localStorage?

• Dulu saya pernah membuat sesuatu yang mirip dengan spreadsheet
  Itu baru bekerja kalau berpindah tab dari kotak input lalu me-refresh
  Tautan contoh
  Seluruh kodenya sekitar 130 baris
  Lebih banyak contoh

• Saya membuat framework JS kecil agar pendekatan berbagi berbasis URL seperti ini mudah diimplementasikan
  Tautan GitHub lost.js

• Saya suka pendekatan ini dari sudut pandang privasi
  Karena itu saya sedang mempertimbangkan untuk menambahkan opsi penyimpanan URL ke editor kraa.io saya

  • Namun dari sisi privasi, textarea.my menyertakan skrip pelacakan
    Ada kode Cloudflare beacon yang disisipkan, jadi perlu diperhatikan
  • Kalau begitu, adakah kelebihan dari sisi privasi dibanding memakai editor teks native lokal?

• Dulu saya pernah membuat hal serupa untuk tab gitar
  Lihat tabviewer.app
  Masalah URL yang terlalu panjang saya selesaikan dengan layanan short URL

  • Saya juga membuat editor tab untuk tujuan yang sama
    Repositori GitHub

• Proyek yang keren, tetapi saat memuat “Crime and Punishment”, browser mobile saya crash
  Sepertinya URL memang tidak dirancang untuk menanggung ‘hukuman’ sebesar itu

• Sekalian promosi, saya juga membuat hal serupa, tetapi tidak ada yang tertarik
  Tautan GitHub Buffertab

  • Fitur input suara-nya menarik. Saya penasaran apakah pernah terpikir untuk memakai Whisper wasm alih-alih OpenAI API