HTML व्यूअर

HTML लिखें या पेस्ट करें और ब्राउज़र में तुरंत रेंडर परिणाम देखें।

लेआउट:स्क्रिप्ट सैंडबॉक्स में हैं और नहीं चल सकतीं।

HTML कोड

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

पूर्वावलोकन

इस टूल के बारे में

HTML व्यूअर आपको HTML कोड लिखने या पेस्ट करने और ब्राउज़र में तुरंत रेंडर देखने की सुविधा देता है। प्रीव्यू स्क्रिप्ट-अक्षम सैंडबॉक्स iframe में दिखाई देता है, इसलिए अविश्वसनीय स्रोतों से HTML को सुरक्षित रूप से प्रीव्यू किया जा सकता है।

यह टूल पूर्ण HTML दस्तावेज़ (head, इनलाइन CSS और style ब्लॉक सहित) और HTML फ्रैग्मेंट दोनों का समर्थन करता है। सभी प्रोसेसिंग आपके ब्राउज़र में स्थानीय रूप से होती है।

कैसे उपयोग करें

बाईं ओर कोड एडिटर में HTML टाइप या पेस्ट करें।
प्रीव्यू अपडेट करने के लिए रेंडर क्लिक करें।
बड़े प्रीव्यू क्षेत्र के लिए स्टैक्ड लेआउट पर स्विच करें।
एडिटर में लाइनें इंडेंट करने के लिए Tab कुंजी का उपयोग करें।

उपयोग के मामले

फ्रंटएंड डेवलपर HTML स्निपेट तेज़ी से टेस्ट करें। ईमेल डेवलपर HTML ईमेल टेम्प्लेट प्रीव्यू करें। HTML सीखने वाले छात्र टैग के साथ प्रयोग करें। कोड समीक्षक रेंडर आउटपुट विज़ुअली सत्यापित करें।

अक्सर पूछे जाने वाले प्रश्न

स्क्रिप्ट क्यों अक्षम हैं? — प्रीव्यू iframe sandbox="allow-same-origin" उपयोग करता है जो JavaScript निष्पादन को ब्लॉक करता है — अज्ञात स्रोतों से HTML सुरक्षित रूप से प्रीव्यू किया जा सकता है।
क्या मैं CSS प्रीव्यू कर सकता हूं? — हाँ। HTML में style टैग शामिल करें या इनलाइन स्टाइल का उपयोग करें। अन्य ऑरिजिन की बाहरी स्टाइलशीट CSP द्वारा ब्लॉक हो सकती हैं।
क्या यह पूर्ण HTML दस्तावेज़ का समर्थन करता है? — हाँ। आप DOCTYPE, head और body टैग सहित पूर्ण HTML दस्तावेज़ पेस्ट कर सकते हैं।