Can I run a Claude artifact outside Claude?

Yes. An artifact is just a single self-contained HTML file, so once you copy its code into a .html file — or press the artifact's Download button — it runs in any browser on your computer with no Claude tab, account, or server involved.

Why does my saved file open as plain text instead of the app?

The extension almost certainly still ends in .txt. Notepad's Save As dialog defaults to Text Documents, and browsers refuse to render a .txt file as a page. Save the file again with a name that ends in .html, exactly as in step 8, and it will run.

Is downloading an artifact different from publishing it?

Yes. Downloading hands you the .html file so you can run and edit it on your own machine — nothing leaves your computer. Publishing shares a hosted link that still depends on Claude's infrastructure. The local route in this guide gives you full ownership of the file.

What about React artifacts — can those run locally too?

Yes, but they need a project rather than one file. Matt Palmer's workflow: scaffold a project with npm create vite, install Tailwind and shadcn/ui (Claude favors shadcn, so imports like @/components/ui resolve once you add the same components), paste the artifact code into App.jsx, and run npm run dev — Vite's hot reload then shows every edit instantly.

Does the exported file still work without an internet connection?

The file itself runs in your browser, so self-contained artifacts such as canvas games keep working offline. What you lose without a connection is the chat half: asking Claude for changes requires claude.ai, and artifacts that call external APIs obviously still need the network for those calls.

كلود آرتيفاكتس · دليل التشغيل المحلي

تشغيل Claude Artifacts محليًا: مسار HTML دون تثبيت (2026)

كل أثر (Artifact) في كلود هو ملف HTML واحد مكتفٍ بذاته. يغطي هذا الدليل سير التصدير الكامل — انسخ الكود، احفظه بامتداد .html، انقر نقرًا مزدوجًا، فيعمل التطبيق في متصفحك الخاص — إضافة إلى اختصار زر التنزيل المدمج ومسار Vite لآثار React.

اطّلع على الخطوات الاثنتي عشرة شغّل آثار React عبر الإنترنت

الخلاصة السريعة

يأتي أثر كلود كملف HTML واحد: المحادثة على اليسار ولوحة الكود الكاملة على اليمين، فكل ما تحتاجه لتشغيله خارج كلود موجود أصلًا على شاشتك.
مسار النسخ: حدد الكود كاملًا، والصقه في ملف نصي جديد، واحفظه بامتداد .html ثم انقر نقرًا مزدوجًا — يفتح الأثر في متصفحك الافتراضي.
مسار التنزيل: تضم بطاقة الأثر في كلود زر Download يحفظ ملف .html مباشرة في مجلد التنزيلات، دون حاجة حتى إلى النسخ واللصق.
راقب الامتداد: يحفظ المفكرة الملفات بصيغة .txt افتراضيًا، والمتصفح لن يعرض ملف .txt كصفحة. «الحفظ بصيغة HTML» هو الخطوة التي تشغّل الأثر فعلًا.

Make an HTML File from a Claude.ai Game File

القناة:Karl Kapp1:53

شاهد على يوتيوب

يُعيد هذا الدليل صياغة سير العمل المعروض في الفيديو نصًا أصليًا خطوة بخطوة؛ ولقطات الشاشة مأخوذة من التسجيل نفسه، وكل واحدة مرتبطة بلحظة التقاطها بالضبط.

مسار Vite + React + shadcn/ui المذكور في الأسئلة الشائعة مأخوذ من فيديو مات بالمر «Editing Claude Artifacts locally with Vite, React, and Shadcn/ui» — وقد وُثّق كمصدر ثانٍ.

شغّل أثرك خارج كلود، خطوة بخطوة

1
افتح لوحة كود الأثر
في كلود، افتح المحادثة التي تحتوي أثرك ووسّع لوحة الكود ليقف الشات والمصدر جنبًا إلى جنب. ما تبحث عنه هو مستند HTML واحد متصل — بالأنماط والسكربتات معًا — لأن هذا الملف الواحد هو التطبيق بأكمله.
المحادثة يسارًا ومصدر HTML للأثر يمينًا — هذا الملف الواحد هو التطبيق كله.شاهد عند 0:02
2
اعثر على زر النسخ في لوحة الكود
يعرض رأس لوحة الكود اسم الأثر مع وسم HTML بجوار زر Copy. نقرة واحدة تنسخ النسخة الحالية الكاملة من الكود — دون حاجة إلى تحديد يدوي.
نقرة على Copy تلتقط المراجعة الحالية كاملةً من الأثر.شاهد عند 0:08
3
جرّب الأثر قبل تصديره
بدّل إلى المعاينة واستخدم التطبيق فعلًا — في هذا المثال لعبة جمع نقاط بدوائر عدوّة وعدّاد نقاط وأسئلة تظهر أثناء اللعب. تأكد أن المراجعة الحالية تسلك السلوك الذي تريده؛ فما يعمل في المعاينة هو بالضبط ما ستصدّره.
المعاينة تشغّل المراجعة نفسها التي ستنسخها — جرّبها هنا أولًا.شاهد عند 0:20
4
انسخ كود HTML بالكامل
مرّر لوحة الكود من DOCTYPE الافتتاحي حتى وسم الإغلاق الأخير للتأكد أن شيئًا لا ينقص، ثم انسخ الكل. إن لم يعمل الملف بعد اللصق، فالنسخة الناقصة هي أول مشتبه به.
من DOCTYPE إلى آخر وسم — يجب أن تكون النسخة كاملة.شاهد عند 0:30
5
أنشئ مستندًا نصيًا جديدًا على سطح المكتب
في ويندوز، انقر بزر الفأرة الأيمن على مساحة فارغة في سطح المكتب واختر «جديد» ثم «مستند نصي». أصبح لديك ملف فارغ لاستقبال الكود — دون تثبيت أي محرر؛ فالمفكرة تكفي.
انقر يمينًا على سطح المكتب، جديد، مستند نصي — هذا المسار لا يحتاج سوى المفكرة.شاهد عند 0:47
6
افتح الملف الفارغ في المفكرة
انقر نقرًا مزدوجًا على المستند الجديد فيفتح في المفكرة والمؤشر عند السطر 1، العمود 1 في ملف فارغ. أبقِ تبويب كلود مفتوحًا في الخلف — ستتنقل بين النافذتين لدقيقة.
مفكرة فارغة عند السطر 1 والعمود 1، وكلود ينتظر في الخلف.شاهد عند 0:55
7
الصق كود الأثر في الملف
الصق كل ما نسخته. سيمتلئ الملف فورًا بـ HTML وJavaScript — هنا دوال الرسم في لعبة الكانفس وحلقتها الرئيسية. إن بدا اللصق مقطوعًا، فعُد إلى الخطوة 4 وانسخ من جديد.
الأثر كله يسكن الآن ملفًا نصيًا بسيطًا على جهازك.شاهد عند 0:57
8
احفظه بامتداد .html
افتح «ملف» ثم «حفظ باسم» وأعطِ الملف اسمًا حقيقيًا ينتهي بـ .html. سيظل نوع الملف في مربع الحوار «مستندات نصية» — لا بأس؛ الحاسم هو لاحقة .html التي تكتبها في الاسم، لأن المتصفحات لا تعرض إلا الصفحات التي تتعرّف عليها كـ HTML.
الاسم الذي تكتبه يحسم كل شيء: game.html يعمل، وgame.txt لا يعمل.شاهد عند 1:01
9
عند تحذير الاستبدال، غيّر الاسم
إذا حذّرك ويندوز من أن الملف موجود مسبقًا، فاختر «لا» واختر اسمًا جديدًا — في التسجيل كان game.html محفوظًا سابقًا، فصار التصدير الثاني game2.html. الأسماء المختلفة تحفظ كل نسخة من الأثر على القرص بدل الكتابة فوقها.
«لا» للاستبدال، واسم جديد: game2.html يُبقي التصدير الأول سليمًا.شاهد عند 1:07
10
انقر نقرًا مزدوجًا على الملف والعب
اعثر على الملف المحفوظ على سطح المكتب وانقر عليه نقرًا مزدوجًا. يفتح في متصفحك الافتراضي من عنوان file:/// على جهازك أنت — شاشة البداية والعدّاد ودوائر العدو تعمل تمامًا كما كانت داخل كلود، بلا خادم وبلا تبويب claude.ai.
file:///...Desktop/game2.html — الأثر يعمل الآن بالكامل على جهازك.شاهد عند 1:32
11
الاختصار: زر التنزيل المدمج في كلود
النسخ اليدوي ليس الطريق الوحيد. يعرض كلود أيضًا زر Download أسفل بطاقة الأثر — أحيانًا إلى جانب ملف ثانٍ كدليل الإعداد ومعه خيار Download all. نقرة واحدة يهبط بها ملف .html مباشرةً في مجلد التنزيلات، بلا مفكرة على الإطلاق.
زر Download في بطاقة الأثر يحفظ ملف .html مباشرة — لا حاجة للنسخ واللصق.شاهد عند 1:44
12
تحقق مما وصل إلى تنزيلاتك
تؤكد قائمة التنزيلات في المتصفح الملفات المُصدَّرة — هنا DKapp_Game_Revised.html بحجم نحو 20 كيلوبايت. انقر نقرًا مزدوجًا على أي منها لتشغيله محليًا كما في الخطوة 10، أو افتحه في محرر نصوص لقراءة الكود.
ملف .html بحجم 20 كيلوبايت في قائمة التنزيلات — الأثر كله جاهز للعمل دون اتصال.شاهد عند 1:50