HTML, CSS और JavaScript लिखें या पेस्ट करें और उसे सुरक्षित, सैंडबॉक्स प्रीव्यू में तुरंत रेंडर होते देखें, बिल्ट-इन कंसोल के साथ। मुफ़्त, आपके ब्राउज़र में।
टूल के बटन और संदेश अभी अंग्रेज़ी में हैं। टूल का काम करने का तरीका अंग्रेज़ी पेज जैसा ही है।
इस टूल के बारे में
लाइव HTML व्यूअर इनलाइन CSS और JavaScript वाले किसी भी HTML को टाइप करते-करते लाइव प्रीव्यू में बदल देता है। किसी ट्यूटोरियल का स्निपेट, ईमेल टेम्पलेट या कोई कंपोनेंट जिसे आप बना रहे हैं, पेस्ट करें, और टाइप करना रुकने के एक पल बाद प्रीव्यू अपडेट हो जाता है। बिल्ट-इन कंसोल आपकी स्क्रिप्ट से console.log, info, चेतावनियाँ और एरर पकड़ता है, जिनमें पकड़े न गए (uncaught) एरर उनकी लाइन और कॉलम के साथ शामिल हैं, ताकि आप डेवलपर टूल खोले बिना डीबग कर सकें। प्रीव्यू को फ़ुल स्क्रीन करें, या पूरी विंडो के साइज़ पर टेस्ट करने के लिए नए टैब में खोलें। प्रीव्यू अपने अलग origin वाले सैंडबॉक्स फ़्रेम में चलता है: स्क्रिप्ट चल सकती हैं, alert दिखा सकती हैं और pop-up खोल सकती हैं, लेकिन इस साइट की कुकीज़ या स्टोरेज नहीं पढ़ सकतीं, जो तब मायने रखता है जब आप ऐसी जगह से कोड पेस्ट करते हैं जिस पर आपको पूरा भरोसा नहीं है। एक क्लिक में अपना कोड कॉपी करें या एडिटर साफ़ करें। कुछ भी अपलोड नहीं होता; कोड आपके ब्राउज़र में ही रहता है।
एडिटर में इनलाइन CSS और JavaScript के साथ HTML जोड़ें।
टाइप करते-करते प्रीव्यू अपडेट होता है।
लॉग, चेतावनियाँ और एरर देखने के लिए कंसोल खोलें।
फ़ुल स्क्रीन करें या प्रीव्यू नए टैब में खोलें।
टाइप करते-करते बदलाव देखें, बिना सेव या रिफ़्रेश के।
लाइन नंबर के साथ लॉग, चेतावनियाँ और एरर, बिना डेवलपर टूल के।
कोड एक अलग फ़्रेम में चलता है जो इस साइट का डेटा नहीं पढ़ सकता।
लेआउट को असली विंडो साइज़ पर टेस्ट करें।
बिना प्रोजेक्ट के झटपट प्रयोग
किसी कोर्स के उदाहरण आज़माएँ और देखें कि हर लाइन क्या करती है।
उदाहरणflexbox की कोई प्रॉपर्टी बदलें और लेआउट को खिसकते देखें।
HTML ईमेल को कैंपेन टूल में पेस्ट करने से पहले उसका प्रीव्यू देखें।
उदाहरणजाँचें कि न्यूज़लेटर का हेडर सही रेंडर होता है।
बटन, कार्ड या फ़ॉर्म का प्रोटोटाइप झटपट बनाएँ।
उदाहरणप्राइसिंग कार्ड बनाएँ और hover स्टाइल टेस्ट करें।
किसी बड़े पेज से बग को अलग करके देखें।
उदाहरणटूटा हुआ मेन्यू पेस्ट करें और कंसोल के एरर पढ़ें।
एम्बेड कोड को साइट पर जोड़ने से पहले टेस्ट करें।
उदाहरणजाँचें कि फ़ॉर्म एम्बेड उम्मीद के मुताबिक़ दिखता है।
बिना सेटअप के कोई कॉन्सेप्ट लाइव दिखाएँ।
उदाहरणक्लिक करने लायक़ डेमो से event handler समझाएँ।
झटपट टेस्ट से ज़्यादा पाएँ
बिल्ट-इन कंसोल में वैल्यू लॉग करें और देखें कि आपकी स्क्रिप्ट क्या कर रही है।
यहाँ कोड कुकीज़ या स्टोरेज नहीं पढ़ सकता, इसलिए लॉगिन पर निर्भर कोड काम नहीं करेगा।
रिस्पॉन्सिव लेआउट जाँचने के लिए नए टैब में खोलें और विंडो का साइज़ बदलें।
आपका कोड सेव नहीं होता; टैब बंद करने से पहले उसे कॉपी कर लें।
snippets का तुरंत प्रीव्यू देखें, console से उन्हें डीबग करें, responsive लेआउट टेस्ट करें, और समझें कि इंटरनेट से कोड पेस्ट करते समय sandboxed प्रीव्यू क्यों मायने रखता है।
लेख पढ़ें
साफ़ लेखन क्यों जीतता है, Flesch स्कोर असल में क्या मापते हैं, और किसी भी टेक्स्ट को उसका मतलब और अंदाज़ बनाए रखते हुए पढ़ने में आसान बनाने की व्यावहारिक तकनीकें।
लेख पढ़ें
लाइन ड्रॉइंग, घूमते लोडर, hover इफ़ेक्ट और एक-एक करके दिखने वाले हिस्से: CSS से SVG एनिमेशन कैसे काम करता है, वे उलझनें जिनमें सब फँसते हैं, और इसे सबके लिए सुलभ कैसे रखें।
लेख पढ़ें