Kostenloses Tool

Artifact Converter

Füge den React-Code der KI ein und erhalte eine Seite, die du hosten kannst

JSX

Füge dein Artifact hier ein

Oder ziehe eine .jsx / .tsx Datei hierher

0 Zeilen0 Zeichen0 Bytes

Warum dein Artifact eine leere Seite zeigt

Claude-Artifacts und ChatGPT-Canvas-Web-Ausgaben sind meist eine einzelne React-Komponente: eine exportierte Funktion mit JSX, Hooks und manchmal Icons. Speichert man sie als index.html und öffnet sie im Browser, wird nichts angezeigt, weil Browser kein JSX verstehen. Dieser Converter transpiliert das JSX zu normalem JavaScript, lädt React von einem CDN und verpackt das Ergebnis in eine eigenständige HTML-Seite, die jeder statische Host ausliefern kann.

Was der Converter ändert

  1. 1JSX-Syntax wird in normales JavaScript transpiliert, damit der Browser es ohne Build-Schritt ausführen kann.
  2. 2TypeScript-Typ-Annotationen werden entfernt. Die Logik bleibt gleich, nur die Typen werden gestrichen.
  3. 3Bare-Import-Specifier (react, lucide-react, recharts) werden über eine Import Map auf CDN-URLs gemappt, damit die Seite ihre Abhängigkeiten eigenständig lädt.
  4. 4Die Komponente wird mit React's createRoot in ein Root-Div gemountet und in eine Error Boundary gewickelt, die Fehler anzeigt statt einer leeren Seite.

Was nicht übertragen wird

Artifact-only-APIs wie window.claude oder window.fs funktionieren nur in der Sandbox der KI und schlagen auf einer Live-Seite fehl. Pakete außerhalb der Allowlist (react, lucide-react, recharts, clsx, class-variance-authority) brauchen einen Build-Schritt und können nicht von einem CDN geladen werden. Relative Imports und shadcn/ui-Pfade setzen Projektdateien voraus, die in einem Einzeldatei-Artifact nicht existieren. Der Converter markiert jedes dieser Probleme, damit du weißt, was vor dem Veröffentlichen zu beheben ist.

FAQ

Ein Claude-Artifact ist meist eine einzelne React-Komponente: eine exportierte Funktion, die JSX zurückgibt, oft mit useState-Hooks und UI-Bibliotheken wie lucide-react. Ein Browser kann JSX nicht direkt rendern, weshalb das Herunterladen des Artifacts und Öffnen eine leere Seite zeigt.

Bereit zum Teilen?

Füge den React-Code der KI ein und erhalte eine Seite, die du hosten kannst

Konvertieren und veröffentlichenDein Code bleibt in deinem Browser. Nichts wird gespeichert, es sei denn, du veröffentlichst.