Code exportieren (HTML, React, Tailwind)

uxmagic.ai/dashboard/react-component-library

Was du exportieren kannst#

• Einen einzelnen Screen als HTML oder als React-Komponente.
• Ein ganzes Projekt als React-Projekt mit mehreren Screens, zusammengesetzt und als Archiv herunterladbar.

Gestylt wird mit Tailwind CSS, dein Projekt-Theme als Design-Tokens ausgedrückt, sodass der Code dasselbe System trägt wie der Canvas.

Einen Screen exportieren#

1. Wähl den Screen.
2. Export → Code.
3. Wähl HTML oder React.
4. Kopier ihn oder lade ihn herunter.

Ein ganzes Projekt exportieren#

Der Projektexport läuft als Hintergrundjob — er generiert jeden Screen und setzt sie dann zu einer Projektstruktur zusammen. Größere Projekte dauern länger; du kannst den Fortschritt sehen und am Ende herunterladen.

Wie der Code ist#

Es ist echter, lesbarer Frontend-Code: semantisches Markup, Tailwind-Utility-Klassen, Theme-Tokens für Farben und Schrift, und Bilder per URL aus dem Asset-Speicher deines Projekts referenziert.

Zwei Dinge einplanen:

• Assets liegen standardmäßig remote. Lade sie vor dem Ausliefern in dein Repository, damit deine Produktionsseite nicht von UXMagic-Asset-URLs abhängt.
• Es ist ein Frontend. Es gibt keine Datenschicht, kein Routing und kein State-Management — das verdrahtest du in deiner App.

Responsive#

Exportierter Code bildet den exportierten Screen in dessen Breite ab. Wenn du getrennte Mobil- und Desktop-Varianten erzeugt hast, exportier beide und führ sie an deinem Breakpoint zusammen. Siehe Responsive und Gerätevarianten.

Direkt ins Repository#

Du kannst exportierten Code direkt nach GitHub pushen, statt ihn herunterzuladen — siehe GitHub-Sync.