एकल फ़ाइल, portable, auto-update होने वाला शुद्ध HTML webapp

 (hyperclay.com)
26 पॉइंट द्वारा GN⁺ 2025-08-19 | 7 टिप्पणियां | WhatsApp पर शेयर करें
  • Hyperclay ऐसे webapp बनाने का समर्थन करता है जिनमें पूरा UI, logic और data एक ही HTML फ़ाइल में एकीकृत होता है
  • फ़ाइल के भीतर ही बदलाव होते ही तुरंत संशोधन और real-time sharing संभव है, और app का रूप, व्यवहार और edit करने का तरीका भी सीधे नियंत्रित किया जा सकता है
  • अलग build·deploy प्रक्रिया, database या जटिल backend के बिना तुरंत run·save होने वाली संरचना देता है
  • सिर्फ एक HTML फ़ाइल से browser, server, offline आदि कहीं भी app चलाया जा सकता है, और सभी बदलाव version control व recovery के साथ सुरक्षित रहते हैं
  • आधुनिक web development की जटिलता को घटाकर, किसी के लिए भी real-time में जीवंत interactive app आसानी से बनाना संभव बनाने के लिए इसे डिज़ाइन किया गया है

परिचय: एक HTML फ़ाइल से बनने वाला जीवंत webapp, Hyperclay

  • Hyperclay प्रोग्रामरों को जटिल infrastructure management के बिना, एक portable HTML फ़ाइल के साथ मानो कोई उत्पाद गढ़ रहे हों, वैसा webapp बनाने का अनुभव देता है
  • यह पारंपरिक web development के अनिवार्य हिस्से रहे config files, build, framework, deploy pipeline आदि को हटाकर, सिर्फ एक फ़ाइल में पूरा होने वाली संरचना का लक्ष्य रखता है

मुख्य कॉन्सेप्ट और फ़ायदे

  • app एक ही HTML फ़ाइल से बना होता है
  • visual UI के ज़रिए फ़ाइल को real-time में edit किया जा सकता है, और ये edits तुरंत app की state के रूप में स्थायी रूप से save हो जाती हैं
  • UI, logic और data सब कुछ एक ही फ़ाइल में dynamic रूप से शामिल रहता है
  • उपयोगकर्ता दस्तावेज़ की तरह app को तुरंत बदल सकते हैं, और बदलावों को तुरंत share·download करके offline इस्तेमाल भी कर सकते हैं
  • "Google Docs for interactive code" जैसी उपमा की तरह, sharing, editing और ownership control काफ़ी स्वतंत्र है

प्रमुख फीचर्स का सार

  • Direct manipulation: app चलते समय ही उसे edit किया जा सकता है। compile या refresh के बिना बदलाव तुरंत लागू हो जाते हैं
  • What you see is what you build: UI बदलें या source code सीधे edit करें, app तुरंत बदल जाता है और बीच में कोई मध्यवर्ती layer नहीं है
  • सच्ची portability: app को HTML फ़ाइल के रूप में export करके कहीं भी (server·offline) उसी तरह चलाया जा सकता है। हर save पर version control लागू होता है, इसलिए recovery संभव है
  • यह सब किसी विशेष तकनीक के बिना, केवल एक standard HTML फ़ाइल से संभव होता है

तकनीकी संरचना

  • Hyperclay NodeJS server और client-side JS library से बना है
  • जब HTML page खुद DOM को modify करता है, तो बदला हुआ document.body.outerHTML server को भेजा जाता है, और वही HTML फ़ाइल अपडेट हो जाती है
  • checkbox के checked attribute जैसे app के अंदर हुए बदलाव स्थायी रूप से HTML code में save हो जाते हैं, जिससे अगली बार खोलने पर वही state फिर से मिलती है
  • Version control और read/write permission management का समर्थन है

वास्तविक उदाहरण

  • सीधे edit होने वाला blog, work-hour checklist आदि जैसे हर तरह के app को एक HTML फ़ाइल में लिखा और save किया जा सकता है
  • contenteditable attribute या `` जैसे रूपों से app की state को सीधे document में लिखा जा सकता है

पृष्ठभूमि और समस्या-बोध

  • हर साल दर्जनों websites बनाते हुए, यह ज़रूरत महसूस हुई कि webapp coding भी लेखन जितनी स्वाभाविक होनी चाहिए
  • पारंपरिक static websites में बदलाव अस्थायी होते हैं (user actions save नहीं होते)
  • web पर data persistence लागू करने के लिए database, API, templates, account system आदि जैसे बहुत अधिक काम की ज़रूरत पड़ती है
  • prototype, simple tools, personal dev logs, blogging जैसी चीज़ों के लिए जल्दी बनाना, real-time में edit करना और तुरंत share करना पारंपरिक तरीके से अक्षम है

Hyperclay का समाधान

  • एक HTML फ़ाइल में UI·state·behavior एकीकृत होते हैं
  • जैसे desktop app खोलते हैं, वैसे ही आसानी से खोलकर तुरंत edit किया जा सकता है, और परिणाम को तुरंत online reflect किया जा सकता है
  • यह persistent (shared, cloneable, persistent) digital object की अवधारणा पेश करता है
  • इसे website builder, document·diagram·presentation tools, dashboard, blog, survey·quiz creation, data visualization आदि कई तरह के tools पर लागू किया जा सकता है

पूरे विचार का सार

  • ज़्यादातर webapp पहले से ही HTML का उपयोग करते हैं
  • अगर बीच के चरण हटा दिए जाएँ, तो HTML फ़ाइल ही पूरे database/API/UI की भूमिका निभा सकती है, जिससे stack कुछ पंक्तियों तक सरल हो जाता है
  • developer जटिलता घटाकर न्यूनतम code से भी उपयोगी और maintainable app बना सकते हैं

Hyperclay के उपयोग के उदाहरण

  • blog, checklist या किसी भी app को सिर्फ एक HTML में लिखना, deploy करना, share करना और edit करना संभव है
  • `내 블로그!

` जैसे रूप में तुरंत उपयोग किया जा सकता है, और `` से हर state document में स्थायी रूप से दर्ज होती है

निष्कर्ष

  • Hyperclay web development की झंझट के बिना, किसी को भी हल्के, portable और interactive webapp बनाने, उन्हें real-time में share, save और recover करने का नया तरीका देता है
  • यह सिर्फ developers और designers के लिए नहीं, बल्कि किसी के लिए भी आसानी से इस्तेमाल की जा सकने वाली next-generation webapp platform है

संबंधित पढ़ाई

7 टिप्पणियां

 
bobross0 2025-09-03

दिलचस्प है
 
aobamisaki 2025-08-21

यह पहले के बहुत सारे web editors की कार्यप्रणाली से मिलता-जुलता लगता है, लेकिन सिर्फ़ एक ही HTML फ़ाइल से काम हो जाना दिलचस्प है। व्यक्तिगत रूप से मुझे यह भी एक तरह का Proof-of-Concept लगता है, लेकिन ईमानदारी से कहूँ तो अगर इसका सही इस्तेमाल किया जाए तो यह कहाँ तक जा सकता है, यह जानने की उत्सुकता भी है।
 
ifmkl 2025-08-20

इसका काम करने का तरीका तो बस https://hi.news.hada.io/topic?id=19611 पर पहले आए एडिटर के काम करने के तरीके जैसा ही है, है न? मैंने भी self-hosting के लिए सर्वर पर nodejs से एक simple backend जोड़कर एडिटर में लिखे गए post सेव होने दिए हैं, और index.html में सूची लाकर दिखाने वाली दो features जोड़कर इसे एक simple blog bulletin board की तरह इस्तेमाल कर रहा हूँ, देख कर तो वही एहसास हो रहा है।
 
reagea0 2025-08-19

दिलचस्प है!
सोच रहा हूँ कि इसकी security कैसी होगी।
 
m00nlygreat 2025-08-19

दिलचस्प आइडिया है। tiddlyWIki भी मज़ेदार था।
 
developerjhp 2025-08-19

दिलचस्प है..
 
GN⁺ 2025-08-19
Hacker News टिप्पणियाँ
  • Hyperclay में NodeJS server और frontend JS library के जरिए HTML page DOM को update कर सकता है, और बदले हुए .html source को replace करके page को लगातार up-to-date रख सकता है
    उदाहरण के लिए checkbox पर click करने से checked attribute जुड़ जाता है, और इस state वाले document.body.outerHTML को Hyperclay से global रूप में save किया जाता है ताकि अगली visit पर वही जैसा का तैसा दिखे
    यह automatic versioning और read/write permission management भी support करता है
    मुझे लगता है यह सबसे उपयोगी तब है जब developer और content editor की भूमिका एक ही व्यक्ति निभा रहा हो, क्योंकि कई editor एक साथ इस्तेमाल करें तो वे एक-दूसरे के बदलाव overwrite कर सकते हैं
  • अगर NodeJS server ज़रूरी है, तो फिर यह पूरी तरह self-contained HTML file मात्र से संभव नहीं लगता, इसलिए थोड़ा confusing है
  • मैंने यह बात homepage में ज्यों की त्यों जोड़ दी है
    वैसे developer अभी ऐसा तरीका implement कर रहा है जिससे वह अपने द्वारा fork किए गए सभी apps में "DOM-based schema migration" push कर सके
  • सुना है कि इसे TiddlyWiki से प्रेरणा मिली है, लेकिन क्या TiddlyWiki की मूल खासियत server की ज़रूरत न होना नहीं थी?
    असल में simple webapp बनाते-बनाते एक बिंदु पर server की ज़रूरत पड़ ही जाती है, लेकिन serverless approach और server-coupled design थोड़ा विरोधाभासी लगता है
    फिर भी इसका एक फायदा cross-device accessibility बेहतर होना है, और online editing भी आसान लगती है
    मेरे मामले में मैं text editor में फोन पर edit करता हूँ और sync app से उसे laptop पर sync कर लेता हूँ
  • काश web standards file:// protocol पर चलने वाले local file pages को बेहतर support देते
    जब भी simple HTML/Vue mini-app बनाता था, कई समस्याएँ आती थीं और हमेशा workaround ढूँढना पड़ता था
    उदाहरण के लिए local HTML file local JS module import नहीं कर सकती, या दूसरी local files (audio वगैरह) नहीं खोल सकती
    मैं समझता हूँ कि अनियंत्रित access रोकने के लिए restrictions ज़रूरी हैं, लेकिन अच्छा होता अगर किसी specific extension या directory को explicitly allow करने का तरीका होता
    हर बार web server उठाना बहुत झंझट और overkill लगता है; ideal तो यही है कि सिर्फ URL डालो और app तुरंत चल जाए
    • generator-type webapps की एक बड़ी limitation यह है कि clipboard API सिर्फ HTTPS से loaded pages पर काम करती है, इसलिए file:/// पर copy feature काम नहीं करता
      build/dependency-free पूरी offline apps में भी इस सीमा की वजह से button की जगह text area देना पड़ता है, जो काफ़ी असुविधाजनक है
      local server चलाने के लिए VS Code devcontainer इस्तेमाल करें तो server अपने-आप उठ जाता है, और कुछ commands जोड़कर local पर भी HTTPS संभव है
    • पुराने Windows में HTA तरीका था, जिसमें अलग extension वाली HTML file को browser menu के बिना file system access permissions मिलती थीं
      security के लिहाज़ से वह कमजोर था, लेकिन आज के समय में Electron-based कोई modern रूप, जो folder या sqlite db तक access दे, उपयोगी हो सकता है
      Orca जैसे wasm app builders, जो browser/DOM के बिना सिर्फ canvas देते हैं, वे भी एक विकल्प हैं
    • मैं local HTML files के risk को समझता हूँ, लेकिन अच्छा होता अगर browser में "offline-only" mode होता, जिसमें local filesystem और external pages को अलग रखकर access कराया जा सके
      यह perfect solution तो नहीं होगा, लेकिन browser को सीमित local server की तरह simple और intuitive तरीके से इस्तेमाल करना संभव होगा, जो काफ़ी उपयोगी लगता है
    • HTML को local platform के रूप में lock down करना शुरू किए जाने पर मुझे कुछ हद तक नाराज़गी थी
      फिर भी audio, JavaScript वगैरह कुछ हद तक काम करते हैं, और web server उठाना भी python/node से तुरंत हो जाता है, इसलिए यह बहुत मुश्किल नहीं है
      terminal में webserver_here command जोड़ दें या उसे हमेशा चालू रखें, तो काम चल जाता है
      बल्कि local HTML के risk बढ़ने से और सख्त boundaries की ज़रूरत महसूस होने लगी है
    • हाल में यहाँ, यहाँ भी इसी तरह की चिंता पर बात हुई थी
      अभी के लिए सिर्फ localStorage और manual export/import ही विकल्प हैं
      Hyperclay से मुझे एक idea मिला, और अब Electron Fiddle की तरह ऐसा Electron app सोच रहा हूँ जो एक बार install हो और कई mini-apps load कर सके
  • मुझे Hyperclay के technical implementation को लेकर जिज्ञासा थी
    क्या यह बस localStorage की बात है, या FileSystemAPI से file को सीधे overwrite करता है—ऐसे details ठीक से समझाए नहीं गए थे
    यह भी जानना था कि save करते समय user को "Save As" dialog के बिना बदलाव अपने-आप apply हो जाते हैं या नहीं
    • Hyperclay में दो तरीके हैं
      1. hosting: कई HTML apps अपना /save endpoint call करके HTML को save और overwrite करते हैं, साथ में backup/version control भी मिलता है
      2. local: open source Hyperclay Local(लिंक) download करके निजी रूप से चलाया जा सकता है; इसमें भी /save endpoint call करके backup संभव है, और server को customize करके खुद host भी किया जा सकता है (बस auth implement करना होगा)
    • हाँ, लेकिन अगर इसे एक कदम आगे बढ़ाएँ, तो क्या यह server-side syntax जोड़ने वाले PHP या WordPress जैसा ही नहीं हो जाता?
      system जैसे-जैसे layered होता जाता है, complexity बढ़ती है, और लगता है कि व्यावहारिक सुधार से ज़्यादा बोझ बढ़ाने वाला चक्र बन जाता है
    • "modern web development के शोर को अनदेखा करके मैं अपना मनचाहा अनुभव बनाता हूँ" वाला message, छोटे text और meme image के बीच मिला हुआ, थोड़ा अजीब लगा
      मैं जिस अनुभव की उम्मीद करता हूँ, वह है core explanation, एक flow वाली backstory, और सिर्फ ज़रूरी diagrams
    • server पर DB है, और उसी में HTML save होता है
      यानी यह JSON-based नहीं है जहाँ सिर्फ diff store किया जाए; बल्कि हर point-in-time पर पूरा HTML save करने जैसा है
    • मेरी समझ से HTML file खुद ही update होती है
      form, attributes, tags वगैरह के बदलाव सीधे HTML source में reflect होते हैं
  • यह WWW की मूल vision के और करीब लौटने जैसा लगता है
    शुरुआती web browser (NeXT के लिए Tim Berners-Lee app) में editor functionality भी शामिल थी
    शुरुआती HTML editing web से गायब होने के कारण थे
    1. HTTP PUT method नहीं था, इसलिए edited HTML को web पर save नहीं किया जा सकता था, सिर्फ local में save होता था
    2. Mosaic जैसे browsers complexity वगैरह के कारण editing features हटाकर distribute हुए, और लोकप्रियता की दिशा बदल गई
    • पढ़ने/annotate करने/लिखने योग्य web, बहुत पहले से मेरी चाही हुई web की छवि रही है
      Hyperclay की तरह हर page के लिए अलग toolkit बनाना भी अच्छा है, लेकिन सच में बेहतर तब होगा जब browser (user agent) level पर standard tools मिलें जिन्हें हर जगह इस्तेमाल किया जा सके
    • W3C ने Amaya नाम का web editor लगभग 10 साल तक maintain किया था
      वह एक अच्छा idea था, और मुझे लगता है उसने testbed की भूमिका भी अच्छी तरह निभाई
      उसके खत्म हो जाने का अफ़सोस है, लेकिन वह शुरुआती vision से साफ़ तौर पर मेल खाता था
    • TBL (Tim Berners-Lee) के शुरुआती context में local save = web save था
      university workstations में NFS जैसी network sharing के जरिए files व्यवहारिक रूप से public storage में रहती थीं और उसी machine address से access भी हो जाती थीं
      SGI workstations पर networking setup कर दें तो यह लगभग तुरंत पूरी तरह काम करता था
      साथ ही web का focus information को structure करना था; appearance से ज़्यादा content मायने रखता था
      समय के साथ WYSIWYG model, table/div के overuse जैसी चीज़ों ने appearance पर ज़्यादा ज़ोर दे दिया और मूल भावना धुंधली हो गई
      ऐसा simple design बनाना जिसे हर कोई समझ सके, वास्तव में बहुत कठिन है; अभी web काफ़ी complex structure बन चुका है जिसे कुछ विशेषज्ञों का छोटा समूह ही समझता है
      अफ़सोस इस बात का है कि HTML आज भी आसानी से लिखा जा सकता है, लेकिन modern development में वह एक complex specialist skill बन गया है
      लगता है TBL के मूल context को सच में समझने वाले अब बहुत कम बचे हैं
    • "web browser भी editor है" वाली बात पर
      आजकल browsers में developer tools के जरिए HTML/JS/CSS live edit किए जा सकते हैं, इसलिए मन में आता है कि फिर सब browsers editor ही तो हैं
      समझ नहीं आता लोग devtools इस्तेमाल नहीं करते, या फिर vanilla JS/HTML की जगह सिर्फ React या TS ही इस्तेमाल करते हैं
      Chrome, Firefox, Safari—सबमें browser-built-in IDE स्तर की capabilities हैं, जिनसे सीधे coding भी की जा सकती है
  • Hyperclay को देखकर लगा कि यह DOM (virtual DOM) का उपयोग करने वाली संरचना है
    अगर इसमें Shopify-style policies और legal notices भी कुछ जुड़ें, तो और अच्छा होगा
    मेरे HN profile को देखें तो समझ आएगा कि मुझे यह cool क्यों लगता है, लेकिन साथ ही legal पक्ष की ज़रूरत क्यों महसूस होती है
  • मैंने game save files में भी ऐसा ही तरीका आज़माया था
    पहली line <!DOCTYPE html><html><head><script>const rawData = जैसी होती थी, और दूसरी line में पूरा state रखा जाता था
    save button दबाने पर document.documentElement.outerHTML लिया जाता था और latest state से दूसरी line बदलकर download कराया जाता था
    यह server के बिना भी काम करता है
    संबंधित code
    • Chrome में नीचे दिया गया data: URL bookmark बनाकर एक tab में notepad-style editor खुला रखा जा सकता है, और tab बंद न करें तो state बनी रहती है 
      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>
    • मैंने भी इसी तरह single HTML file के रूप में चलने वाला game बनाया था
      text edit करने के बाद उसे नए local version के रूप में save किया जा सकता है
      Android + Brave browser में यह अच्छी तरह चलता है, लेकिन iOS + Safari में support नहीं है
  • TiddlyWiki भी इस क्षेत्र में 20 साल से अधिक इतिहास वाला एक tool है
    Hyperclay की संरचना multi-user/multi-tenancy और DB-based persistence पर ज़्यादा केंद्रित लगती है
    TiddlyWiki भी देखने लायक है
  • यह ऐसा project लगता है जैसे किसी ने Windows 98 HTA archive फिर से खोज लिया हो
    HTA wiki
    • HTA में original Electron जैसा एहसास था
      बस पुराने IE environment में debugging किसी दुःस्वप्न से कम नहीं थी
    • HTA अपने समय से आगे की एक अच्छी (और साथ ही भयानक) technology थी
      वह बस एक web page जैसी दिखती थी, लेकिन IE-only थी और local process चलाने की permission तक रखती थी
      persistence management उसकी समस्या थी, और समानताएँ भी बहुत सीमित हैं
    • उससे पहले शायद Outlook Web Access कुछ ऐसा ही काम करता था
      Outlook on the web
    • मेरे मन में भी बिल्कुल यही बात आई थी, इसलिए comment करने ही वाला था
  • यह idea मुझे काफ़ी अनोखा लगा, और कभी न कभी ज़रूर आज़माना चाहूँगा
    site भी देखी, कुल मिलाकर पसंद आई, लेकिन व्यावहारिक limitations कहाँ सामने आती हैं, यह जानना चाहता हूँ
    security के लिहाज़ से: अगर मैं page बदल सकता हूँ, तो क्या दूसरे लोग भी बदल सकते हैं? permissions कैसे manage होती हैं?
    code और logic बढ़ने पर maintenance मुश्किल किस बिंदु से होने लगती है? data बढ़ने पर क्या होता है?
    उदाहरण के लिए अगर मैं beer management app बनाऊँ, तो क्या दूसरे user मेरे data के बिना सिर्फ app की copy लेकर अलग से इस्तेमाल कर सकते हैं?
    • security: SquareSpace जैसे लगभग सभी website builders जैसा ही trust model है
      user अपने site को अपनी मर्ज़ी से बदल सकता है
      अगर user trust तोड़े, तो paid account access खो सकता है, और दूसरों को नुकसान होने पर ज़िम्मेदारी भी उसी की होगी
    • edit permissions: app बनाने वाला कोई भी व्यक्ति उसे edit कर सकता है
      अगर "signups" feature enable हो, तो दूसरे user भी app को आसानी से fork कर सकते हैं, और उसे original तक trace किया जा सकता है
      fork किए गए apps में updates push करने की सुविधा पर अभी काम चल रहा है
    • maintenance difficulty: NomadList के Pieter Levels भी सिर्फ एक index.php से महीने के $60k वाले app चलाते हैं, इसलिए अंततः बात इस पर निर्भर है कि code को कितना साफ़ रखा जाता है और अनावश्यक चीज़ों को कितना tolerate किया जाता है
    • दूसरे लोग app को fork करके सिर्फ अपना data save करने वाले रूप में चला सकते हैं
      आगे collaboration features जोड़ने की योजना है, लेकिन अभी यह single-user के लिए सबसे उपयुक्त है
  • यह idea सचमुच नया-सा लगता है
    Webstrates project में भी कुछ ऐसा ही experiment हो रहा है
    वहाँ DOM को persistence layer की तरह इस्तेमाल करके छोटे समूहों के लिए collaborative software बनाया जा रहा है, जबकि Hyperclay में यही mechanism सीधे पारंपरिक web pages पर लागू होता है
    हाल में MyWebstrates जैसे local-first approaches पर भी काम हो रहा है
    सोच रहा हूँ कि क्या Hyperclay भी Webworker का उपयोग करके offline editing support दे सकता है
    • Clemens, Webstrates से गहराई से प्रभावित व्यक्ति है
      पिछले साल Hyperclay का विचार करते समय उसने इसके बारे में पहली बार जाना था
      वह Hyperclay का local-first version सच में बनाना चाहता है, और मानता है कि offline editing personal software का एक मुख्य स्तंभ है
      वह पूछ रहा है कि क्या इस पर विचार-विमर्श के लिए video call की जा सकती है