HTML Viewer & Live Preview

בדיקת HTML חיה בדפדפן, כולל Outline אוטומטי של כותרות, מטא-תגים והדבקה מהירה.

מושלם למקרי שימוש: QA, תיקוני RTL, בדיקות מטא לפני העלאה.

הדביקו/כתבו HTML

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="utf-8">
    <title>Hero Demo | ToolsHub</title>
    <meta name="description" content="דוגמת HTML עבור כלי התצוגה של ToolsHub.">
    <style>
        body {
            font-family: 'Assistant', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            background: radial-gradient(circle at 20% 20%, #f8fafc, #eef2ff);
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
        }
        .hero-demo {
            background: white;
            border-radius: 24px;
            padding: 3rem;
            box-shadow: 0 35px 60px rgba(15, 23, 42, 0.18);
            text-align: center;
            max-width: 640px;
        }
        .hero-demo h1 {
            margin-bottom: 0.5rem;
        }
        .hero-demo p {
            color: #475569;
            margin-bottom: 1.5rem;
        }
        .hero-demo button {
            border: none;
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            color: white;
            padding: 0.9rem 2rem;
            border-radius: 999px;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: 0 15px 30px rgba(124, 58, 237, 0.45);
        }
    </style>
</head>
<body>
    <section class="hero-demo">
        <h1>ToolsHub HTML Viewer</h1>
        <p>קבלו תצוגה מיידית של HTML, כולל טיפוגרפיה, כפתורים ורקע.</p>
        <button>CTA לדוגמה</button>
    </section>
</body>
</html>

תצוגה חיה

Outline & מטא

כותרת: ממתין לניתוח…

תיאור: —

מילות מפתח: —

כותרות: 0

ספירת מילים: 0

ממתין לקוד…

תצוגה חיה

ה-iframe מוגן בסנדבוקס. אפשר לפתוח תצוגה בחלון מלא דרך מקש ימני → Open in new tab.

קוד פעיל

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="utf-8">
    <title>Hero Demo | ToolsHub</title>
    <meta name="description" content="דוגמת HTML עבור כלי התצוגה של ToolsHub.">
    <style>
        body {
            font-family: 'Assistant', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            background: radial-gradient(circle at 20% 20%, #f8fafc, #eef2ff);
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
        }
        .hero-demo {
            background: white;
            border-radius: 24px;
            padding: 3rem;
            box-shadow: 0 35px 60px rgba(15, 23, 42, 0.18);
            text-align: center;
            max-width: 640px;
        }
        .hero-demo h1 {
            margin-bottom: 0.5rem;
        }
        .hero-demo p {
            color: #475569;
            margin-bottom: 1.5rem;
        }
        .hero-demo button {
            border: none;
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            color: white;
            padding: 0.9rem 2rem;
            border-radius: 999px;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: 0 15px 30px rgba(124, 58, 237, 0.45);
        }
    </style>
</head>
<body>
    <section class="hero-demo">
        <h1>ToolsHub HTML Viewer</h1>
        <p>קבלו תצוגה מיידית של HTML, כולל טיפוגרפיה, כפתורים ורקע.</p>
        <button>CTA לדוגמה</button>
    </section>
</body>
</html>

מה מקבלים ב-HTML Viewer?

הכלי נבנה במיוחד למקדמי אתרים ומפתחים שרוצים לראות איך ה-HTML שלהם נראה לפני הפריסה. תצוגת הלייב עוזרת לאתר בעיות RTL, תגיות שבורות וסקריפטים שלא נטענים.

Use cases מובילים

בדיקת דפי נחיתה במצב טקסט בלבד (AMP/MJML).
סיוע בכתיבת תוכן SEO: חיווי כותרות H1-H3 ומטא-תיאור.
QA למפתחים – בדקו snippets לפני הדבקה ל-CMS.

הוספנו ניתוח מטא מובנה + ספירת מילים כדי ש-Google Ads או AdSense יאשרו את הדף גם לפני שהוא משודרג לשרת.

שאלות נפוצות על HTML Viewer

איך להשתמש ב-HTML Viewer של ToolsHub?

הדביקו קוד HTML, הפעילו את תצוגת הלייב וקבלו מיד פריוויו לצד Outline של כל הכותרות והמטא-דאטה כדי לאתר טעויות.

האם הכלי בטוח לקוד רגיש?

הקוד לא נשמר בשרת – התצוגה מתבצעת בדפדפן בתוך iframe עם sandbox. ניתן גם למחוק הכל בלחיצה על איפוס.

האם אפשר להריץ CSS ו-JavaScript?

כן. כל עוד הקוד מוטמע inline, iframe הסנדבוקסי יריץ אותו. מומלץ להימנע מטעינת משאבים חיצוניים לא מוכרים.