Webapp HTML murni satu file yang portabel dan dapat diperbarui otomatis

 (hyperclay.com)
26 poin oleh GN⁺ 2025-08-19 | 7 komentar | Bagikan ke WhatsApp
  • Hyperclay mendukung pembuatan webapp dengan pendekatan di mana seluruh UI, logika, dan data terintegrasi ke dalam satu file HTML
  • Perubahan dapat dilakukan langsung pada file itu sendiri dengan pengeditan instan dan berbagi secara real-time, serta pengguna bisa mengendalikan sendiri tampilan, perilaku, hingga cara pengeditan aplikasinya
  • Menyediakan struktur jalankan dan simpan seketika tanpa proses build/deploy terpisah, database, atau backend yang rumit
  • Hanya dengan satu file HTML, aplikasi dapat dijalankan di mana saja seperti browser, server, maupun offline, dan semua perubahan dikelola dengan versioning serta pemulihan
  • Dirancang untuk mengurangi kompleksitas pengembangan web modern dan memudahkan siapa pun membuat aplikasi interaktif yang hidup secara real-time

Pengenalan: Hyperclay, webapp hidup yang dibuat hanya dengan satu file HTML

  • Hyperclay menghadirkan pengalaman bagi programmer untuk membentuk webapp layaknya memahat produk dengan satu file HTML portabel, tanpa pengelolaan infrastruktur yang rumit
  • Menargetkan struktur yang sepenuhnya tuntas hanya dengan satu file, dengan menghilangkan elemen yang sebelumnya dianggap wajib dalam pengembangan web seperti file konfigurasi, build, framework, dan pipeline deployment

Konsep inti dan keunggulan

  • Aplikasi tersusun dari satu file HTML
  • Melalui UI visual, file itu sendiri bisa diedit secara real-time, dan hasil edit tersebut langsung disimpan permanen sebagai state aplikasi
  • UI, logika, dan data semuanya termuat secara dinamis dalam satu file
  • Pengguna dapat langsung mengubah aplikasi seperti dokumen, lalu segera membagikan atau mengunduh perubahan untuk dipakai secara offline
  • Seperti analogi "Google Docs for interactive code", proses berbagi, mengedit, dan mengatur kepemilikan bersifat fleksibel

Ringkasan fitur utama

  • Manipulasi langsung: Bisa diedit langsung saat aplikasi sedang berjalan. Perubahan diterapkan seketika tanpa kompilasi atau refresh
  • What you see is what you build: Saat UI diubah atau source code diedit langsung, aplikasi segera berubah tanpa lapisan perantara
  • Portabilitas sejati: Aplikasi dapat diekspor sebagai file HTML dan dijalankan sama persis di mana saja (server maupun offline). Setiap penyimpanan disertai versioning sehingga bisa dipulihkan
  • Semua ini hadir tanpa teknologi khusus, hanya dengan satu file HTML standar

Struktur teknis

  • Hyperclay terdiri dari server NodeJS dan library JS sisi klien
  • Saat halaman HTML memodifikasi DOM-nya sendiri, document.body.outerHTML yang telah berubah dikirim ke server, lalu file HTML itu sendiri diperbarui
  • Perubahan dalam aplikasi seperti atribut checked pada checkbox disimpan permanen ke dalam kode HTML, sehingga state yang sama bisa direproduksi saat dibuka kembali
  • Mendukung versioning serta pengelolaan izin baca/tulis

Contoh nyata

  • Blog yang dapat diedit langsung, checklist jam kerja, dan berbagai aplikasi lain dapat ditulis serta disimpan dalam satu file HTML
  • Menggunakan atribut contenteditable atau bentuk seperti `` untuk langsung mencatat state aplikasi ke dalam dokumen

Latar belakang dan kesadaran masalah

  • Setelah membuat puluhan situs web setiap tahun, muncul kebutuhan agar coding webapp terasa sealami menulis
  • Situs web statis tradisional memiliki perubahan yang bersifat sementara (aksi pengguna tidak disimpan)
  • Untuk menghadirkan persistensi data di web, biasanya dibutuhkan pekerjaan berlebihan seperti membangun database, API, template, dan sistem akun
  • Ini tidak efisien untuk kebutuhan seperti prototipe, alat sederhana, log pengembangan pribadi, atau blogging yang ingin dibuat cepat lalu diedit dan dibagikan secara real-time

Cara Hyperclay menyelesaikannya

  • UI, state, dan perilaku digabungkan dalam satu file HTML
  • Seperti membuka aplikasi desktop, pengguna bisa membukanya dengan mudah lalu langsung mengeditnya, dan hasilnya bisa langsung diterapkan secara online
  • Mengusulkan konsep objek digital yang persisten (shared, cloneable, persistent)
  • Dapat diterapkan pada berbagai alat seperti website builder, alat dokumen/diagram/presentasi, dashboard, blog, pembuatan survei/kuis, dan visualisasi data

Ringkasan konsep keseluruhan

  • Sebagian besar webapp pada dasarnya sudah menggunakan HTML
  • Dengan menghilangkan tahapan perantara, file HTML dapat berfungsi sebagai seluruh database/API/UI, sehingga stack menjadi sangat sederhana hanya dalam beberapa baris
  • Developer dapat mengurangi kompleksitas dan membuat aplikasi yang unggul dalam usability serta maintenance bahkan dengan kode minimal

Contoh penggunaan Hyperclay

  • Blog, checklist, atau aplikasi apa pun dapat ditulis, didistribusikan, dibagikan, dan diedit hanya dengan satu file HTML
  • Bisa langsung digunakan dalam bentuk seperti `My blog!

`, dan `` akan mencatat tiap state secara permanen ke dalam dokumen

Kesimpulan

  • Hyperclay menawarkan cara baru untuk membuat webapp interaktif yang ringan dan sangat portabel, sehingga siapa pun dapat membuat, membagikan, menyimpan, dan memulihkannya secara real-time tanpa kerepotan pengembangan web
  • Ini adalah platform webapp generasi berikutnya yang mudah digunakan bukan hanya oleh developer dan desainer, tetapi oleh siapa pun

Bacaan terkait

7 komentar

 
bobross0 2025-09-03

Menarik juga.
 
aobamisaki 2025-08-21

Ini tampak mirip dengan editor web yang dulu pernah sangat banyak beredar, tetapi menarik karena bisa berjalan hanya dengan satu file HTML. Secara pribadi, saya merasa ini juga semacam proof-of-concept, tetapi sejujurnya saya juga penasaran apa yang bisa terjadi jika ini dimanfaatkan dengan baik.
 
ifmkl 2025-08-20

Cara kerjanya ini bukannya sama persis dengan editor yang pernah diunggah sebelumnya di https://id.news.hada.io/topic?id=19611? Di sini saya juga menambahkan backend sederhana dengan nodejs di server untuk self-hosting agar bisa menyimpan post yang ditulis lewat editor, lalu menambahkan dua fungsi di index.html: memuat daftar dan menampilkannya, jadi saya memakainya sebagai papan blog sederhana, dan setelah melihat-lihat rasanya nuansanya sama.
 
reagea0 2025-08-19

Menarik!
Saya penasaran seperti apa keamanannya.
 
m00nlygreat 2025-08-19

Ide yang menarik. tiddlyWIki juga seru.
 
developerjhp 2025-08-19

Menarik sekali..
 
GN⁺ 2025-08-19
Komentar Hacker News
  • Hyperclay memungkinkan halaman HTML memperbarui DOM dan menjaga halaman tetap mutakhir secara berkelanjutan dengan mengganti sumber .html yang telah berubah melalui server NodeJS dan library JS frontend
    Misalnya, ketika checkbox diklik, atribut checked ditambahkan, lalu document.body.outerHTML dalam keadaan itu disimpan secara global dengan Hyperclay sehingga kunjungan berikutnya menampilkan kondisi yang sama
    Juga mendukung versioning otomatis serta pengelolaan izin baca/tulis
    Menurut saya ini paling berguna ketika peran developer dan editor konten adalah orang yang sama; jika beberapa editor memakainya bersamaan, perubahan mereka bisa saling menimpa
  • Jika server NodeJS itu wajib, saya jadi bingung karena sepertinya ini tidak benar-benar bisa disebut file HTML yang sepenuhnya self-contained
  • Saya menambahkan isi ini apa adanya ke homepage
    Sebagai catatan, saya sedang membuat cara untuk mendorong "migrasi skema berbasis DOM" ke semua aplikasi yang di-fork developer
  • Saya dengar inspirasinya dari TiddlyWiki, tapi bukankah inti TiddlyWiki justru struktur yang tidak membutuhkan server?
    Dalam praktiknya, saat membuat webapp sederhana memang ada titik di mana server akhirnya dibutuhkan, tetapi pendekatan tanpa server dan keterikatan ke server terasa agak kontradiktif
    Meski begitu, kelebihannya adalah akses lintas perangkat yang lebih baik, dan pengeditan online tampaknya akan lebih mudah
    Dalam kasus saya, saya mengedit dari ponsel lewat editor teks lalu menyinkronkannya ke laptop dengan aplikasi sinkronisasi
  • Saya berharap standar web memberi dukungan yang lebih baik untuk halaman file lokal yang dijalankan lewat protokol file://
    Setiap kali membuat miniapp HTML/Vue sederhana, selalu muncul banyak masalah sehingga saya harus terus mencari jalan memutar
    Misalnya, file HTML lokal tidak bisa mengimpor modul JS lokal, atau tidak bisa membuka file lokal lain seperti audio
    Saya paham pembatasan diperlukan untuk mencegah akses sembarangan, tetapi akan bagus jika ada cara untuk mengizinkan akses lewat penentuan ekstensi atau direktori tertentu
    Menyalakan web server setiap kali terasa terlalu merepotkan dan berlebihan; idealnya cukup masukkan URL lalu aplikasi langsung jalan
    • Kendala besar untuk webapp tipe generator adalah hanya halaman yang dimuat lewat HTTPS yang bisa memakai Clipboard API, jadi fungsi salin tidak bekerja di file:///
      Bahkan aplikasi offline total tanpa build maupun dependensi pun, karena batasan ini, harus mengganti tombol dengan area teks, yang cukup merepotkan
      Untuk menjalankan server lokal, memakai VS Code devcontainer berguna karena server bisa naik otomatis, dan dengan tambahan perintah, HTTPS juga bisa dipakai secara lokal
    • Dulu di Windows ada pendekatan HTA, yaitu file HTML dengan ekstensi berbeda yang punya izin akses filesystem tanpa menu browser
      Dari sisi keamanan memang lemah, tetapi versi modern berbasis Electron yang setidaknya bisa mengakses folder atau sqlite db tampaknya masih cukup berguna
      Builder aplikasi wasm seperti Orca, yang hanya menyediakan canvas tanpa browser maupun DOM, juga bisa jadi alternatif
    • Saya paham risiko file HTML lokal, tetapi akan bagus jika browser punya mode "khusus offline" sehingga filesystem lokal dan halaman eksternal bisa dipisahkan aksesnya
      Mungkin bukan solusi sempurna, tetapi cukup berguna karena browser bisa dipakai sebagai server lokal terbatas dengan cara yang sederhana dan intuitif
    • Saya agak kesal ketika HTML mulai dikunci sebagai platform lokal
      Meski begitu, audio, JavaScript, dan sebagainya masih cukup banyak yang tetap berfungsi, dan menjalankan web server juga tidak terlalu sulit karena bisa langsung dijalankan dengan python/node
      Menambahkan perintah webserver_here di terminal atau membiarkannya selalu aktif sudah menyelesaikan masalah
      Justru karena risiko HTML lokal makin besar, saya jadi menginginkan batas yang lebih ketat
    • Baru-baru ini saya memikirkan hal serupa di sini, di sini
      Saat ini satu-satunya alternatif hanyalah localStorage serta ekspor/impor manual
      Saya mendapat ide dari Hyperclay dan tertarik dengan konsep aplikasi Electron yang diinstal sekali lalu bisa memuat banyak miniapp, seperti Electron Fiddle
  • Saya penasaran dengan implementasi teknis Hyperclay
    Apakah ini cuma soal localStorage, atau apakah file ditimpa langsung lewat FileSystemAPI, dan sebagainya; penjelasan tentang cara kerjanya terasa kurang rinci
    Saya juga penasaran apakah saat pengguna menyimpan, perubahan diterapkan otomatis tanpa dialog "simpan sebagai"
    • Ada dua cara di Hyperclay
      1. Hosting: banyak aplikasi HTML memanggil endpoint /save masing-masing untuk menyimpan dan menimpa HTML-nya (dengan backup dan versioning)
      2. Lokal: unduh Hyperclay Local open source(tautan) dan jalankan sendiri; tetap memanggil endpoint /save, bisa melakukan backup, dan bisa di-host di server sendiri dengan kustomisasi langsung (cukup implementasikan auth)
    • Entahlah, kalau ini dibawa satu langkah lebih jauh, bukankah secara esensial jadi mirip PHP atau WordPress yang ditambahi sintaks server?
      Saat sistem makin berlapis, rasanya kompleksitas terus bertambah dan siklusnya malah menambah beban alih-alih memberi perbaikan nyata
    • Penyajian pesan seperti "mengabaikan kebisingan modern web development dan membuat pengalaman yang saya inginkan" yang diselipkan di antara teks singkat dan gambar meme terasa agak aneh
      Pengalaman yang saya inginkan adalah penjelasan inti, cerita lanjutan yang mengalir, dan diagram hanya untuk bagian yang memang perlu
    • Ada DB di server, dan strukturnya menyimpan HTML
      Jadi rasanya bukan berbasis JSON yang hanya menyimpan perubahan, melainkan menyimpan snapshot penuh HTML setiap kali
    • Setahu saya, file HTML-nya sendiri memang diperbarui
      Perubahan pada form, atribut, tag, dan lain-lain langsung diterapkan ke source HTML
  • Rasanya seperti kembali lebih dekat ke visi asli WWW
    Browser web awal (aplikasi Tim Berners-Lee untuk NeXT) juga menyertakan fungsi editor
    Alasan pengeditan HTML awal kemudian menghilang dari web adalah
    1. tidak ada method HTTP PUT, jadi HTML yang sudah diedit tidak bisa disimpan kembali ke web dan hanya bisa disimpan lokal
    2. browser seperti Mosaic didistribusikan tanpa fitur editing demi mengurangi kompleksitas, lalu arah adopsi massal berubah
    • Web yang bisa dibaca/dikomentari/ditulis adalah bentuk web yang sudah lama saya harapkan
      Membuat toolkit tersendiri untuk setiap halaman seperti Hyperclay memang keren, tetapi menurut saya yang benar-benar diinginkan adalah tool standar di level browser (user agent) yang bisa dipakai di mana saja
    • W3C memelihara editor web bernama Amaya selama lebih dari 10 tahun
      Itu ide yang bagus, dan menurut saya juga berfungsi sangat baik sebagai testbed
      Sayang sudah tidak ada, tetapi jelas sangat sesuai dengan visi awal
    • Dalam konteks awal TBL (Tim Berners-Lee), penyimpanan lokal = penyimpanan web
      Di workstation kampus, berbagi jaringan seperti NFS dipakai sehingga file secara efektif tersimpan secara publik dan bisa diakses lewat alamat mesin yang sama
      Di workstation SGI, cukup dengan konfigurasi networking maka semuanya langsung berjalan sempurna
      Selain itu, fokus web saat itu adalah menyusun informasi, dan isi lebih penting daripada tampilan
      Seiring waktu, fokus bergeser ke model WYSIWYG dan penyalahgunaan tabel/div demi tampilan, sehingga semangat awal memudar
      Merancang sesuatu yang sederhana dan bisa dipahami semua orang itu sangat sulit, tetapi sekarang web telah menjadi struktur yang cukup rumit dan hanya dipahami sekelompok kecil ahli
      Saya menyayangkan bahwa HTML masih sebenarnya mudah dipakai, tetapi dalam pengembangan modern telah berubah menjadi keahlian rumit yang sangat spesialis
      Rasanya hanya sedikit orang yang benar-benar memahami konteks yang semula dituju TBL
    • Soal pernyataan bahwa "browser web juga editor"
      Browser zaman sekarang semuanya bisa mengubah HTML/JS/CSS secara live lewat developer tools, jadi saya jadi berpikir bukankah semuanya editor?
      Saya jadi penasaran apakah orang-orang memang tidak memakai devtools, atau mereka hanya memakai React atau TS alih-alih vanilla JS/HTML
      Keluarga Chrome, Firefox, dan Safari semuanya menyediakan kemampuan setingkat IDE bawaan browser, jadi menulis kode langsung pun memungkinkan
  • Setelah melihat Hyperclay, sepertinya ini memakai DOM (virtual DOM)
    Akan lebih baik kalau ada tambahan kebijakan ala Shopify dan panduan legal
    Jika melihat profil HN saya, Anda akan paham kenapa saya menganggap ini keren tetapi tetap merasa aspek legalnya diperlukan
  • Saya pernah mencoba cara serupa untuk save file game
    Baris pertama berbentuk <!DOCTYPE html><html><head><script>const rawData =, dan baris kedua memuat seluruh state
    Saat tombol simpan ditekan, saya mengambil document.documentElement.outerHTML, lalu mengganti baris kedua dengan state terbaru dan mengunduhnya
    Ini bekerja tanpa server
    Kode terkait
    • Di Chrome, kalau membuat bookmark data: URL berikut, Anda bisa membuka editor mirip notepad dalam satu tab, dan selama tab itu tidak ditutup, state akan tetap tersimpan 
      data:text/html,<html><head><title>Notepad</title><style>html,body{margin:0;padding:0;}textarea{padding:10px;font-family:Courier;font-size:16px;height:100%;width:100%;border:none;outline:none;}</style></head><body><textarea style="height:100%;width:100%;font-size:16px;padding:10px;"></textarea><script>document.getElementsByTagName('textarea')[0].focus()</script></body></html>
    • Saya juga membuat game yang berjalan sebagai satu file HTML
      Setelah mengubah teks, bisa disimpan sebagai versi lokal baru
      Di Android + Brave browser ini berjalan baik, tetapi di iOS + Safari tidak didukung
  • TiddlyWiki juga merupakan alat di bidang ini dengan sejarah lebih dari 20 tahun
    Hyperclay tampaknya lebih berfokus pada multi-user/multi-tenancy dan persistensi berbasis DB
    TiddlyWiki juga layak dijadikan referensi
  • Ini terasa seperti proyek seseorang yang menemukan kembali arsip Windows 98 HTA
    Wiki HTA
    • HTA terasa seperti Electron versi asli
      Hanya saja, di lingkungan IE lama, debugging-nya benar-benar neraka
    • HTA adalah teknologi yang bagus sekaligus mengerikan, dan terlalu mendahului zamannya
      Tampilannya seperti halaman web biasa, tetapi khusus IE dan bahkan punya izin menjalankan proses lokal
      Pengelolaan persistensinya yang jadi masalah, dan kemiripannya sangat terbatas
    • Sebelumnya Outlook Web Access tampaknya sempat memainkan peran serupa
      Outlook on the web
    • Saya juga memikirkan hal yang sama dan hendak menuliskannya di komentar
  • Menurut saya ini ide yang unik dan suatu hari saya benar-benar ingin mencobanya
    Setelah melihat situsnya, secara keseluruhan saya suka, tetapi saya penasaran di titik mana batasan praktisnya mulai terlihat
    Dari sisi keamanan: jika saya bisa mengubah halaman saya, apakah orang lain juga bisa? Bagaimana izin dikelola?
    Saat jumlah kode dan logika bertambah, kapan pengelolaannya mulai sulit? Apa yang terjadi ketika jumlah data meningkat?
    Misalnya jika saya membuat aplikasi manajemen bir, apakah pengguna lain bisa menyalin hanya aplikasinya lalu memakainya terpisah tanpa data saya?
    • Keamanan: model kepercayaannya sama seperti hampir semua website builder seperti SquareSpace
      Pengguna bebas mengubah situs miliknya sendiri
      Jika pengguna melanggar kepercayaan itu, akses ke akun berbayar dapat dicabut, dan jika menimbulkan kerugian bagi orang lain maka ada tanggung jawab yang menyertainya
    • Hak modifikasi: siapa pun yang membuat aplikasi bisa memodifikasinya
      Jika fitur "signups" diaktifkan, pengguna lain juga bisa dengan mudah mem-fork aplikasi itu, dan asal-usulnya bisa dilacak
      Fitur untuk mendorong update ke aplikasi fork juga sedang dikerjakan
    • Tingkat kesulitan maintenance: Pieter Levels dari NomadList pun menjalankan aplikasi senilai $60k per bulan hanya dengan satu index.php, jadi pada akhirnya tergantung bagaimana Anda merapikan kode dan sejauh mana Anda bisa menoleransi bagian yang tidak perlu
    • Orang lain bisa mem-fork aplikasi dan menjalankannya sambil hanya menyimpan data mereka sendiri
      Ke depannya ada rencana menambahkan fitur kolaborasi, tetapi saat ini paling cocok untuk pengguna tunggal
  • Ide ini terasa segar
    Proyek Webstrates juga bereksperimen dengan gagasan serupa
    Mereka membuat software kolaboratif untuk kelompok kecil dengan memakai DOM sebagai lapisan persistensi, sementara perbedaan Hyperclay adalah mekanisme ini diterapkan langsung pada halaman web tradisional
    Belakangan mereka juga mencoba pendekatan local-first seperti MyWebstrates
    Saya penasaran apakah Hyperclay juga bisa mendukung editing offline dengan memanfaatkan Webworker
    • Clemens di sini, seseorang yang sangat terkesan dengan Webstrates
      Saya baru mengenalnya saat memikirkan Hyperclay tahun lalu
      Saya benar-benar ingin membuat versi local-first dari Hyperclay, dan saya yakin editing offline adalah pilar utama software personal
      Kalau berkenan, apakah kita bisa bertukar pikiran lewat video call?