Exporter Pro

Copiez n’importe quelle section d’un site web en JSX + Tailwind

Smart Design Inspector convertit la section d’un site web que vous choisissez en composant JSX avec des classes Tailwind, ou en HTML et CSS, prêt à coller dans votre projet.

Rejoindre la liste d’attente Comment ça marche

Fonction Pro en accès anticipé gratuit jusqu’au lancement de la Pro (date à définir)

Section · tucliente.example

Réservations

Une table pour ce soir

Du mardi au dimanche, 13 h-23 h
12, rue Principale

Réserver

div.card · cliquer pour copier

<div className="rounded-lg border border-gray-200 p-8">
  <p className="text-xs uppercase tracking-widest">Réservations</p>
  <p className="mt-2 text-2xl font-semibold">Une table pour ce soir</p>
  <ul className="mt-4 space-y-2 text-sm">…</ul>
  <a className="mt-6 block bg-blue-600 px-4 py-2 text-white">
    Réserver
  </a>
</div>

<div class="card">…</div>

.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 32px;
}
.card .title { font-size: 24px; font-weight: 600; }

Exemple illustratif · Pro · accès anticipé

Comment ça marche

3 étapes

01
Ouvrez le site web et choisissez Copier la section.
02
Survolez la page et cliquez sur le bloc voulu : un hero, une carte de prix, un pied de page.
03 Pro
Choisissez le format, JSX + Tailwind ou HTML/CSS, et le code est copié dans le presse-papiers.

Ce que vous obtenez

2 formats

JSX + Tailwind

Un composant avec les classes Tailwind qui reproduisent les styles calculés.

HTML/CSS

Le balisage avec sa feuille de style, pour les projets sans Tailwind ou pour WordPress.

Inspirez-vous, ne copiez pas

Propriété intellectuelle

Les textes, les images et les logos d’un autre site ont un propriétaire. Copiez la structure et le style, et mettez-y votre contenu. Avec la première Pro arrive le mode inspiration, gratuit pour tous : il remplace les textes et les images par des espaces réservés lors de la copie.

Gratuit et Pro

Voir les tarifs →

	Gratuit0 €pour toujours	Pro49 €paiement unique
Copier le CSS de chaque élément
Copier une section en JSX + Tailwind ou HTML/CSS	—	Accès anticipé gratuit
Mode inspiration : remplace les textes et les images par des espaces réservés lors de la copie	Avec la première Pro	Avec la première Pro

C’est une fonction Pro. Jusqu’au lancement de la Pro (date à définir), elle est en accès anticipé gratuit pour tous. Ensuite, elle sera incluse dans la Pro à 49 €, en paiement unique.

Rejoindre la liste d’attente

Questions fréquentes

Plus de questions →

Est-ce gratuit ?

C’est une fonction Pro. Jusqu’au lancement de la Pro (date à définir), elle est en accès anticipé gratuit pour tous. Ensuite, elle sera incluse dans la Pro à 49 €, en paiement unique.

Le code est-il parfait ?

Il fonctionne et reste proche de l’original. Les animations en JavaScript et certains effets ne se traduisent pas en classes : mieux vaut le relire.

Utilise-t-il les couleurs de mon projet ?

Il utilise celles du site d’origine. Pour avoir les tokens en variables, combinez-le avec l’extraction du design system.

Puis-je le copier pour React, Vue ou Elementor ?

Le JSX fonctionne directement dans React. Vue et Elementor sont prévus pour des versions ultérieures.

Sur quels navigateurs et systèmes fonctionne-t-elle ?

Sur Chrome, Edge, Brave, Arc, Opera et Vivaldi, sous Windows, Mac et Linux, dès la 1.0. Elle fonctionne partout de la même façon, car c’est le navigateur qui exécute l’extension, pas le système. Le code est prêt à être porté sur Firefox et Safari sans réécriture. Pendant le développement, des changements sont possibles.

Continuer avec

Fonctions voisines

Pro · accès anticipé

Design system

Couleurs, espacements et typographie en Tailwind v4 @theme, variables CSS ou DESIGN_SPECS.md.

Extraire le design system →

Gratuit

Inspecteur CSS

Survolez un élément et voyez son CSS calculé, sa boîte, ses marges et les distances.

Inspecteur CSS →

Tarifs

Gratuit pour toujours. Pro, 49 € en une seule fois.