OverType – सरल text area-आधारित Markdown WYSIWYG एडिटर

• OverType एक ओपन सोर्स WYSIWYG एडिटर है, जिसे Markdown दस्तावेज़ों को सीधे विज़ुअली एडिट करने के लिए डिज़ाइन किया गया है
• इस एडिटर की सबसे बड़ी खासियत यह है कि इसे केवल HTML textarea का उपयोग करके बनाया गया है, इसलिए यह हल्का है और तेज़ लोडिंग स्पीड देता है
• इंस्टॉलेशन या अतिरिक्त बाहरी लाइब्रेरी की आवश्यकता नहीं है, इसलिए इसे सरल वातावरण में भी तुरंत इस्तेमाल किया जा सकता है
• अन्य Markdown एडिटरों की तुलना में रनटाइम वातावरण की सीमाएँ कम हैं, और इसका कोड पढ़ने में आसान और मेंटेन करना सरल है
• रीयल-टाइम प्रीव्यू और यूज़र-केंद्रित सहज UI के साथ शुरुआती डेवलपर भी आसानी से Markdown दस्तावेज़ लिख और संपादित कर सकते हैं

मुख्य फीचर्स और फायदे

• हल्का: अनावश्यक कोड या डिपेंडेंसी नहीं, इसलिए ब्राउज़र में सीधे चलाया जा सकता है
• सरल संरचना: single textarea-आधारित डिज़ाइन से डिबगिंग और विस्तार आसान है
• WYSIWYG सपोर्ट: यूज़र जैसे ही Markdown सिंटैक्स दर्ज करता है, तुरंत विज़ुअल प्रीव्यू मिलता है
• एक्सेसिबिलिटी: जटिल इंस्टॉलेशन प्रक्रिया के बिना कोई भी इसे इस्तेमाल कर सकता है
• यूज़र-फ्रेंडली: प्रोजेक्ट संरचना सहज है, इसलिए इसे जल्दी सीखना और अपनाना आसान है

तुलना में बढ़त

• सामान्य WYSIWYG एडिटरों की तुलना में इसका आकार बहुत छोटा है
• बड़े framework-आधारित एडिटरों की तुलना में मेंटेनेंस और कस्टमाइज़ेशन आसान है
• तेज़ लोडिंग स्पीड और कम मेमोरी उपयोग के कारण यह लो-स्पेक वातावरण में भी सहजता से चल सकता है

उपयोग के तरीके

• एक सरल नोट्स के लिए Markdown एडिटर
• जिन सेवाओं को embedded document editor चाहिए, उनमें इसे आसानी से embed किया जा सकता है
• शैक्षणिक उपयोग और प्रोटोटाइप डेवलपमेंट जैसे वातावरण के लिए उपयुक्त

• डेमो आज़माएँ - https://overtype.dev/demo

[m00nlygreat]

यह बहुत पसंद आया!

[GN⁺]

Hacker News की राय

• वाकई बहुत शानदार, अगर यह drop-in तरीके से सब कुछ तुरंत काम कर दे तो बेहद उपयोगी होगा। थोड़ा नुक्ताचीनी करूँ तो इसे Markdown को "render" करना कहना शायद ठीक नहीं, यह असल में "syntax highlighting" के ज़्यादा करीब है। एक और दिलचस्प तरीका CSS Custom Highlight API का उपयोग हो सकता है, तब preview div की ज़रूरत नहीं पड़ेगी, और headers वगैरह पर non-monospaced fonts या अलग-अलग text sizes भी लागू किए जा सकते हैं। CSS Custom Highlight API के बारे में विस्तार से
  • यह जानने की जिज्ञासा है कि क्या textarea की सामग्री पर भी highlight लागू किया जा सकता है
  • animation के साथ बढ़ाए गए demo को देखें तो साफ़ दिखता है कि यह bold text या dots में बदले गए symbols जैसी चीज़ों को सामान्य text से अलग तरीके से format करता है
• "parent page से inherited CSS की वजह से margin, padding, line-height वगैरह बिगड़ जाने की अफरातफरी थी" — इस बात से पूरी तरह सहमत हूँ। ऐसे मामलों में web components और उनका shadow DOM बिल्कुल सही समाधान हैं। अगर div.editor की जगह यह component textarea को wrap करे, तो मौजूदा textarea अनुभव को धीरे-धीरे upgrade किया जा सकता है
• यह सच में अच्छा लग रहा है। मैंने पहले इस तरह के approach पर कुछ links इकट्ठा किए थे, साझा कर रहा हूँ
  • CSS Tricks का editor example
  • code-input library
  • लगता है grugnotes.com भी Markdown को इसी तरह संभालता है
• overtype.dev साइट देखते-देखते एक बहुत शानदार rabbit hole मिल गया। hyperclay.com नाम का single HTML app सुझाता हूँ, इसे इस्तेमाल करके बहुत मज़ा आया
  • मुझे लगता है यह approach उस दिशा के बहुत करीब है जिसकी WWW ने शुरुआत में कल्पना की थी। सबसे पहला web browser वास्तव में editor भी था। Tim Berners-Lee ने NeXT पर जो app बनाया था, वह OS के built-in rich text class (TextView) के wrapper जैसा था, जो बाद में NSTextView बना और आज भी Mac के TextEdit app में इस्तेमाल होता है। लेकिन editing दो कारणों से गायब हो गई: पहला, HTTP PUT नहीं था, इसलिए बदले हुए HTML को केवल local में ही save किया जा सकता था; दूसरा, Mosaic ने multi-platform browser तो बनाया, लेकिन editing support जोड़ना बहुत जटिल था, इसलिए उसे छोड़ दिया गया। नतीजे में ज़्यादातर users editing के बिना रहने के आदी हो गए
  • मैं अक्सर ऐसी प्रतिक्रिया नहीं देता, लेकिन इस बार सच में दंग रह गया। समझ नहीं आता कि यह तरीका अभी तक इतना विस्फोटक रूप से लोकप्रिय क्यों नहीं हुआ। आज के vibe coding वाले दौर में यह काफ़ी ज़्यादा efficient और बेहतर लगता है
  • यह 2000 के दशक के मध्य के web development में किए गए शानदार प्रयोगों की याद दिलाता है। मेरा मानना है कि ऐसे projects standards और user expectations दोनों को एक स्तर ऊपर ले जाते हैं
• यह काफ़ी polished लग रहा है। जिज्ञासा है कि क्या IDE में Cursor की तरह, मौजूदा cursor के आगे silver रंग में autocomplete text दिखाकर TAB दबाने पर उसे .value में commit करने वाला feature भी बनाया जा सकता है
• यह सच में बढ़िया है। शायद इसे "transparent syntax highlighter" कहना ज़्यादा सही होगा। मेरे बनाए adventure demo में भी इसी तरह छिपा हुआ <input text> इस्तेमाल किया था, ताकि paste और selection जैसी बुनियादी सुविधाएँ बनी रहें और styling भी पूरी तरह integrated रहे। contentEditable की तुलना में साधारण input boxes बहुत सरल हैं, इसलिए ज़्यादा आकर्षक लगते हैं। अगर इसमें सचमुच Markdown render किया जाए, textarea को पूरी तरह छिपाकर केवल focus बनाए रखा जाए, और rendered markup के selection events को textarea पर ज्यों का त्यों emulate किया जाए, तो text box की reliability और एक सुंदर editor — दोनों मिल सकते हैं
  • एक मज़ेदार तथ्य: GitHub के search box में syntax highlighting इसी तरीके से जोड़ी गई थी। पहले Shortwave (email client) में भी यही तरीका इस्तेमाल हुआ था, यानी transparent input के ऊपर view रखना। और इस blog की मदद से search UX को एक स्तर ऊपर ले जाया जा सका
    Delightful Search: More Than Meets the Eye (Superhuman blog)
• बहुत शानदार। इसकी यही सादगी सबसे अच्छी लगती है। मौजूदा textarea की तुलना में इसमें कोई नुकसान नहीं दिखता, बल्कि फायदे ज़्यादा हैं। लगता है इसने textarea को एक बिल्कुल नए स्तर पर पहुँचा दिया है। मैंने पहले contextarea.com नाम का एक मिलता-जुलता project बनाया था, और लगता है कि उसमें overtype को जोड़ा जा सकता है
  • मुझे लगता है कि केवल monospaced font तक सीमित होना एक कमी है। अगर user developer या programmer न हो तो product में इसका उपयोग कम हो सकता है। फिर भी project शानदार है; बस इतना कह रहा हूँ कि इसकी एक स्पष्ट सीमा है
• जिज्ञासा है कि क्या इसे web component में wrap करके ऐसा बनाया जा सकता है कि div+constructor call के बिना सीधे इस्तेमाल हो सके
• अगर यह WYSIWYG editor है, तो इसमें image preview होना चाहिए, लेकिन लगता है कि यह वास्तव में केवल text area की syntax highlighting देता है। project अच्छा है, लेकिन marketing copy थोड़ी भ्रामक लगती है
  • यह terminology के गलत इस्तेमाल का उदाहरण है। असली WYSIWYG editor formatting markup को दिखाता ही नहीं
  • अगर आप text टाइप करें, highlight करने वाला हिस्सा चुनें और "B" button दबाएँ, तो वह bold हो जाए — image preview को छोड़ दें तो उसे WYSIWYG कहा जा सकता है
  • मुझे image feature नहीं मिला, क्या संभव है कि मैंने कुछ मिस कर दिया हो
• 912 bytes में चलने वाला spell demo साझा कर रहा हूँ
  • यह तो कमाल है, सच में दंग रह गया। Markdown से बिल्कुल सटीक मेल नहीं खाता, लेकिन overtype की तुलना में बहुत ज़्यादा features देने वाला WYSIWYG लगता है (हालाँकि overtype भी सच में अच्छा project है)। सिर्फ 912 bytes में इतना कुछ हो सकता है, यह चौंकाने वाला है। लगता है 14kb से कम में बहुत सरल blog post बनाया जा सकता है, उसके अंदर comments feature भी दिया जा सकता है, और फिर भी वह बेहद तेज़ी से load होगा। जितना कहूँ उतना कम है