HTML Viewer और ऑनलाइन HTML एडिटर

HTML पेस्ट करें, फ़ाइल खोलें या उदाहरण को एडिट करें। टाइप करते ही प्रीव्यू अपडेट होता है और sandbox में चलता है, इसलिए कोड इस पेज को छू नहीं सकता।

HTML viewer कैसे इस्तेमाल करें

  1. अपना कोड एडिटर में पेस्ट करें, या अपने डिवाइस से .html फ़ाइल लोड करने के लिए फ़ाइल खोलें दबाएं।
  2. दाईं ओर प्रीव्यू देखें। हर चौड़ाई पर लेआउट चेक करने के लिए मोबाइल (390px), टैबलेट (768px) और डेस्कटॉप के बीच स्विच करें।
  3. जब तक सही न लगे, एडिट करते रहें और नतीजा रखने के लिए .html डाउनलोड करें दबाएं।

बड़े पेज पर या ऐसी स्क्रिप्ट पर काम करते समय जो सिर्फ़ एक बार चलनी चाहिए, टाइप करते ही अपडेट करें बंद कर दें। तब प्रीव्यू सिर्फ़ चलाएं दबाने पर रिफ़्रेश होगा।

लोग इसे किस काम में लेते हैं

  • प्रोजेक्ट में पेस्ट करने से पहले स्निपेट चेक करना। chatbot, किसी फ़ोरम के जवाब या किसी साथी से मिला कोड पहले यहां रेंडर होता है, आपकी repository को छुए बिना।
  • फ़ोन पर HTML अटैचमेंट पढ़ना। ईमेल ऐप अक्सर .html फ़ाइलों को कच्चे टेक्स्ट की तरह दिखाते हैं। फ़ाइल यहां खोलें और वह पेज की तरह रेंडर होगी।
  • Responsive लेआउट टेस्ट करना। मोबाइल और टैबलेट बटन प्रीव्यू को असली डिवाइस की चौड़ाई पर ले आते हैं, इसलिए media queries और Tailwind breakpoints वैसे ही बदलते हैं जैसे डिवाइस पर बदलते।

sandbox क्या करने देता है

प्रीव्यू एक iframe है जिसमें sandbox="allow-scripts" है और इसके अलावा कुछ नहीं। आपका HTML, CSS और JavaScript चलता है, और Google Fonts या Tailwind CDN script जैसे बाहरी resources सामान्य रूप से लोड होते हैं। frame को एक opaque origin मिलता है, इसलिए वह img2html.com की कुकीज़ या storage नहीं पढ़ सकता, फ़ॉर्म सबमिट नहीं कर सकता, popup नहीं खोल सकता और इस टैब को कहीं और नहीं ले जा सकता। console.log का आउटपुट आपके ब्राउज़र के developer tools में जाता है।

HTML viewer से जुड़े सवाल

क्या मेरा HTML कहीं अपलोड होता है?

नहीं। कोड इसी ब्राउज़र टैब में रहता है। प्रीव्यू एक लोकल string (iframe srcdoc) से बनता है, इसलिए IMG2HTML या किसी और को कुछ नहीं भेजा जाता।

क्या प्रीव्यू में JavaScript चलता है?

हां, एक sandboxed iframe के अंदर, जिसका अपना अलग और opaque origin है। स्क्रिप्ट प्रीव्यू को बदल सकती हैं, लेकिन इस पेज, इसकी कुकीज़ या इसके storage को नहीं पढ़ सकतीं। फ़ॉर्म, popup और top-level navigation ब्लॉक हैं।

मेरी इमेज या CSS फ़ाइलें क्यों नहीं दिख रहीं?

जब आप कोड पेस्ट करते हैं या एक अकेली फ़ाइल खोलते हैं, तो images/logo.png या style.css जैसे relative path किसी जगह से resolve नहीं हो पाते। absolute URL (https://...) इस्तेमाल करें या CSS को <style> टैग के अंदर रखें।

क्या कंप्यूटर या फ़ोन से .html फ़ाइल खोली जा सकती है?

हां। फ़ाइल खोलें बटन दबाएं, .html या .htm फ़ाइल चुनें और वह एडिटर और प्रीव्यू में लोड हो जाएगी। फ़ोन पर HTML ईमेल अटैचमेंट पढ़ने का यह सबसे तेज़ तरीका भी है।

अपने बदलाव सेव कैसे करें?

.html डाउनलोड करें बटन मौजूदा कोड को फ़ाइल के रूप में सेव करता है। एक विज़िट से दूसरी विज़िट तक कुछ भी स्टोर नहीं होता, इसलिए टैब बंद करने से पहले डाउनलोड कर लें।