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

Créez des sites web, prototypes et designs avec l'IA en 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 :

• Créer une application Next.js en quelques secondes
  • Commencer à partir de texte ou d'image
  • Utiliser des modèles prédéfinis
  • Importer depuis Figma
  • Commencer à partir d'un dépôt GitHub
• Éditer visuellement votre application
  • Interface utilisateur similaire à Figma
  • Prévisualiser votre application en temps réel
  • Gérer les ressources et tokens de marque
  • Créer et naviguer vers des Pages
  • Parcourir les calques – Précédemment dans Onlook Desktop
  • Détecter et utiliser des Composants – Précédemment dans Onlook Desktop
  • Gérer les Images du projet – Précédemment dans Onlook Desktop
• Outils de développement
  • Éditeur de code en temps réel
  • Sauvegarder et restaurer à partir de points de contrôle
  • Exécuter des commandes via CLI
  • Se connecter au marketplace d'applications
  • Éditer le code localement – Précédemment dans Onlook Desktop
• Déployer votre application en quelques secondes
  • Générer des liens partageables
  • Lier votre domaine personnalisé
• Collaborer avec votre équipe
  • Édition en temps réel
  • Laisser des commentaires

Onlook pour Desktop (alias Onlook Alpha)

Nous sommes en phase de prévisualisation précoce pour Onlook Web. Si vous recherchez l'application desktop electron 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 prochainement avec une application hébergée ou en exécution locale.

Utilisation

Onlook fonctionne avec tout 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 son emplacement exact dans le code.

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

Visualisez votre code côte à côte avec la conception de votre site.

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

Documentation

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

Pour savoir comment contribuer, visitez Contributing to Onlook dans notre documentation.

Fonctionnement

1. Lorsque vous créez une application, nous chargeons le code dans un conteneur web
2. Le conteneur s'exécute et sert le code
3. Notre éditeur reçoit le lien de prévisualisation et l'affiche dans un iFrame
4. Notre éditeur lit et indexe le code depuis le conteneur
5. Nous instrumentons le code pour mapper les éléments à leur emplacement dans le code
6. Lorsqu'un élément est modifié, nous l'éditons dans notre iFrame, puis dans le code
7. Notre chat IA a également accès au code et dispose d'outils pour comprendre et modifier 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 actuellement sur son bon fonctionnement avec Next.js et TailwindCSS.

Pour une explication détaillée, consultez notre Architecture Docs.

Notre pile technologique

Front-end

• Next.js - Full stack
• TailwindCSS - Styling
• tRPC - Interface serveur

Base de données

• Supabase - Authentification, Base de données, Stockage
• Drizzle - ORM

IA

• AI SDK - Client LLM
• Anthropic - Fournisseur de modèle LLM
• Morph Fast Apply - Fournisseur de modèle Fast Apply
• Relace - Fournisseur de modèle Fast Apply

Sandbox et hébergement

• CodeSandboxSDK - Sandbox de développement
• Freestyle - Hébergement

Runtime

• Bun - Monorepo, runtime, bundler
• Docker - Gestion de conteneurs

Contribution

Si vous avez une suggestion pour améliorer ce projet, n'hésitez pas à forker le dépôt et à créer une pull request. Vous pouvez également ouvrir des issues.

Consultez le fichier CONTRIBUTING.md pour les instructions et le code de conduite.

Contributeurs

Contact

• Équipe : Discord - Twitter - LinkedIn - Email
• Projet : https://github.com/onlook-dev/onlook
• Site web : https://onlook.com

Licence

Distribué sous licence Apache 2.0. Voir LICENSE.md pour plus d'informations.