Entre une maquette et un site en production, il y a presque toujours une étape de traduction : le designer dessine, le développeur reconstruit, et quelques détails se perdent en chemin. Les générateurs d’applications par IA accélèrent la production d’écrans, mais ils livrent souvent un prototype à part, déconnecté du code que votre équipe maintient déjà.
C’est cet écart que cherche à réduire Onlook. Attention toutefois : l’outil a changé de forme depuis ses débuts. D’abord éditeur visuel open source pour React/Next.js et Tailwind, il se présente, dans sa documentation, comme une application Mac gratuite, en bêta, destinée aux designers. Voici l’état des lieux tel qu’il ressort des sources officielles.
Onlook, c’est quoi ?
D’après la documentation du site officiel d’Onlook, il s’agit d’une application pour Mac qui fait tourner le vrai code de votre équipe sur un canevas. Chaque cadre affiché est une page fonctionnelle, pas une image. Quand vous demandez une modification dans le chat, un agent IA modifie le code ; le résultat est ensuite transmis aux ingénieurs sous forme de pull request GitHub.
Le public visé est celui des « Visual Engineers » : des designers qui façonnent le produit directement dans son code, en lien avec des développeurs qui relisent les changements.
Un produit qui a changé de forme
- Dans leur message « Show HN » de mai 2025, les fondateurs expliquent avoir lancé Onlook comme application Electron locale, puis l’avoir réécrite pour le navigateur.
- Le README du dépôt GitHub onlook-dev/onlook décrit ce code comme l’éditeur open source à l’origine d’Onlook (Next.js et Tailwind), et renvoie vers une liste d’attente pour le produit hébergé suivant.
- La documentation décrit une application de bureau pour Mac, dont le code source doit être ouvert « dans les prochaines semaines ».
- La dernière release GitHub (v0.2.32) date de juillet 2025 ; le dernier commit observé sur la branche principale date du 22 juillet 2026.
Les fonctionnalités clés d’Onlook
Un canevas où chaque cadre est l’application
Vous choisissez un dossier de code ; Onlook installe les dépendances, démarre l’application avec les commandes du projet et l’affiche dans un cadre. Le mode Design (touche D) sert à sélectionner et modifier, le mode Preview (touche P) à naviguer comme un visiteur.
Pour cibler un élément, il suffit de cliquer dessus puis de formuler la demande dans la zone qui apparaît à côté. Le site officiel évoque aussi des variantes sur le canevas, la gestion visuelle des tokens et composants, et le dépôt de moodboards pour orienter l’agent.
Un agent IA branché sur votre propre compte
L’agent est Claude Code ou ChatGPT, utilisé avec l’abonnement que vous possédez déjà ; Claude fonctionne aussi avec une clé API Anthropic. Le site présente OpenCode et d’autres options comme « bientôt disponibles ».
Avec Claude, quatre modes de permission existent : Auto (par défaut), Ask, Accept edits et Plan. Dans tous les modes, l’agent demande votre accord avant de pousser sur GitHub, de créer ou fusionner une pull request, ou de faire un force-push. Avec ChatGPT, l’agent tourne en « Full access », réglage non modifiable, dans la copie de travail.
Artefacts et passage de relais
Les artefacts sont des pages esquissées sur le canevas sans toucher au code : idée de page d’accueil, nouvel écran, variantes. Ils s’exportent en HTML (un seul fichier, jusqu’à 20 Mo) ou en PDF, et n’ont pas d’historique de versions.
Pour la transmission, une pastille dans la barre du haut indique l’étape suivante (Create PR, Upload Changes, Fix Checks, Resolve Conflicts, Ready to Merge) et déclenche l’action correspondante par l’intermédiaire de l’agent.
Une copie de travail, pas votre dossier
Onlook ne modifie pas le dossier choisi : il crée une copie (un git worktree) sur une branche dédiée. Selon la documentation, les fichiers du projet ne passent pas par les serveurs d’Onlook ; seul le contexte nécessaire part vers Claude ou ChatGPT, sous votre compte. Des événements d’usage (sans code, chemins de fichiers ni prompts) sont en revanche transmis à Onlook et rattachés à votre adresse e-mail.
Comment démarrer avec Onlook
Le parcours décrit dans la documentation officielle tient en quelques étapes :
- Vérifiez les prérequis : un Mac Apple silicon (M1 ou plus récent), un compte Claude ou ChatGPT, et les outils dont votre application a besoin (Node.js, par exemple).
- Téléchargez Onlook depuis la page d’installation du site, glissez-le dans le dossier Applications, ouvrez-le et connectez-vous avec votre adresse e-mail.
- Connectez Claude ou ChatGPT, puis choisissez le dossier de votre code ; un clone du dépôt GitHub de l’équipe est recommandé.
- Demandez un changement visible dans le chat, puis vérifiez le résultat dans le cadre.
Si macOS propose d’installer les outils de développement (nécessaires à git), la documentation précise de choisir « Install » et non « Get Xcode ». Windows, Linux et les Mac Intel ne sont pas pris en charge pour l’instant ; une liste d’attente existe.
Prix et licence
La FAQ officielle indique qu’Onlook est gratuit et ne facture pas l’usage de l’IA, qui passe par votre abonnement Claude ou ChatGPT : le coût éventuel dépend donc de ce compte. La page de tarifs ne mentionne qu’une offre « For Teams » sur devis, et renvoie vers un contact ou une démo pour la version cloud hébergée. Ces tarifs peuvent évoluer : vérifiez la page officielle.
Le dépôt GitHub historique est sous licence Apache 2.0 et affiche environ 27 000 étoiles. Le code de la nouvelle application Mac, lui, n’est pas encore publié selon la documentation.
Pour qui ?
- Les équipes produit où designers et développeurs partagent une application React, Next.js ou Vite, relue via GitHub.
- Les designers prêts à manipuler des branches et des pull requests, avec l’aide de l’agent.
À l’inverse, la documentation ne mentionne pas WordPress : pour un thème PHP ou un site construit avec Elementor, rien n’indique qu’Onlook soit adapté.
Onlook face aux alternatives
Les outils de type Lovable ou Bolt.new partent d’un prompt pour bâtir une application neuve. La FAQ d’Onlook revendique l’approche inverse : partir du code existant de l’équipe, avec ses composants et ses styles, puis passer par une pull request. C’est le positionnement affiché par l’éditeur.
Face à un éditeur de code assisté par IA comme Cursor, la différence tient à l’interface : Onlook propose un canevas visuel. Les fondateurs ont eux-mêmes présenté leur projet comme un « Cursor pour les designers ».
Limites et points d’attention
- Bêta : la documentation prévient que les choses évoluent vite et que certaines fonctions sont marquées « Coming soon ».
- Plateforme : Mac Apple silicon uniquement ; les applications qui ne tournent que dans un conteneur ne s’affichent pas encore sur le canevas.
- Messages à recouper : le README du dépôt parle d’un accès anticipé via liste d’attente, alors que la documentation propose un téléchargement. Vérifiez avant de planifier un usage en équipe.
- Code source : celui de l’application Mac n’est pas encore ouvert.
- Recul : nous ne l’avons pas testé nous-mêmes. Cet article s’appuie sur la documentation, le dépôt GitHub et la discussion Hacker News de mai 2025 (408 points, 81 commentaires), qui portait sur l’ancienne version web. Nous n’avons pas trouvé de test indépendant de l’application Mac.
En résumé
Onlook n’est plus tout à fait l’éditeur open source de ses débuts : c’est désormais une application Mac en bêta, gratuite d’après sa documentation, qui fait travailler un agent IA sur le vrai code de votre équipe et livre le résultat sous forme de pull request.
Si vos designers et vos développeurs partagent une base React ou Next.js, Onlook mérite un essai encadré, sur une copie du projet. Pour un site WordPress ou une équipe sous Windows, il ne correspond pas, en l’état, à ce que décrit sa documentation.
