Onlook

Onlook est un éditeur visuel open-source axé sur l'IA, conçu pour les applications React. Fondée en 2024 par le designer Daniel Farrell et l'ingénieur Kiet Ho (ex-Amazon, ex-ServiceNow), l'équipe de San Francisco a intégré la promotion Hiver 2025 de Y Combinator avec un problème clair à résoudre : le fossé douloureux du transfert entre les maquettes Figma et le code React en production. Au lieu d'un outil de design qui exporte des ressources, ou d'un générateur de code qui produit des fichiers à coller manuellement, Onlook permet aux designers de manipuler une application Next.js en cours d'exécution dans un canevas visuel, tandis que les modifications sont répercutées en temps réel dans les fichiers JSX réels sur le disque.

L'outil fonctionne sur n'importe quel projet Next.js et TailwindCSS. Ses fonctionnalités principales incluent un panneau de calques en glisser-déposer façon Figma, une interface de chat IA qui comprend votre arborescence de composants existante, un contrôle de version et de branche pour l'expérimentation de design, des commentaires multi-utilisateurs et une intégration MCP (Model Context Protocol) pour l'extension de la chaîne d'outils. L'application de bureau et le bac à sable web exécutent tous deux le même cœur open-source, sous licence Apache 2.0, de sorte que les équipes auto-hébergées bénéficient de l'ensemble des fonctionnalités sans dépendance vis-à-vis d'un fournisseur. Le dépôt GitHub a dépassé les 25 900 étoiles à la mi-2026, avec plus de 2 000 forks et 1 637 commits de la part d'une communauté de contributeurs en pleine croissance.

Ce que fait réellement Onlook en juin 2026

Le mécanisme technique d'Onlook mérite d'être compris car c'est ce qui le distingue de tous les autres éditeurs visuels du marché. Au moment de la compilation, Onlook injecte des attributs data-oid dans votre JSX, créant ainsi une cartographie persistante entre chaque nœud DOM de votre application en cours d'exécution et la ligne exacte du code source qui l'a produit. Lorsqu'un designer déplace un composant, modifie une couleur ou redimensionne un conteneur dans le canevas visuel, l'outil utilise le streaming diff-match-patch combiné au HMR (hot module replacement) pour appliquer cette modification au fichier sur le disque. Il n'y a pas d'étape d'exportation. Il n'y a pas de copier-coller. Le code source reflète la modification visuelle en quelques secondes.

La couche de chat IA fonctionne via OpenRouter, ce qui signifie qu'Onlook peut router vers GPT-4o, Claude 3.5 Sonnet ou d'autres modèles selon la tâche. Contrairement à une intégration de chatbot générique, l'IA a le contexte de votre arborescence de composants réelle et peut effectuer des modifications ciblées sur des fichiers spécifiques. Vous pouvez demander « rends la section hero plus minimaliste » ou « réduis le padding sur mobile » et l'IA modifie le bon JSX, et non une approximation hallucinée de celui-ci.

Les fonctionnalités phares actuelles de la série de versions v0.2 : un panneau de calques pour naviguer dans la hiérarchie des composants, le glisser-déposer pour les modifications de mise en page, l'édition des propriétés CSS via des contrôles visuels (sélecteur de couleurs, espacement, typographie), la création de branches pour les expérimentations de design sans toucher à la branche principale, la collaboration multi-utilisateurs avec des commentaires en ligne, et la prise en charge des appels d'outils MCP pour les équipes qui étendent l'éditeur avec des intégrations personnalisées. Le niveau hébergé gratuit permet 200 appels MCP par jour avec des projets et un chat IA illimités.

"Un outil de design IA absolument incroyable !! J'utilise Onlook depuis quelques mois maintenant sur la version de bureau" - Michael Thiel, Product Hunt, août 2025

Où se situe Onlook par rapport à v0 de Vercel et Bolt.new

Ces trois outils sont souvent mentionnés dans la même phrase, mais ils résolvent des problèmes différents au niveau de l'architecture. Comprendre cette distinction permet d'éviter les frustrations.

v0 by Vercel génère des composants d'interface utilisateur à partir d'un prompt textuel ou d'une capture d'écran. Vous décrivez ce que vous voulez, v0 produit un code React et Shadcn propre, et vous le collez dans votre projet. Il n'y a pas de canevas visuel. Il n'y a aucune connexion à votre code source existant. Chaque génération v0 part d'une page blanche. v0 est optimisé pour la création de composants à partir de zéro, et non pour itérer sur une application en direct que vous avez déjà en cours d'exécution. Il produit du code que vous intégrez ; Onlook modifie du code qui existe déjà.

Bolt.new de StackBlitz échafaude des applications full-stack entières à partir d'un prompt, s'exécutant dans un WebContainer dans le navigateur avec un panneau d'éditeur de code intégré. Bolt gère le frontend, le backend et le schéma de base de données en une seule fois, ce qui le rend rapide pour le prototypage de nouvelles idées. Comme v0, il ne se connecte pas à un projet existant et n'offre pas de canevas visuel de type Figma pour l'édition par pointer-cliquer. Bolt.new est un générateur full-stack ; Onlook est une couche de design visuel pour un code source existant.

La différence mécanique : v0 et Bolt.new génèrent du nouveau code à partir de prompts. Onlook modifie le code existant via un canevas visuel qui reste synchronisé avec l'application en direct. Il s'agit d'un flux de travail fondamentalement différent, adapté à un moment différent du cycle de vie du produit : une fois l'application échafaudée et lorsque l'équipe a besoin d'itérer sur les visuels sans l'implication constante des développeurs.

Cursor est la comparaison la plus fréquemment mentionnée par les développeurs. Cursor est un fork de VS Code avec des suggestions en ligne et un chat IA, conçu pour les flux de travail de codage où le développeur écrit et révise le code. Onlook cible les designers qui n'ouvrent jamais d'éditeur de code. Les deux peuvent coexister dans le même projet : les développeurs utilisent Cursor pour la logique, les designers utilisent Onlook pour la mise en page visuelle.

À quoi ressemble la réalité du flux de travail d'édition visuelle

L'expérience pratique au quotidien dépend fortement de la version que vous utilisez. Le bac à sable web exécute le projet dans un conteneur cloud via le SDK CodeSandbox et Bun, ce qui signifie aucune configuration locale, mais aussi aucun mode hors ligne et une dépendance à l'infrastructure d'Onlook. L'application de bureau (disponible pour Mac et Windows) se connecte à un serveur de développement local, ce qui est plus rapide et fonctionne hors ligne, mais nécessite d'exécuter npm ou bun localement au préalable.

Pour une session typique d'itération sur une landing page : un designer ouvre le projet dans l'application web Onlook, voit le rendu Next.js en direct dans un canevas avec un panneau de calques sur la gauche, clique sur une section, la fait glisser vers une nouvelle position, puis utilise le sélecteur de couleurs pour ajuster le bouton CTA principal. Chaque clic produit un diff visible dans le fichier JSX sous-jacent. Le chat IA gère les tâches plus lourdes : « ajoute une grille de fonctionnalités à trois colonnes sous le hero » produit de nouveaux composants JSX en contexte, et non un extrait générique à copier ailleurs.

"Onlook est un excellent outil pour construire du code... il vous donne beaucoup de polyvalence pour travailler de la manière qui vous est la plus confortable" - Diana Fusther, Product Hunt, août 2025

La fonctionnalité de création de branches permet aux designers d'expérimenter sans s'engager sur l'arborescence de travail principale, de manière similaire aux branches Git, mais présentée comme une action en un clic dans l'interface utilisateur. C'est important pour les revues de design : un designer peut envoyer un lien de branche à un développeur, le développeur voit la modification visuelle à côté du diff, et la fusionne ou la rejette comme une PR standard. Le modèle de collaboration supprime la boucle design-ticket-PR qui ralentit de nombreuses équipes frontend.

Là où des frictions apparaissent : l'outil est en version alpha, et ce n'est pas un simple avertissement de courtoisie. Les renommages de fichiers peuvent désynchroniser la cartographie data-oid, rompant la reconnaissance de ce composant par la couche visuelle jusqu'à ce que vous relanciez l'étape de compilation. Les bibliothèques de composants en dehors du système standard de classes utilitaires Tailwind se comportent de manière imprévisible. Les équipes utilisant des frameworks autres que Next.js ne peuvent pas encore utiliser le produit du tout.

Pour qui Onlook est-il conçu

L'utilisateur principal est un designer qui maîtrise Figma mais ne souhaite pas apprendre le JSX. Il a besoin d'apporter des modifications visuelles à une application React en cours d'exécution, que ce soit pour une revue client, une itération rapide ou une échéance de livraison, sans avoir à créer un ticket et attendre un développeur. Onlook est spécialement conçu pour cette personne.

L'utilisateur secondaire est un développeur frontend qui souhaite réduire le nombre de fois où un designer le sollicite pour des modifications de padding et des ajustements de couleurs. En donnant aux designers un accès direct à la couche visuelle, le développeur reste concentré sur la logique des composants et les données, tandis que le designer gère le CSS et la mise en page.

Le troisième cas d'usage est le créateur solo sur un projet Next.js : un fondateur non-ingénieur qui construit sa propre landing page SaaS, itérant visuellement sans basculer entre un éditeur de code et une boucle d'actualisation du navigateur. Le chat IA couvre la génération de code plus lourde ; le canevas gère les ajustements fins.

Les équipes open-source et les entreprises ayant des exigences de conformité bénéficient de l'option auto-hébergée Apache 2.0. Exécuter Onlook sur votre propre infrastructure signifie que votre code source ne quitte jamais votre réseau, ce qui est important pour les secteurs réglementés. Figma AI et Lovable n'offrent pas d'options auto-hébergées comparables.

Ce que n'est pas Onlook

Onlook ne prend pas en charge les projets Vue, Svelte, Angular ou React pur sans TailwindCSS. Si votre stack n'inclut pas Next.js et Tailwind, Onlook ne se connectera pas à votre projet. C'est la source la plus courante d'attentes déçues et une véritable limitation pour les équipes utilisant d'autres frameworks.

Onlook n'est pas un outil d'échafaudage full-stack. Il ne générera pas de backend, ne configurera pas de base de données et ne câblera pas les flux d'authentification. Pour cela, utilisez Bolt.new ou Replit. Onlook intervient une fois l'architecture de l'application en place et gère la couche de design visuel à partir de là.

Onlook n'est pas stable pour la production de la même manière que Cursor ou GitHub Copilot. Le stade alpha est bien réel. Les équipes livrant des projets clients avec des délais serrés doivent tester la stabilité d'Onlook sur leur code source spécifique avant de s'y fier pour un cycle de publication. Le mécanisme d'injection data-oid fonctionne de manière fiable pour la plupart des projets, mais les cas particuliers concernant les monorepos, les configurations webpack personnalisées et les surcharges de bibliothèques de composants restent des problèmes ouverts documentés.

Ce n'est pas non plus un outil de prototypage à partir de zéro. Si vous n'avez pas de code source et que vous souhaitez générer une interface utilisateur fonctionnelle à partir d'une description, v0 ou Bolt.new vous mèneront plus loin et plus vite. La force d'Onlook réside dans l'édition et l'itération sur quelque chose qui fonctionne déjà.

"J'ai été vraiment impressionnée par son intuitivité, venant de l'utilisation de beaucoup d'autres outils populaires" - May Zhou, Product Hunt, août 2025