React-Playground
Dieser React-Playground führt deine Komponenten online aus, direkt in deinem Browser. Bearbeite App.jsx, und die App aktualisiert sich, während du tippst. React 18 und Tailwind CSS stecken schon in der Vorlage, npm-Pakete sind nur einen Klick entfernt. Du installierst nichts und brauchst zum Starten kein Konto; melde dich an, um zu speichern und zu teilen. Er gehört zu Playcode Classic, den kostenlosen Code-Tools von Playcode.
Kostenlos. Starten kannst du ohne Konto.

Bearbeite eine Komponente. Die App folgt.
Die Vorschau baut sich einen Moment nach dem Tippen neu auf. Jede Änderung lädt die App neu, ihr State beginnt also von vorn.

Starte mit dem Stack, den du nutzt
- ReactJSX, Hooks und Tailwind CSS.Öffnen
- React und TypeScriptTypisierte Komponenten, geprüft beim Schreiben.Öffnen
- Redux ToolkitEin Store mit Slices.Öffnen
- MobXObservable State.Öffnen
- Framer MotionAnimationen in wenigen Zeilen.Öffnen
- MUIMaterial-Komponenten.Öffnen
Aus npm importieren.
Importiere ein Paket, wähl eine Version und installiere es.
Du hast eine .jsx-Datei?
Füge sie in eine Datei ein und rendere sie aus index.jsx.
Wenn die App einen Server braucht
Der Playground läuft in deinem Browser: kein Server, kein Next.js, kein React Native. Wenn eine App ein Backend, eine Datenbank und eine eigene Domain braucht, baut Playcode AI sie und Playcode Cloud betreibt sie, in einem bezahlten Tarif.

Teil von Playcode Classic
Playcode begann 2016 als Programmierumgebung im Browser. Dieser Playground ist eines seiner kostenlosen Code-Tools, die wir heute Playcode Classic nennen.
Heute ist Playcode eine KI-Plattform zum Erstellen und Betreiben von Websites und Apps.

Häufige Fragen
Ist dieser React-Editor online kostenlos?
Ja. Schreiben und Vorschau sind kostenlos und ohne Konto möglich. Mit einem kostenlosen Konto speicherst du bis zu drei Projekte, öffentlich oder privat. Für eine eigene Domain brauchst du einen bezahlten Tarif, und der KI-Chat verbraucht Credits.
Welche React-Version wird verwendet?
React 18.3.1, in jeder Vorlage. Die Version kommt aus der package.json.
Kann ich React-Code online ausführen, ohne etwas zu installieren?
Ja. Der Playground ist eine React-Sandbox in deinem Browser und funktioniert als React-Compiler online: Schreib eine Komponente, und sie wird gerendert, während du tippst. Du musst kein Projekt einrichten.
Unterstützt der Playground JSX und TypeScript?
Ja. .jsx- und .tsx-Dateien werden in der Vorschau kompiliert; die Vorlage mit React und TypeScript prüft deine Typen, während du schreibst.
Kann ich npm-Pakete nutzen?
Ja. Importiere ein Paket, wähl eine Version und installiere es, oder füge es im Bereich „NPM-Pakete“ hinzu.
Gibt es Hot Reload?
Die App aktualisiert sich, während du tippst, aber jede Änderung lädt sie neu, und der State beginnt von vorn. Fast Refresh gibt es noch nicht.
Kann ich Tailwind CSS oder CSS Modules nutzen?
Tailwind CSS ist in der Vorlage enthalten. CSS Modules funktionieren als .module.css-Dateien; .module.scss wird noch nicht unterstützt.
Kann ich hier mit Next.js oder React Native bauen?
Nein. Der Playground führt React in deinem Browser aus. Eine App mit Server und Datenbank baut Playcode AI, und Playcode Cloud betreibt sie, in einem bezahlten Tarif.
Kann ich eine .jsx-Datei öffnen?
Ja. Füge sie in eine Datei der React-Vorlage ein und rendere sie aus index.jsx.
Kann ich meinen Playground teilen?
Ja. Melde dich an und speichere das Projekt. Stell im Tab „Teilen“ die Option „Jeder mit dem Link“ auf „Kann ansehen“ und kopiere dann den Link.
Gehört dieser Playground zu Playcode?
Ja. Dieser Playground gehört zu Playcode Classic, den kostenlosen Code-Tools von Playcode. Playcode begann 2016 als Programmierumgebung im Browser. Heute ist es eine KI-Plattform zum Erstellen und Betreiben von Websites und Apps.
Weitere kostenlose Code-Tools
- JavaScript-Playground
HTML, CSS und JavaScript mit Live-Vorschau.
- TypeScript-Playground
TypeScript auf einer Live-Seite.
- Vue-Playground
Single-File Components, live.
- Tailwind-Playground
Utility-Klassen mit sofortiger Vorschau.
- JavaScript-Compiler
JavaScript ausführen, die Konsole lesen.
Schreib eine Komponente. Sieh sie laufen.
