Cursor pour Designers – Un Éditeur de Code Open-Source Orienté Visuel

Créez des sites web, prototypes et designs avec IA dans Next.js + TailwindCSS. Effectuez des modifications directement dans le DOM du navigateur avec un éditeur visuel. Conception en temps réel avec du code. Une alternative open-source à Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow, etc.

🚧 🚧 🚧 Onlook pour le Web est encore en développement 🚧 🚧 🚧

Nous recherchons activement des contributeurs pour aider à faire d'Onlook pour le Web une expérience incroyable de création par prompt. Consultez les problèmes ouverts pour une liste complète des fonctionnalités proposées (et des problèmes connus), et rejoignez notre Discord pour collaborer avec des centaines d'autres créateurs.

Ce que vous pouvez faire avec Onlook :

Onlook-GitHub-Example

Onlook pour Desktop (alias Onlook Alpha)

Nous sommes en phase de prévisualisation précoce pour Onlook Web. Si vous recherchez l'application de bureau électronique téléchargeable, elle a été déplacée vers Onlook Desktop.

Pourquoi passons-nous au web ? Lisez notre décision : Migration d'Electron vers le Web

Premiers Pas

Disponible bientôt avec une application hébergée ou exécution locale.

Utilisation

Onlook fonctionne avec n'importe quel projet Next.js + TailwindCSS, importez votre projet dans Onlook ou commencez à partir de zéro dans l'éditeur.

Utilisez le chat IA pour créer ou modifier un projet sur lequel vous travaillez. À tout moment, vous pouvez faire un clic droit sur un élément pour ouvrir l'emplacement exact de l'élément dans le code.

Dessinez de nouveaux divs et réorganisez-les dans leurs conteneurs parents par glisser-déposer.

Prévisualisez le code côte à côte avec votre conception de site.

Utilisez la barre d'outils de l'éditeur d'Onlook pour ajuster les styles Tailwind, manipuler directement les objets et expérimenter avec les mises en page.

Documentation

Pour la documentation complète, visitez docs.onlook.com

Pour voir comment contribuer, consultez Contribuer à Onlook dans notre documentation.

Fonctionnement

Lorsque vous créez une application, nous chargeons le code dans un conteneur web
Le conteneur exécute et sert le code
Notre éditeur reçoit le lien de prévisualisation et l'affiche dans un iFrame
Notre éditeur lit et indexe le code depuis le conteneur
Nous instrumentons le code pour mapper les éléments à leur emplacement dans le code
Lorsque l'élément est édité, nous modifions l'élément dans notre iFrame, puis dans le code
Notre chat IA a également accès au code et aux outils pour comprendre et éditer le code

Cette architecture peut théoriquement s'adapter à n'importe quel langage ou framework qui affiche des éléments DOM de manière déclarative (par exemple jsx/tsx/html). Nous nous concentrons pour l'instant sur son bon fonctionnement avec Next.js et TailwindCSS.

Pour une explication complète, consultez notre Documentation d'Architecture.