الصق شيفرة HTML وشاهدها تُعرَض في عارض HTML — أحجام أجهزة مختلفة، ووحدة تحكّم مباشرة، وتصدير إلى PNG وPDF، وروابط تحمل المستند داخل العنوان نفسه. هذا هو الموقع كلّه.

ما هو عارض HTML؟

عارض HTML أداة تتلقّى وسوم HTML الخام وتعرضها صفحةَ ويب حيّة، دون أن تضطرّ إلى حفظ الوسوم في ملف وفتحه في المتصفّح. وأشهر صورها مربّع نصّي للّصق والعرض: تلصق الشيفرة في جهة، فتظهر النتيجة في الجهة المقابلة، وكل تعديل يحدّث المعاينة أثناء الكتابة. وتُستخدم عادةً لمراجعة شيفرة HTML التي يولّدها الذكاء الاصطناعي، وتصحيح قوالب البريد الإلكتروني، والتأكّد من مُخرَجات مكوّنات React، ومشاركة التصاميم عبر رابط.

كيف يعمل عارض HTML

تعمل عوارض HTML الحديثة داخل المتصفّح بالكامل. تُكتَب الشيفرة الملصقة داخل عنصر <iframe srcDoc="..."> في الصفحة، فيعرضها المتصفّح كأنّها مستند منفصل حُمِّل من أصل منفصل. وتحدّ خاصية sandbox في الإطار ممّا تستطيع تلك الشيفرة فعله: تُسمَح النصوص البرمجية عادةً كي تعمل المكوّنات التفاعلية، لكن الإطار لا يستطيع تصفّح الصفحة الأمّ ولا قراءة ملفات تعريف الارتباط الخاصة بها.

ولأنّ العرض يجري في جهة العميل، لا تحتاج الشيفرة الأصلية إلى مغادرة متصفّح المستخدم أبداً. فلا رفع للملفات، ولا محلِّل على الخادم، ولا خطر أن يقرأ مشغّل الموقع شيفرتك. وفي المقابل، لا يستطيع عارض يعمل في المتصفّح عرض أي شيء يحتاج إلى موارد من خادم — نقاط الوصول المحلية لديك، مثلاً، غير متاحة من داخل الإطار — كما يتوقّف أسلوب المشاركة عبر جزء العنوان عند بضعة كيلوبايتات، وبعدها يصبح نقل الشيفرة إلى ملف خياراً أفضل.

عارض HTML مقابل CodePen وJSFiddle وملفك المحلّي

لكل أداة نطاق تتفوّق فيه. CodePen وJSFiddle هما الخيار الصحيح حين تحتاج إلى مشاركة عرض كامل ودائم عبر جلسات متعدّدة: تحفظ مقطعك على خادمها، وتمنحه عنواناً ثابتاً، وتوفّر ميزات تعاون في الباقات المدفوعة. وهي تتوقّع أن تسجّل الدخول وتربط المقطع بحسابك وتتعامل معه كملف مشروع صغير. والثمن أنّ شيفرتك تعيش على بنية تحتية تخصّ غيرك، وأنّ المحرّر يضيف واجهة حوله (مجموعات وإعدادات وتعليقات)، وأنّ الصفحة أثقل من مجرّد معاينة.

فتح ملف HTML مباشرة في المتصفّح هو الخيار الأخفّ لعرض شيء مرّة واحدة، دون أي موقع خارجي على الإطلاق. والثمن أنّ عليك حفظ الملف أوّلاً، وأنّ متصفّحك قد يعامله كأصل مختلف عن localhost، وأنّك لا تستطيع مشاركته إلّا بإرسال الملف أو استضافته في مكان ما.

عارض HTML للّصق والعرض يقع بين الاثنين. لا حفظ ولا حساب ولا ملف مشروع — تلصق، فترى النتيجة، وتشاركها عبر جزء من العنوان إن أردت. وهو الأداة المناسبة حين تكون الشيفرة عابرة: مقطع من ذكاء اصطناعي، أو معاينة قالب بريد، أو فحص سريع لمكوّن. أمّا حين يبدأ المقطع يشبه مشروعاً حقيقياً — إدارة إصدارات ومتعاونين واستمرارية — فقد حان وقت الانتقال إلى CodePen أو ملف محلّي.

لماذا أداة واحدة فقط

كانت أربعاً فيما مضى. إلى جانب العارض كان هناك محرّر Markdown وعارض JSON وصفحة مستقلّة لتحويل HTML إلى PDF؛ ولم يأتِ أحد باحثاً عنها، فأُوقفت جميعاً وأُدمج تصدير PDF داخل العارض نفسه. وما بقي هو ما جاء الناس من أجله فعلاً. وهو يستحقّ مكانه: ما لا يمكن شرحه في جملة واحدة لا يُنشَر.

كيف تعمل

ثلاثة أمور تهمّ: السرعة والأمان والعروض الواقعية. السرعة تعني أن تتحدّث المعاينة أثناء الكتابة لا عند الضغط على زر. والأمان يعني أنّ كل ما تلصقه يعمل داخل إطار iframe معزول، فلا يستطيع قراءة ملفات تعريف الارتباط ولا تحويل تبويبك. والعروض الواقعية تعني أن تنتقل بين سطح المكتب واللوحي والهاتف بنقرة واحدة بدل تغيير حجم نافذة المتصفّح.

المحرّر نسخة كاملة من CodeMirror مع تلوين الصياغة ومطابقة الأقواس وأرقام الأسطر واختصارات لوحة المفاتيح. والمعاينة إطار iframe معزول مع السماح بالنصوص البرمجية، كي تتصرّف المكوّنات التفاعلية كما ينبغي فعلاً. والفاصل بين المحرّر والمعاينة قابل للسحب ويتذكّر موضعه بين الزيارات. وتُحفَظ المسوّدات تلقائياً في localStorage، ويرمّز زر المشاركة شيفرتك بترميز base64 داخل جزء من العنوان (#s=…) فيحمل الرابط نفسه المحتوى — ولا شيء يمرّ عبر خادم.

ما لن يتغيّر

مجانية. بلا تسجيل ولا حساب ولا جدار بريد إلكتروني.
تعمل داخل متصفّحك. شيفرتك لا تغادر جهازك ما لم تشارك رابطاً.
لا يُحفَظ شيء على جهازك ما لم توافق. وإن رفضت فنحن نحتسب الزيارة مع ذلك، لكن بشكل مجهول وبلا ملف تعريف ارتباط.
بلا تضخّم في الميزات. ما لا يمكن شرحه في جملة واحدة لا يُنشَر.

بناها ويتعهّدها Axel، مطوّر مستقلّ في النرويج.