Exporter le code (HTML, React, Tailwind)

uxmagic.ai/dashboard/react-component-library

Ce que vous pouvez exporter#

• Un écran seul en HTML ou en composant React.
• Un projet entier en projet React multi-écrans, assemblé et téléchargeable en archive.

Le style est en Tailwind CSS, avec le thème de votre projet exprimé en design tokens : le code porte donc le même système que le canevas.

Exporter un écran#

1. Sélectionnez l'écran.
2. Export → Code.
3. Choisissez HTML ou React.
4. Copiez-le, ou téléchargez-le.

Exporter un projet entier#

L'export de projet s'exécute en tâche de fond — il génère chaque écran, puis les assemble en une structure de projet. Les gros projets prennent plus longtemps ; vous pouvez suivre la progression et télécharger à la fin.

À quoi ressemble le code#

C'est du vrai code front-end lisible : balisage sémantique, classes utilitaires Tailwind, tokens de thème pour les couleurs et la typographie, et images référencées par URL depuis le stockage de ressources de votre projet.

Deux choses à prévoir :

• Les ressources sont distantes par défaut. Rapatriez-les dans votre dépôt avant la mise en production, pour que votre site ne dépende pas des URL de ressources UXMagic.
• C'est un front-end. Pas de couche de données, de routage ni de gestion d'état — c'est vous qui le branchez dans votre application.

Responsive#

Le code exporté reflète l'écran exporté, à sa largeur. Si vous avez généré des variantes mobile et bureau distinctes, exportez les deux et fusionnez-les à votre point de rupture. Voir Variantes responsives et par appareil.

Directement dans un dépôt#

Vous pouvez pousser le code exporté directement vers GitHub au lieu de le télécharger — voir Synchronisation GitHub.