Onlook : Cursor open source pour la conception frontale, concevoir et publier du code dans les applications React.

Introduction générale

Onlook est un outil de conception open source construit pour les concepteurs et les développeurs qui permet aux utilisateurs de concevoir directement dans une application React en cours d'exécution et de convertir les modifications de conception en code. L'outil offre une expérience d'édition visuelle intuitive similaire à Figma ou Webflow, mais en mettant l'accent sur la manipulation native et l'intégration transparente du code.Onlook est conçu pour rationaliser le processus de conception au développement pour les projets dans les frameworks React et TailwindCSS. Il dispose d'une communauté de développeurs active qui est constamment mise à jour pour ajouter de nouvelles fonctionnalités et prendre en charge davantage de frameworks.

Liste des fonctions

• Modifications de la conception en temps réelModifiez l'interface utilisateur de votre application React directement dans le navigateur pour voir les résultats en temps réel.
• changement de codeLes tâches sont les suivantes : traduire les changements de conception en un code approprié et l'intégrer directement dans la base de code.
• Prise en charge de plusieurs cadresReact et TailwindCSS sont actuellement pris en charge, et il est prévu de les étendre à d'autres frameworks à l'avenir.
• opération localeLes services d'information et de communication de la Commission européenne : Toutes les opérations sont effectuées localement, ce qui permet de garantir la sécurité et la confidentialité des données.
• communauté open sourceLes avantages sont multiples : soutien et contributions de la communauté, mises à jour et améliorations constantes des fonctionnalités.

Utiliser l'aide

Installer Onlook

1. Télécharger Onlook: :
   • Visitez la page GitHub d'Onlook.
   • Cliquez sur le bouton "Code" dans le coin supérieur droit et sélectionnez "Télécharger ZIP" pour télécharger le code source, ou clonez directement le dépôt localement :

     git clone https://github.com/onlook-dev/onlook.git
     

2. Mise en place de l'environnement de développement: :
   • Assurez-vous que Node.js est installé (la dernière version stable est recommandée).
   • Accédez au répertoire cloné ou au dossier extrait :

     cd onlook
     

   • Installer la dépendance :

     npm install
     

   • S'il y a.env.exampleVeuillez copier et renommer.envRemplissez la clé de l'API si nécessaire.
3. Démarrer Onlook: :
   • Exécutez le serveur de développement :

     npm run dev
     

   • Ceci lancera Onlook, vous permettant de naviguer et de modifier localement.

Concevoir avec Onlook

1. Démarrer votre projet React: :
   • Assurez-vous que votre projet React est exécuté localement (par exemple, à l'aide de la commandenpm start).
2. Éléments de configuration: :
   • dans votrenext.config.mjspeut-êtrenext.config.jsAjoutez le plugin Onlook au

     import path from "path";
     const nextConfig = {
     experimental: {
     swcPlugins: [
     ["@onlook/nextjs", { projectRoot: path.resolve(".") }]
     ]
     }
     };
     export default nextConfig;
     

   • Si vous utilisez un autre cadre, consultez la documentation d'Onlook pour obtenir des instructions de configuration spécifiques.
3. Édition avec Onlook: :
   • Ouvrez l'application Onlook et elle reconnaîtra et chargera votre projet React.
   • Vous pouvez modifier l'interface utilisateur en cliquant, en glissant et en déposant, comme vous le feriez avec les outils de développement de Chrome.
   • Utilisez le menu contextuel pour sélectionner un élément afin d'afficher ou de modifier l'emplacement de son code.
4. Changements d'affectation: :
   • Une fois que vous avez effectué vos modifications de conception, cliquez sur le bouton "Publier" et Onlook générera une demande d'extraction pour pousser le code modifié vers votre dépôt GitHub.

Détails opérationnels

• Hiérarchie de navigationPanneau des calques : Utilisez le panneau des calques pour sélectionner, masquer ou développer les différents calques de votre projet.
• Rédacteur en chefLes fonctions suivantes sont disponibles : Ajustez les couleurs, les polices, les mises en page, etc. et visualisez les changements directement dans votre navigateur.
• Fonctionnement des composantsCapacité de copier, coller, déplacer et supprimer des composants, prise en charge des opérations de multisélection.
• Prise en charge des touches de raccourciPour faire défiler une page, utilisez les touches CMD+Option pour passer rapidement en mode interactif.

mise en garde

• compatibilité des versionsPour ce faire, vous devez vous assurer que votre version de React correspond à la version prise en charge par Onlook.
• mise à jourLes utilisateurs d'Onlook sont invités à consulter régulièrement les mises à jour afin de bénéficier des dernières fonctionnalités et des dernières corrections.
• Participation de la communauté: Rejoignez la communauté d'Onlook pour participer aux discussions, signaler des problèmes ou contribuer au code.

Avec ces étapes, vous pouvez utiliser couramment Onlook pour stimuler la productivité de la conception et du développement, concevoir directement dans vos applications React, et convertir de manière transparente les conceptions en code maintenable.