Tek dosyalı, taşınabilir, otomatik güncellenen saf HTML web uygulaması

 (hyperclay.com)
26 puan yazan GN⁺ 2025-08-19 | 7 yorum | WhatsApp'ta paylaş
  • Hyperclay, tüm UI, mantık ve verinin tek bir HTML dosyasında birleştiği şekilde web uygulamaları oluşturmayı destekler
  • Dosyanın kendisinde yapılan değişikliklerle anında düzenleme ve gerçek zamanlı paylaşım mümkündür; uygulamanın görünümünü, davranışını ve düzenleme biçimini doğrudan kontrol edebilirsiniz
  • Ayrı bir build·deploy süreci, veritabanı veya karmaşık bir backend olmadan anında çalıştırma·kaydetme yapısı sunar
  • Tek bir HTML dosyasıyla uygulama tarayıcıda, sunucuda, çevrimdışı dahil her yerde çalıştırılabilir ve tüm değişiklikler sürüm kontrolüyle saklanıp geri yüklenebilir
  • Modern web geliştirmenin karmaşıklığını azaltmak ve herkesin gerçek zamanlı, yaşayan etkileşimli uygulamalar kolayca oluşturabilmesi için tasarlanmıştır

Giriş: Tek bir HTML dosyasıyla yaşayan web uygulamaları, Hyperclay

  • Hyperclay, programcılara karmaşık altyapı yönetimi olmadan, tek bir taşınabilir HTML dosyası ile adeta ürün şekillendirir gibi web uygulamaları oluşturma deneyimi sunar
  • Mevcut web geliştirmede zorunlu görülen ayar dosyaları, build, framework'ler, deploy pipeline'ları gibi parçaları ortadan kaldırır ve tek dosyada tamamlanan bir yapı hedefler

Temel kavram ve avantajlar

  • Uygulama tek bir HTML dosyasından oluşur
  • Görsel UI üzerinden dosyanın kendisi gerçek zamanlı düzenlenebilir ve bu düzenlemeler doğrudan uygulamanın durumu olarak kalıcı biçimde kaydedilir
  • UI, mantık ve verinin tamamı tek dosya içinde dinamik olarak yer alır
  • Kullanıcılar uygulamayı bir belge gibi anında düzenleyebilir, değişiklikleri hemen paylaşabilir/indirebilir ve çevrimdışı kullanabilir
  • "Interactive code için Google Docs" benzetmesindeki gibi paylaşım, düzenleme ve sahiplik kontrolü esnektir

Başlıca özelliklerin özeti

  • Doğrudan manipülasyon: Uygulama çalışırken anında düzenlenebilir. Derleme veya yenileme olmadan değişiklikler hemen yansır
  • What you see is what you build: UI'yi değiştirir ya da kaynak kodu doğrudan düzenlerseniz uygulama anında değişir; arada katman yoktur
  • Gerçek taşınabilirlik: Uygulamayı HTML dosyası olarak dışa aktararak her yerde (sunucu·çevrimdışı) aynı şekilde çalıştırabilirsiniz. Her kayıt işleminde sürüm kontrolü uygulanır ve geri yükleme yapılabilir
  • Tüm bunlar özel bir teknoloji gerektirmeden, yalnızca tek bir standart HTML dosyasıyla gerçekleşir
Reklam

Teknik yapı

  • Hyperclay, bir NodeJS sunucusu ve istemci tarafında çalışan bir JS kütüphanesinden oluşur
  • HTML sayfası kendi DOM'unu değiştirdiğinde, değişen document.body.outerHTML sunucuya gönderilir ve HTML dosyasının kendisi güncellenir
  • Checkbox'ların checked özelliği gibi uygulama içindeki değişiklikler kalıcı olarak HTML koduna yazılır; böylece sonraki erişimde aynı durum yeniden üretilebilir
  • Sürüm kontrolü ve okuma/yazma izin yönetimi desteği sunar

Gerçek örnekler

  • Doğrudan düzenlenebilen bloglar, çalışma saati checklist'leri gibi her türlü uygulama tek bir HTML dosyası olarak yazılıp kaydedilebilir
  • contenteditable özelliği veya `` biçimiyle uygulama durumu doğrudan belgeye yazılır

Arka plan ve problem tanımı

  • Her yıl onlarca web sitesi üretirken, web uygulaması kodlamanın yazı yazmak kadar doğal olması yönünde bir ihtiyaç vardı
  • Geleneksel statik web sitelerinde değişiklikler geçicidir (kullanıcı eylemleri kaydedilmez)
  • Web'de veri kalıcılığı sağlamak için veritabanı, API, template ve hesap sistemi kurmak gibi aşırı iş gerekir
  • Prototipler, basit araçlar, kişisel geliştirme günlükleri, bloglama gibi hızlıca üretmek, gerçek zamanlı düzenlemek ve paylaşmak istenen ihtiyaçlar için bu yapı verimsiz kalır

Hyperclay'in çözüm yaklaşımı

  • UI, durum ve davranış tek bir HTML dosyasında birleşir
  • Tıpkı bir masaüstü uygulamasını açar gibi kolayca açıp anında düzenleyebilir, sonucu doğrudan çevrimiçi yansıtabilirsiniz
  • Kalıcı (shared, cloneable, persistent) dijital nesneler kavramını ortaya koyar
  • Web sitesi oluşturucular, belge·şema·sunum araçları, dashboard'lar, bloglar, anket·quiz üretimi, veri görselleştirme gibi birçok araca uygulanabilir
Reklam

Genel kavram özeti

  • Çoğu web uygulaması zaten HTML kullanır
  • Ara adımlar kaldırıldığında HTML dosyası tam veritabanı/API/UI rolünü üstlenir ve stack birkaç satıra kadar sadeleşir
  • Geliştiriciler karmaşıklığı azaltarak minimum kodla kullanışlı ve bakımı kolay uygulamalar oluşturabilir

Hyperclay kullanım örnekleri

  • Bloglar, checklist'ler ve diğer her türlü uygulama yalnızca tek bir HTML ile yazılabilir·dağıtılabilir·paylaşılabilir·düzenlenebilir
  • `내 블로그!

` biçimiyle hemen kullanılabilir; `` ile her durum kalıcı olarak belgeye kaydedilir

Sonuç

  • Hyperclay, web geliştirmenin zahmeti olmadan, herkesin hafif, taşınabilir ve etkileşimli web uygulamaları üretip bunları gerçek zamanlı paylaşmasına, kaydetmesine ve geri yüklemesine olanak tanıyan yeni bir yöntem sunar
  • Yalnızca geliştiriciler ve tasarımcılar için değil, herkesin kolayca kullanabileceği yeni nesil bir web uygulama platformudur

İlgili okumalar

7 yorum

 
bobross0 2025-09-03

İlginçmiş
 
aobamisaki 2025-08-21

Bu, eskiden ortalıkta bolca bulunan web editörleriyle çalışma mantığı açısından benzer ama sadece tek bir HTML dosyasıyla da çalışabilmesi ilginç. Benim açımdan bu da bir tür Proof-of-Concept gibi görünüyor ama dürüst olmak gerekirse, bunun iyi şekilde kullanılması halinde neler olabileceğini merak ediyorum.
 
ifmkl 2025-08-20

Bu çalışma biçimi, daha önce paylaşılmış olan https://tr.news.hada.io/topic?id=19611 bağlantısındaki editörün çalışma biçimiyle tamamen aynı değil mi? Ben de burada kendi sunucumda self-hosting için Node.js ile basit bir backend ekleyip editörde yazılan postları kaydedecek hale getirdim ve index.html içinde listeyi çekip gösteren iki özellik daha ekleyerek bunu basit bir blog/pano olarak kullanıyorum; etrafa bakınca oldukça benzer bir his veriyor.
 
reagea0 2025-08-19

İlginçmiş! Güvenliğinin nasıl olduğunu merak ediyorum.
 
m00nlygreat 2025-08-19

İlginç bir fikir. tiddlyWiki de eğlenceliydi.
 
developerjhp 2025-08-19

İlginçmiş..
 
GN⁺ 2025-08-19
Hacker News yorumu
  • Hyperclay, NodeJS sunucusu ve frontend JS kütüphanesi üzerinden HTML sayfalarının DOM'u güncellemesine ve değişen .html kaynağını değiştirerek sayfanın sürekli güncel kalmasına imkân veriyor
    Örneğin bir onay kutusuna tıklanınca checked niteliği ekleniyor ve bu durumdaki document.body.outerHTML Hyperclay ile genel olarak kaydedilip bir sonraki ziyarette aynen yansıtılıyor
    Otomatik sürümleme ve okuma/yazma izin yönetimini de destekliyor
    Bence en çok geliştirici ile içerik editörü rolü aynı kişi olduğunda kullanışlı; birden fazla editör aynı anda kullanırsa birbirlerinin değişikliklerinin üzerine yazabilirler
  • Eğer NodeJS sunucusu zorunluysa, bunun tamamen self-contained bir HTML dosyasıyla mümkün olmaması kafamı karıştırıyor
  • Bunu ana sayfaya aynen ekledim
    Bu arada geliştiricinin fork'ladığı tüm uygulamalara "DOM tabanlı şema migration" gönderebilmenin bir yolunu uygulamaya çalışıyorum
  • Esini TiddlyWiki'den aldığını duydum ama TiddlyWiki'nin özü sunucu gerektirmeyen bir yapı değil miydi diye merak ediyorum
    Gerçekte basit web uygulamaları yaparken sunucuya ihtiyaç duyulan bir nokta geliyor ama sunucusuz yaklaşım ile sunucuya bağlılığın biraz çelişkili hissettirdiği oluyor
    Yine de avantajı, cihazlar arası erişilebilirliği artırması ve çevrimiçi düzenlemeyi kolaylaştırması gibi görünüyor
    Benim durumumda metin editöründe telefondan düzenleyip senkronizasyon uygulamasıyla dizüstüne eşitliyorum
  • Keşke web standartları file:// protokolüyle çalışan yerel dosya sayfalarına daha iyi destek verse
    Basit HTML/Vue mini uygulamaları yaptığım her seferinde çeşitli sorunlar çıktı ve hep dolaylı çözümler aramak zorunda kaldım
    Örneğin yerel HTML dosyası yerel JS modüllerini import edemiyor ya da başka yerel dosyaları (ses vb.) açamıyor
    Kontrolsüz erişimi engellemek için kısıtların gerekli olduğunu anlıyorum ama belirli uzantıları veya dizinleri açıkça belirterek izin verme gibi bir yol olsa iyi olurdu
    Her seferinde web sunucusu ayağa kaldırmak çok zahmetli ve gereğinden fazla geliyor; ideal olan yalnızca URL'yi girip uygulamayı hemen çalıştırabilmek
    • Üretici tipi web uygulamalarında büyük bir kısıt şu: yalnızca HTTPS üzerinden yüklenen sayfalar Clipboard API'yi kullanabiliyor, bu yüzden file:/// altında kopyalama çalışmıyor
      Build'siz ve bağımlılıksız tamamen çevrimdışı uygulamalarda bile bu sınır yüzünden düğme yerine metin alanı kullanmak gerekiyor, bu da uğraştırıcı
      Yerel sunucu çalıştırmak için VS Code devcontainer kullanırsanız sunucu otomatik ayağa kalkıyor ve ek bir komutla yerelde de HTTPS mümkün oluyor
    • Eskiden Windows'ta HTA diye bir yöntem vardı; uzantısı farklı olan HTML dosyalarıydı ve tarayıcı menüsü olmadan dosya sistemine erişim yetkisine sahipti
      Güvenlik açısından zayıftı ama bugün Electron tabanlı, klasör veya sqlite db gibi şeylere erişebilen modern bir versiyonu da işe yarayabilir
      Orca gibi tarayıcı/DOM olmadan yalnızca canvas sağlayan wasm uygulama üreticileri de bir alternatif
    • Yerel HTML dosyalarının riskini anlıyorum ama tarayıcıda "yalnızca çevrimdışı" modu gibi bir şey olup yerel dosya sistemiyle dış sayfaları ayırarak erişim sağlanabilse güzel olurdu
      Mükemmel bir çözüm olmazdı ama tarayıcıyı kısıtlı bir yerel sunucu gibi basit ve sezgisel biçimde kullanmaya izin vereceği için yeterince faydalı olurdu
    • HTML'in yerel platform olarak kilitlenmeye başlanmasından bir ölçüde rahatsızlık duymuştum
      Yine de ses, JavaScript vb. belli ölçüde çalışıyor ve web sunucusu açmak da python/node ile hemen yapılabildiğinden çok zor değil
      Terminale webserver_here komutu eklemek ya da bunu sürekli hazır tutmak çözüm oluyor
      Hatta yerel HTML'in riskleri yüzünden daha katı sınırlar istemeye başladım
    • Yakın zamanda burada, burada benzer konuları düşünmüştüm
      Şu an tek alternatif localStorage ile elle dışa aktarma/içe aktarma gibi görünüyor
      Hyperclay'den ilham aldım; Electron Fiddle gibi tek sefer kurulan ve birçok mini uygulamayı yükleyen bir Electron uygulaması fikri ilgimi çekiyor
  • Hyperclay'in teknik olarak nasıl çalıştığını merak etmiştim
    Bunun sadece localStorage meselesi mi olduğu, yoksa FileSystemAPI ile dosyayı doğrudan üstüne mi yazdığı gibi ayrıntılı çalışma mantığı yeterince açıklanmamıştı
    Kullanıcı kaydettiğinde "farklı kaydet" penceresi olmadan otomatik uygulanıp uygulanmadığını da merak ettim
    • Hyperclay'de iki yöntem var
      1. Hosting: Birden çok HTML uygulaması kendi /save endpoint'ini çağırarak HTML'i kaydedip üzerine yazıyor (yedekleme ve sürümleme sağlanıyor)
      2. Yerel: Açık kaynak Hyperclay Local'ı (bağlantı) indirip kişisel olarak çalıştırıyorsunuz; yine /save endpoint'ini çağırarak yedekleme mümkün, isterseniz doğrudan kendi sunucunuzda özelleştirip barındırabilirsiniz (yalnızca auth uygulamanız yeterli)
    • Bilmiyorum, bunu bir adım ileri götürünce sunucu sözdizimi eklenmiş PHP ya da WordPress'e özünde benzemiyor mu?
      Sistem çoğaldıkça giderek karmaşıklaşıyor ve pratikte iyileşmeden çok yük getiren bir döngü gibi hissettirdi
    • "Modern web geliştirmenin gürültüsünü görmezden gelip istediğim deneyimi kuruyorum" mesajının kısa metinlerle meme görselleri arasına serpiştirilmiş sunumu bana biraz tuhaf geldi
      Benim istediğim deneyim, ana açıklama, akışı olan arka plan hikâyesi ve yalnızca gerçekten gerekli diyagramlardan oluşuyor
    • Sunucuda bir veritabanı var ve HTML kaydediliyor
      Yani JSON tabanlı değil (değişiklikleri ayrı saklamak yerine), daha çok HTML'in her anlık görüntüsünü kaydetme hissi veriyor
    • Anladığım kadarıyla HTML dosyasının kendisi güncelleniyor
      Formlar, nitelikler, etiketler vb. değişiklikler doğrudan HTML kaynağına yansıyor
  • WWW'nin ilk vizyonuna yeniden yaklaşma hissi veriyor
    İlk dönem web tarayıcıları da (NeXT için Tim Berners-Lee uygulaması) editör işlevi içeriyordu
    Erken dönemde HTML düzenlemenin web'de kaybolmasının nedeni şunlardı:
    1. HTTP PUT metodu yoktu, bu yüzden düzenlenmiş HTML web'e kaydedilemeyip yalnızca yerelde saklanabiliyordu
    2. Mosaic gibi tarayıcılar karmaşıklık vb. nedenlerle düzenleme özelliğini çıkartıp dağıtıldı ve yaygınlaşma yönü değişti
    • Okunabilen / yorum eklenebilen / yazılabilen bir web, çok uzun zamandır istediğim web görüntüsü
      Hyperclay gibi her sayfa için bağımsız bir toolkit oluşturmak da havalı ama asıl arzu edilen şeyin tarayıcı (user agent) düzeyinde her yerde kullanılabilen standart araçların sunulması olduğunu düşünüyorum
    • W3C, Amaya adlı bir web editörünü 10 yılı aşkın süre sürdürdü
      İyi bir fikirdi ve test ortamı rolünü de gayet iyi yerine getirdiğini düşünüyorum
      Ortadan kalkmasına üzülüyorum ama ilk vizyonla açıkça uyumluydu
    • TBL'nin (Tim Berners-Lee) ilk bağlamında yerel kaydetme = web'e kaydetme idi
      Üniversite workstation'larında NFS gibi ağ paylaşımları kullanılarak dosyalar fiilen herkese açık şekilde kaydedilebiliyor ve aynı makine adresinden erişilebiliyordu
      SGI workstation'larda ağ ayarlarını yaptıktan sonra her şey kusursuz biçimde anında çalışıyordu
      Ayrıca web'in odağı bilgiyi yapılandırmaktı; görünümden çok içerik daha önemliydi
      Zamanla WYSIWYG modeli ile tablo/div aşırı kullanımı gibi görünüş takıntıları öne çıktı ve ilk amaç bulanıklaştı
      Herkesin anlayabileceği sade bir tasarım yapmak gerçekten zor ama bugün yapı, yalnızca az sayıda uzmanın anlayabildiği oldukça karmaşık bir hale geldi
      HTML hâlâ kolay yazılabilirken modern geliştirmede karmaşık bir uzmanlık alanına dönüşmüş olmasına üzülüyorum
      Sanki TBL'nin hedeflediği bağlamı gerçekten anlayan yalnızca az sayıda kişi kalmış gibi
    • "Web tarayıcısı da editördür" kısmı hakkında
      Bugünün tarayıcılarında geliştirici araçlarıyla HTML/JS/CSS canlı olarak düzenlenebildiğine göre hepsi birer editör değil mi diye düşündürüyor
      İnsanlar gerçekten devtools kullanmıyor mu, yoksa vanilla JS/HTML yerine sadece React ya da TS mi kullanıyorlar diye merak ediyorum
      Chrome, Firefox ve Safari ailesinin hepsi tarayıcı içine gömülü IDE seviyesinde özellikler sunuyor; doğrudan kod yazmak da mümkün
  • Hyperclay'e bakınca DOM'u (sanal DOM'u) kullanan bir yapı gibi görünüyor
    Shopify tarzı politika ve hukuki bilgilendirmelerden biraz daha eklenirse daha da iyi olur
    HN profilime bakarsanız bunun neden havalı olduğunu düşündüğümü ama aynı zamanda hukuki tarafın da gerekli geldiğini anlayabilirsiniz
  • Oyun kayıt dosyalarında da benzer bir yöntem denemiştim
    İlk satır <!DOCTYPE html><html><head><script>const rawData = biçimindeydi, ikinci satırda ise tüm durum tutuluyordu
    Kaydet düğmesine basınca document.documentElement.outerHTML alıp ikinci satırı en güncel durumla değiştirerek indiriyordum
    Sunucu olmadan da çalışıyor
    İlgili kod
    • Chrome'da aşağıdaki data: URL yer imini oluşturup bir sekmede not defteri tarzı bir editör açabiliyorsunuz; sekmeyi kapatmadığınız sürece state korunuyor 
      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>
    • Ben de benzer şekilde tek bir HTML dosyası olarak çalışan bir oyun yaptım
      Metni düzenledikten sonra yeni bir yerel sürüm olarak kaydedilebiliyor
      Android + Brave üzerinde iyi çalışıyor ama iOS + Safari'de desteklenmiyor
  • TiddlyWiki de bu alanda 20 yılı aşkın geçmişe sahip bir araç
    Hyperclay ise çok kullanıcılılık / multi-tenancy ve veritabanı tabanlı kalıcılığa daha fazla odaklanan bir yapı gibi görünüyor
    TiddlyWiki de bakmaya değer
  • Birinin Windows 98 HTA arşivini yeniden keşfetmiş gibi duran bir proje
    HTA wiki
    • HTA, orijinal Electron hissi veriyordu
      Ama eski IE ortamında debug etmek tam bir kâbustu
    • HTA zamanının ötesinde, hem iyi hem de (aynı anda) korkunç bir teknolojiydi
      Sıradan bir web sayfası gibi görünüyordu ama IE'ye özeldi ve yerel süreçleri çalıştırma yetkisine kadar sahipti
      Kalıcılık yönetimi sorunluydu ve benzerlik de oldukça sınırlı
    • Ondan önce Outlook Web Access de benzer bir rol oynamış gibiydi
      Outlook on the web
    • Ben de tam aynı şeyi düşündüm ve bunu yorum olarak yazacaktım
  • Fikrin özgün olduğunu düşünüyorum ve bir gün mutlaka denemek isterim
    Siteye de baktım, genel olarak hoşuma gitti ama gerçek dünyadaki sınırlamaların nerede ortaya çıktığını merak ediyorum
    Güvenlik açısından: Ben bir sayfayı değiştirebiliyorsam başkası da değiştirebilir mi? Yetkiler nasıl yönetiliyor?
    Kod ve mantık arttıkça yönetimin zorlaştığı nokta neresi? Veri miktarı artınca ne oluyor?
    Örneğin ben bir bira takip uygulaması yaparsam, başka kullanıcılar verilerim olmadan yalnızca uygulamayı kopyalayıp ayrı ayrı kullanabilir mi diye merak ediyorum
    • Güvenlik: SquareSpace vb. neredeyse tüm web sitesi oluşturucularla aynı güven modeline sahip
      Kullanıcı kendi sitesini özgürce değiştirebilir
      Kullanıcı güveni suistimal ederse ücretli hesap erişimini kaybeder ve başkalarına zarar verirse sorumluluğu üstlenir
    • Düzenleme yetkisi: Uygulamayı oluşturan herkes düzenleyebilir
      "signups" özelliği etkinleştirilirse diğer kullanıcılar da uygulamayı kolayca fork edebilir ve kaynağa kadar iz sürebilir
      Fork edilen uygulamalara güncelleme gönderme özelliği de geliştiriliyor
    • Bakım zorluğu: NomadList'ten Pieter Levels da yalnızca tek bir index.php ile aylık 60 bin dolarlık bir uygulama işletiyor; sonuçta mesele kodu nasıl düzenlediğinize ve gereksiz parçaları ne kadar tolere edebildiğinize bağlı diye düşünüyorum
    • Başkaları uygulamayı fork edip yalnızca kendi verilerini kaydedecek şekilde çalıştırabilir
      İleride iş birliği özellikleri eklemeyi planlıyorlar ama şu anda en çok tek kullanıcıya uygun
  • Bu fikir bana yenilikçi geldi
    Webstrates projesi de benzer şeyleri deniyor
    DOM'u kalıcılık katmanı olarak kullanarak küçük gruplar için iş birlikçi yazılımlar geliştiriyorlar; Hyperclay'in farkı ise bu mekanizmayı doğrudan geleneksel web sayfalarına uygulaması
    Son dönemde MyWebstrates gibi local-first yaklaşımlar da deneniyor
    Webworker kullanarak Hyperclay'e çevrimdışı düzenleme desteği eklenip eklenemeyeceğini merak ediyorum
    • Ben Clemens, Webstrates'ten derinden etkilenmiş biriyim
      Hyperclay'i kurgularken geçen yıl ilk kez öğrendim
      Hyperclay'in local-first bir sürümünü gerçekten yapmak istiyorum ve çevrimdışı düzenlemenin kişisel yazılımın temel direklerinden biri olduğunu düşünüyorum
      Uygunsa bir video görüşmesinde fikir alışverişi yapabilir miyiz?