مُجمِّع HTML CSS JS

اكتب وشغّل واختبر HTML وCSS وJavaScript فورًا في متصفّحك.

محرّر سريع في المتصفّح لتجربة كود frontend واختبار المقتطفات وتعلّم تطوير الويب وبناء نماذج أولية صغيرة دون تثبيت برامج.

ابدأ البرمجة استكشف أدوات المطوّر

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

انقر على «تشغيل» لمعاينة الكود.

Console

—

معاينة فوريةاجمع HTML وCSS وJavaScript في مستند حي.

بدون تثبيتافتح الصفحة وابدأ البرمجة فورًا.

يعمل في متصفّحكتنفيذ المعاينة يبقى على جهازك.

HTML + CSS + JavaScriptمحرّرات منفصلة لكل لوحة لغة.

اختبار متجاوببدّل بين عروض سطح المكتب والجهاز اللوحي والجوال.

مناسب للمطوّرينConsole والتنسيق والتنزيل واختصارات لوحة المفاتيح.

مُجمِّع HTML CSS JS هو مساحة عمل في المتصفّح تتيح كتابة الترميز والأنماط والسكربتات ثم عرضها معًا كمعاينة لصفحة ويب. يركّز هذا الموقع على هذا التدفق: التحرير في لوحات منفصلة، التشغيل محليًا، فحص مخرجات Console، وتصدير ملف HTML مستقل عند الجاهزية.

اكتب HTML وCSS وJavaScript في المحرّرات.

انقر «تشغيل» أو فعّل التشغيل التلقائي.

يجمع التطبيق اللوحات الثلاث في مستند HTML واحد.

يُعرض المستند داخل iframe مع sandbox.

تظهر المخرجات فورًا في لوحة المعاينة.

التنفيذ الأساسي لـ HTML وCSS وJavaScript للمعاينة يتم محليًا في متصفّحك.

يُعرض كود المستخدم في iframe مع sandbox، معزولًا عن واجهة التطبيق الرئيسية.

لا يحتاج المُجمِّع لرفع محتوى المحرّر العادي إلى backend لإنتاج المعاينة.

تحدّد API المتصفّح ما يمكن لـ JavaScript فعله داخل sandbox.

قد تتطلّب الصور الخارجية أو الخطوط أو سكربتات CDN وصولًا للشبكة في متصفّحك.

يقلّل sandbox المخاطر على الصفحة الأم؛ وليس ادّعاءً بأمان مطلق.

المنهجية

محرّرات HTML وCSS وJavaScript منفصلة مع أرقام الأسطر
تشغيل يدوي وتشغيل تلقائي اختياري
معاينة حية مع sandbox
التقاط Console لـ log وinfo وwarn وerror
رسائل أخطاء وقت التشغيل
عروض معاينة لسطح المكتب والجهاز اللوحي والجوال
تنسيق ونسخ ومسح وإعادة ضبط وتنزيل
حفظ محلي في المتصفّح
اختصار لوحة المفاتيح Ctrl/Cmd + Enter
سمات فاتحة وداكنة
أمثلة ابتدائية لأنماط UI شائعة

تعلّم HTML

تدرّب على الوسوم وبنية المستند مع ملاحظات فورية.

تعلّم CSS

اضبط التخطيط والألوان والقواعد المتجاوبة بأمان.

تعلّم JavaScript

جرّب الأحداث وتحديثات DOM وتصحيح Console.

اختبار المقتطفات

تحقّق من جزء قبل إضافته إلى مستودع.

تخطيطات متجاوبة

افحص نقاط التوقف بعناصر تحكم عرض المعاينة.

تصحيح كود frontend

أعد إنتاج أخطاء UI وافحص أخطاء Console.

بناء نماذج أولية

ارسم التفاعلات دون إعداد مشروع كامل.

تفاعلات DOM

اختبر الاستعلامات والمستمعين والترميز الديناميكي.

تعليم frontend

شارك بيئة بسيطة للعروض والتمارين.

مكوّنات UI

كرّر على الأزرار والبطاقات والنوافذ والنماذج.

رسوم CSS متحركة

جرّب keyframes وتفضيلات الحركة.

أحداث JavaScript

تحقّق سريعًا من معالجات النقر والإرسال ولوحة المفاتيح.

ما هو مُجمِّع HTML CSS JS؟

مساحة عمل عبر الإنترنت تجمع HTML وCSS وJavaScript في معاينة حية في المتصفّح لتكتب وتختبر كود frontend بسرعة.

هل يمكنني تشغيل HTML وCSS وJavaScript معًا؟

نعم. يحقن مستند المعاينة CSS في وسم style وJavaScript في وسم script حول HTML.

هل المُجمِّع مجاني؟

بيئة playground الأساسية متاحة في المتصفّح دون إنشاء حساب للاستخدام الأساسي.

هل أحتاج لتثبيت شيء؟

لا. افتح الموقع وابدأ التحرير. يكفي متصفّح حديث.

هل يعمل المُجمِّع على الجوال؟

نعم. المحرّرات و«تشغيل» والمعاينة وConsole مرتّبة للشاشات الصغيرة بلوحات تبويب.

هل يعمل الكود في المتصفّح؟

نعم. عرض المعاينة وتنفيذ السكربتات يتم محليًا في iframe مع sandbox.

هل يمكنني تنزيل الكود؟

نعم. ينشئ التنزيل index.html مستقلًا يتضمن HTML وCSS وJavaScript.

هل يمكنني اختبار JavaScript؟

نعم. استخدم لوحة JavaScript ثم افحص رسائل Console وأخطاء وقت التشغيل بعد «تشغيل».

هل يمكنني اختبار التصاميم المتجاوبة؟

نعم. بدّل بين عروض المعاينة لسطح المكتب والجهاز اللوحي والجوال واقرأ تسمية viewport.

هل يحفظ المُجمِّع الكود؟

عند تفعيل الحفظ المحلي بالتحرير العادي، قد تُخزَّن اللوحات في هذا المتصفّح عبر localStorage.

هل يُرفَع الكود إلى خادم؟

المعاينة القياسية لا تتطلّب رفع محتوى المحرّر إلى backend. المتصفّح ينفّذ العرض.

لماذا لا يعمل JavaScript؟

أسباب شائعة: التشغيل قبل وجود عقدة DOM، أخطاء في المعرّفات، صلاحيات محظورة في sandbox، أو الاعتماد على API غير متاحة في iframes. راجع لوحة Console.