محرر HTML أونلاين مع معاينة مباشرة — Numio

اكتب HTML وCSS وJavaScript وشاهد المعاينة تتحدّث مباشرة أثناء الكتابة، مع عرض رسائل وحدة التحكم أسفلها. مجاني في متصفحك.

يعمل في المتصفح · دون تسجيل

الكود (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counter</title>
  <style>
    body { font-family: system-ui, sans-serif; display: grid; place-items: center; min-height: 90vh; margin: 0; background: #f5f7fb; }
    .card { padding: 24px 32px; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); text-align: center; }
    button { font: inherit; padding: 10px 20px; border: 0; border-radius: 999px; background: #2563eb; color: #fff; cursor: pointer; }
    button:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Hello, HTML!</h1>
    <p>Clicked <strong id="count">0</strong> times</p>
    <button id="button" type="button">Click me</button>
  </div>
  <script>
    let count = 0;
    document.getElementById("button").addEventListener("click", () => {
      count += 1;
      document.getElementById("count").textContent = count;
      console.log("Button clicked", count);
    });
    console.log("Page ready");
  </script>
</body>
</html>

Ctrl/⌘ + Enter للتشغيل

المعاينة

تحديث المعاينة تلقائيًا

وحدة التحكم

لا توجد مخرجات بعد. اضغط «تشغيل» لعرض النتيجة هنا.

يعمل الكود محليًا في متصفحك ولا يُرفع إلى أي خادم.

طريقة الاستخدام

اكتب HTML، وضع CSS داخل <style> وJavaScript داخل <script>.
تتحدّث المعاينة تلقائيًا أثناء الكتابة.
راجع رسائل وحدة التحكم أسفل المعاينة.

مثال

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; padding: 16px; }
  button { padding: 8px 16px; }
</style>
</head>
<body>
  <h1>مرحبًا!</h1>
  <button id="btn">انقر هنا</button>
  <p id="out"></p>
  <script>
    let n = 0;
    document.getElementById("btn").onclick = () => {
      n++;
      document.getElementById("out").textContent = "عدد النقرات: " + n;
      console.log("click", n);
    };
  </script>
</body>
</html>

التفاصيل والقيود

تعمل المعاينة داخل إطار معزول (sandbox)، ولا تستطيع نصوصها البرمجية الوصول إلى هذه الصفحة أو ملفات تعريف الارتباط الخاصة بها.

تفضّل التحديث يدويًا؟ أوقف التحديث التلقائي واضغط «تشغيل».

FAQ

هل يمكنني استخدام CSS وJavaScript؟

نعم. ضع CSS في وسم <style> وJavaScript في وسم <script> داخل المستند نفسه.

أين تظهر مخرجات console.log؟

تظهر رسائل وحدة التحكم الصادرة عن المعاينة أسفلها مباشرة.

هل يُرفع الكود؟

لا. تُنشأ المعاينة في متصفحك ولا يُرسل أي شيء إلى خادم.

مراجع التنسيقات

تاريخ تحديث صفحة الأداة: 2026-10-22