Onlook : Le Curseur pour Designers

Qu'est-ce qu'Onlook

Onlook est un éditeur de code open-source, orienté visuel, conçu pour les designers, décrit comme "Le Curseur pour Designers". Il permet aux utilisateurs de créer des sites web, des prototypes et des designs avec l'IA dans des environnements Next.js + TailwindCSS. Les utilisateurs peuvent effectuer des modifications directement dans le DOM du navigateur avec un éditeur visuel et concevoir en temps réel avec du code. Il sert d'alternative open-source à des plateformes comme Bolt.new, Lovable, V0, Replit Agent, Figma Make et Webflow.

Fonctionnalités principales

• Créer et gérer des applications Next.js
• Commencer à partir de descriptions textuelles ou d'images
• Utiliser des modèles préconçus
• Importer depuis Figma

• Démarrer à partir de dépôts GitHub

• Outils d'édition visuelle

• Interface utilisateur similaire à Figma
• Aperçus d'application en temps réel
• Gestion des actifs et tokens de marque
• Création et navigation de pages
• Navigation des calques
• Détection et utilisation de composants

• Gestion d'images

• Outils de développement

• Éditeur de code en temps réel
• Sauvegarde et restauration de points de contrôle
• Interface en ligne de commande
• Intégration avec la place de marché d'applications

• Édition de code local

• Déploiement et collaboration

• Déploiement en un clic
• Génération de liens partageables
• Intégration de domaines personnalisés
• Édition collaborative en temps réel
• Fonctionnalité de commentaires

Comment utiliser Onlook

Onlook fonctionne avec n'importe quel projet Next.js + TailwindCSS. Les utilisateurs peuvent :

1. Importer un projet existant ou commencer de zéro dans l'éditeur
2. Utiliser le chat IA pour créer ou modifier des projets
3. Faire un clic droit sur les éléments pour les localiser dans le code
4. Dessiner de nouveaux divs et les réorganiser par glisser-déposer
5. Prévisualiser le code côte à côte avec le design du site
6. Utiliser la barre d'outils de l'éditeur pour ajuster les styles Tailwind et manipuler les objets

Architecture technique

Lors de la création d'une application dans Onlook : 1. Le code est chargé dans un conteneur web 2. Le conteneur exécute et sert le code 3. L'éditeur reçoit et affiche le lien de prévisualisation dans un iFrame 4. Le code est lu et indexé depuis le conteneur 5. L'instrumentation du code mappe les éléments à leur position dans le code 6. Lorsque des éléments sont modifiés, les changements s'appliquent à la fois à l'iFrame et au code 7. Le chat IA a accès au code et aux outils pour comprendre et modifier le code

Stack technologique

• Front-end : Next.js, TailwindCSS, tRPC
• Base de données : Supabase, Drizzle
• IA : AI SDK, Anthropic, Morph Fast Apply, Relace
• Bac à sable et hébergement : CodeSandboxSDK, Freestyle
• Environnement d'exécution : Bun, Docker

Public cible

• Designers web à la recherche d'outils de conception visuelle avec des capacités de codage
• Développeurs qui préfèrent l'édition visuelle aux côtés du code
• Designers UI/UX en transition vers le développement
• Équipes collaborant sur des projets web
• Utilisateurs de plateformes comme Webflow, Figma ou d'outils de conception similaires

Liens du projet

• Site web : https://onlook.com
• Dépôt : https://github.com/onlook-dev/onlook
• Documentation : https://docs.onlook.com

Cas d'utilisation et applications

• Prototypage rapide : Créer et visualiser rapidement des designs web
• Du design au code : Transformer des maquettes de design en code fonctionnel
• Édition visuelle : Apporter des modifications aux sites web avec une interface visuelle
• Développement collaboratif : Travailler sur des projets web en équipe avec édition en temps réel
• Développement assisté par IA : Utiliser l'IA pour générer et modifier des composants de site web
• Objectifs pédagogiques : Apprendre le développement web via une interface visuelle
• Présentations client : Créer et partager des prototypes interactifs avec les clients

Le projet est actuellement en transition d'une application Electron pour bureau vers une application web pour améliorer l'accessibilité et l'ensemble des fonctionnalités.