Onlook: Cursor de código abierto para el diseño front-end, diseñar y publicar código en aplicaciones React.

Introducción general

Onlook es una herramienta de diseño de código abierto creada para diseñadores y desarrolladores que permite a los usuarios diseñar directamente en una aplicación React en ejecución y convertir los cambios de diseño en código. La herramienta proporciona una experiencia de edición visual intuitiva similar a Figma o Webflow, pero con un enfoque en la manipulación nativa y la integración de código sin fisuras.Onlook está diseñado para agilizar el proceso de diseño a desarrollo para proyectos en los marcos React y TailwindCSS. Cuenta con una activa comunidad de desarrolladores que se actualiza constantemente para añadir nuevas funciones y dar soporte a más frameworks.

Lista de funciones

• Modificaciones de diseño en tiempo realModifica la interfaz de usuario de tu aplicación React directamente en el navegador para ver los resultados en tiempo real.
• cambio de códigoTraducir los cambios de diseño en código apropiado e introducirlo directamente en la base de código.
• Compatible con varios marcosReact y TailwindCSS están actualmente soportados, con planes de expansión a más frameworks en el futuro.
• funcionamiento localTodas las operaciones se realizan localmente, lo que garantiza la seguridad y privacidad de los datos.
• comunidad de código abierto: Gran apoyo y contribuciones de la comunidad, actualizaciones y mejoras continuas de las funciones.

Utilizar la ayuda

Instalar Onlook

1. Descargar Onlook::
   • Visita la página GitHub de Onlook.
   • Haga clic en el botón "Código" de la esquina superior derecha y seleccione "Descargar ZIP" para descargar el código fuente, o clone directamente el repositorio de forma local:

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

2. Configuración del entorno de desarrollo::
   • Asegúrate de tener instalado Node.js (se recomienda la última versión estable).
   • Vaya al directorio clonado o a la carpeta extraída:

     cd onlook
     

   • Instale la dependencia:

     npm install
     

   • Si hay.env.exampleCopie y cambie el nombre.envRellene la clave API según sea necesario.
3. Empezar a mirar::
   • Ejecute el servidor de desarrollo:

     npm run dev
     

   • Esto iniciará Onlook, permitiéndote navegar y editar localmente.

Diseñar con Onlook

1. Inicio del proyecto React::
   • Asegúrese de que su proyecto React se ejecuta localmente (p. ej., utilizando el archivonpm start).
2. Elementos de configuración::
   • en sunext.config.mjstal veznext.config.jsAñade el plugin Onlook a la carpeta

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

   • Si utiliza otro marco de trabajo, consulte la documentación de Onlook para obtener directrices de configuración específicas.
3. Edición con Onlook::
   • Abre la aplicación Onlook y reconocerá y cargará tu proyecto React.
   • Puedes editar la interfaz de usuario haciendo clic, arrastrando y soltando como lo harías con las Herramientas para desarrolladores de Chrome.
   • Utilice el menú contextual para seleccionar un elemento y ver o editar su ubicación en el código.
4. Cambios en la contabilización::
   • Una vez que hayas realizado los cambios de diseño, haz clic en el botón "Publicar" y Onlook generará una Pull Request para enviar el código modificado a tu repositorio de GitHub.

Detalles operativos

• Jerarquía de navegaciónCapas: Utilice el panel Capas para seleccionar, ocultar o expandir las distintas capas de su proyecto.
• Editor de estiloAjusta colores, fuentes, diseños, etc. y observa los cambios directamente en tu navegador.
• Funcionamiento de los componentesCapacidad para copiar, pegar, mover y eliminar componentes, admite operaciones de selección múltiple.
• Compatibilidad con teclas de acceso rápidoPara desplazarse por una página, utilice CMD+Opción para cambiar rápidamente al modo interactivo.

advertencia

• compatibilidad de versionesAsegúrate de que tu versión de React coincide con la versión soportada por Onlook.
• actualizaciónComprueba regularmente si hay actualizaciones de Onlook para ver las últimas funciones y correcciones.
• Participación comunitariaÚnete a la comunidad de Onlook para participar en debates, informar de problemas o contribuir con código.

Con estos pasos, podrás utilizar Onlook con fluidez para impulsar la productividad del diseño y el desarrollo, diseñar directamente en tus aplicaciones React y convertir sin problemas los diseños en código mantenible.