Afficher du JSX sans d’abord créer un projet React avec des structures prédefinites.

HTML propose toujours l’un des boucles les plus simples pour travailler sur le web : créer un fichier, le sauvegarder, faire un double-clic dessus, et le navigateur affiche une page. En revanche, les interfaces générées par React ou l’IA apparaissent généralement de la manière suivante :

App.jsx

Faire un double-clic affiche le code source, et non une page. Chercher « comment ouvrir un fichier JSX ? » conduit rapidement à un tutoriel sur les outils React. Ce manque de cohérence mérite une explication plus claire, ainsi qu’un moyen de prévisualisation plus simple lorsque l’objectif n’est pas de créer une application complète.

Le marquage familier ne transforme pas JSX en HTML

À première vue, JSX peut ressembler à HTML :

<div>
  <h1>Hello World</h1>
  <p>Welcome to my application.</p>
</div>

Même si les balises sont familières, le fichier reste un fichier avec une extension différente. JSX est une syntaxe intégrée dans le code d’une application JavaScript, le plus souvent avec React, et il permet de mélanger logique et marquage :

function Welcome({ name }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
    </div>
  );
}

Les expressions, les props et les composants signifient que le navigateur a besoin d’une transformation ainsi que d’un mécanisme de exécution. En changeant le nom :

App.jsx

en :

App.html

Ce pipeline n’a pas été inventé de toutes pièces.

Alors, comment faut-il normalement voir JSX ?

La méthode standard consiste à intégrer le composant au sein d’une application React. Une séquence courante ressemble à ceci :

Install Node.js
       ↓
Create React project
       ↓
Install dependencies
       ↓
Add JSX component
       ↓
Run development server
       ↓
Open browser

Cette approche est adaptée lorsque l’on développe une application réelle. Elle devient cependant trop lourde lorsqu’il s’agit simplement de consulter un composant.

Que se passe-t-il si l’on veut seulement prévisualiser le composant ?

L’IA pourrait l’avoir généré. Un collègue pourrait l’avoir envoyé. On peut aussi vouloir comparer des maquettes ou déterminer si React est bien le choix approprié. Créer un projet complet pour de tels cas semble disproportionné.

L’IA a rendu cette situation beaucoup plus courante

Les assistants renvoient fréquemment du JSX alors que l’on s’attendait à du HTML statique. La réaction instinctive est d’utiliser toute la stack : React, Node, les dépendances, un serveur de développement et divers outils — même lorsque la seule question est de savoir si l’interface affichée est correcte. Ce problème a motivé la création d’un outil de prévisualisation dédié appelé Preview Kit.

L’essor du « code temporaire »

La vitesse de génération favorise davantage d’expériences éphémères :

dashboard-a.jsx
dashboard-b.jsx
dashboard-c.jsx
dashboard-d.jsx

Peut-être qu’une seule variante sera déployée ; les autres n’étaient que des tests. Lorsque la création de code est peu coûteuse, son inspection et son abandon devraient l’être également.

La prévisualisation n’est pas identique à l’exécution d’une application en production

L’exécution d’une application peut impliquer le routage, l’état, les APIs, l’authentification, les bases de données, les graphes de dépendances, l’optimisation de la compilation et les tests. La prévisualisation d’un prototype demande souvent uniquement : à quoi ressemble cette interface ? Forcer ces deux tâches à passer par la même configuration de projet crée des frictions inutiles pour l’une comme pour l’autre.

Où s’insère une application de prévisualisation dédiée

Preview Kit est une application Windows conçue pour l’étape de prévisualisation : vous avez un fichier, vous l’ouvez, et vous voyez sa représentation rendue. Les formats pris en charge incluent :

JSX
TSX
HTML
Vue
Markdown
JSON
CSS
SCSS

ainsi que des types associés. Il ne remplace pas VS Code, React, Vue ni un serveur de développement adapté. Il couvre la période avant que ces outils ne deviennent nécessaires.

Considérons un composant TSX

function UserCard() {
  return (
    <div className="card">
      <h2>Alex</h2>
      <p>Frontend Developer</p>
      <button>View Profile</button>
    </div>
  );
}

enregistré sous le nom de :

UserCard.tsx

Évaluer la carte ne nécessite pas de soumission complète. Un affichage préliminaire empêche par défaut que de petits essais deviennent des projets complets.

La même logique s’applique à Vue

ProductCard.vue

avec un modèle tel que :

<template>
  <div class="product-card">
    <h2>Product Name</h2>
    <button>Buy Now</button>
  </div>
</template>

L’accès au code source pour modification diffère de la vision du composant rendu. Ces deux vues sont importantes ; elles ne devraient pas exiger les mêmes efforts de configuration.

Markdown propose le même principe

# My Documentation

ou du texte de corps tel que :

This is **important**.## Installation1. Download the application.
2. Open the file.
3. Start working.

sont utiles sous forme brute lors de la modification, et utiles une fois rendus lors de la lecture. La leçon n’a rien à voir avec les extensions. Le code source et l’affichage préliminaire représentent deux vues d’un même élément.

Pourquoi c’est encore plus important aujourd’hui

Le travail assisté par l’IA génère des fichiers en dehors des structures de projet classiques : maquettes d’interface, composants React ou Vue, SVG, notes Markdown, expérimentations CSS. Le besoin premier est souvent l’examen de ces fichiers, et non leur déploiement. Une prévisualisation rapide comble cette lacune.

Un cycle d’expérimentation amélioré

Au lieu de :

Generate code
↓
Create project
↓
Install dependencies
↓
Configure environment
↓
Run project
↓
See result

préférez :

Generate
↓
Preview
↓
Evaluate
↓
Improve

et seulement ensuite :

Build the actual project

L’expérimentation et la mise en production restent séparées, ce qui correspond à la manière dont fonctionnent réellement les workflows génératifs.

Tous les fichiers n’ont pas besoin d’un projet

Un fichier ne signifie pas nécessairement « créer un répertoire ». Parfois, cela signifie simplement « jeter un coup d’œil ». Les designers envoient des SVG ; les modèles génèrent du JSX ; les collègues partagent du Markdown ; les configurations arrivent sous forme de JSON. La compréhension précède l’édition ou la diffusion.

La lacune qui a motivé cet outil

Le produit est né d’un petit problème : un fichier JSX généré qui était plus difficile à visualiser que prévu. La génération est devenue plus simple, mais la visualisation n’a pas su suivre le rythme. Cet outil existe pour combler cette étape manquante.

Réduire la distance entre le fichier et sa visualisation

L’objectif est de réduire l’écart entre un fichier et sa prévisualisation — en partant de « laissez-moi voir de quoi il s’agit » plutôt que de « comment configurer une chaîne d’outils ? ». Cela aide avec :

.jsx
.tsx
.vue
.html
.md
.json
.css
.scss

et d’autres formats pris en charge.

Le contexte plus large

Cela ne concerne pas seulement JSX. Lorsque la génération de code devient plus simple, les expérimentations se multiplient. Lorsque les expérimentations augmentent, une inspection rapide gagne en importance. Les outils qui éliminent les configurations inutiles trouvent leur place.

Il n’est pas toujours nécessaire de compiler d’abord

Parfois, l’ordre approprié n’est pas construire → tester → décider. Parfois, c’est générer → visualiser → décider → construire. Ce cycle plus simple convient lorsqu’on reçoit un fichier .jsx inattendu et qu’on souhaite voir le résultat visuel avant de s’engager dans une application React, un ensemble d’outils Node ou un long processus d’installation.

Preview Kit

Preview Kit est une application Windows permettant de visualiser des formats liés au développement et au web, tels que JSX, TSX, Vue, HTML, Markdown, JSON, CSS et SCSS. Elle est utile lorsque le fichier existe déjà et qu’une configuration de développement complète serait superflue : ouvrez simplement le fichier, consultez le résultat, puis décidez de la suite des opérations.

Fiche du Preview Kit dans Microsoft Store