Repolode
Enviar
onlook-dev

onlook-dev/onlook

Editor visual de código de código abierto para diseñar y editar proyectos de Next.js + Tailwind CSS en el navegador con ayuda de IA.

Alternativa open source a:FigmaWebflowLovable

Ver en GitHubSitio web
Estrellas
26,962
Forks
2,792
Issues abiertos
382
Último commit
hace 2 meses

¿Qué es?

Onlook es un editor visual de código para crear sitios web e interfaces con Next.js y Tailwind CSS. En lugar de editar solo en un editor de código, puedes seleccionar y modificar elementos en una vista previa activa de la aplicación, y esos cambios se reflejan en el código fuente. También puedes crear o modificar el proyecto mediante un chat con IA.

El editor carga el proyecto en un contenedor web, muestra la vista previa en ejecución dentro de un iframe e indexa el código para relacionar cada elemento con su ubicación en el código fuente. Al hacer clic derecho en un elemento, se salta a su línea de código, y una vista del código en paralelo se mantiene sincronizada con el diseño. Los usuarios pueden dibujar y reorganizar divs, ajustar estilos de Tailwind desde una barra de herramientas, guardar puntos de control y publicar enlaces para compartir.

Por ahora, el proyecto solo está dirigido a Next.js y Tailwind; el soporte para otros frameworks figura como una función prevista. El README también indica que el equipo está creando un producto alojado para diseñadores que integran la IA en su trabajo, disponible mediante una lista de espera.

Funciones clave

  • 01Edita elementos directamente en una vista previa activa del navegador y refleja los cambios en el código.
  • 02Haz clic derecho en un elemento para saltar a su ubicación en el código fuente.
  • 03Usa un chat con IA para crear o editar el proyecto.
  • 04Ajusta estilos y diseños de Tailwind desde una barra de herramientas visual.
  • 05Guarda y restaura puntos de control, y genera enlaces de despliegue para compartir.

Casos de uso

  • Crear prototipos de páginas de inicio o sitios de marketing en un proyecto de Next.js y Tailwind.
  • Permitir que los diseñadores hagan ajustes visuales que se conviertan en código real y revisable.
  • Explorar variaciones de diseño con IA antes de confirmar los cambios.

Inicio rápido

  1. 1

    Usa la aplicación alojada en onlook.com

  2. 2

    O consulta la guía para ejecutarla localmente en la documentación

Antes de usarlo

  • Solo admite proyectos de Next.js y Tailwind CSS; todavía no admite otros frameworks.
  • El producto alojado está en acceso anticipado y requiere unirse a una lista de espera.
  • Las instrucciones para ejecutarlo localmente están en la documentación, no en el README.

Temas

#visual-editor#design-to-code#nextjs#tailwindcss#react#ai#typescript#claude-code#codex#cursor

Preguntas frecuentes

¿Qué es onlook?
Editor visual de código de código abierto para diseñar y editar proyectos de Next.js + Tailwind CSS en el navegador con ayuda de IA. Onlook es un editor visual de código para crear sitios web e interfaces con Next.js y Tailwind CSS. En lugar de editar solo en un editor de código, puedes seleccionar y modificar elementos en una vista previa activa de la aplicación, y esos cambios se reflejan en el código fuente. También puedes crear o modificar el proyecto mediante un chat con IA.
¿onlook es gratuito? ¿Qué licencia tiene?
onlook es open source bajo la licencia Apache-2.0. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿onlook sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de onlook fue el 25 ago 2026.
¿Para qué puedo usar onlook?
Crear prototipos de páginas de inicio o sitios de marketing en un proyecto de Next.js y Tailwind. Permitir que los diseñadores hagan ajustes visuales que se conviertan en código real y revisable. Explorar variaciones de diseño con IA antes de confirmar los cambios.
¿Cómo se instala onlook?
Usa la aplicación alojada en onlook.com O consulta la guía para ejecutarla localmente en la documentación
¿Dónde consigo onlook?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/onlook-dev/onlook

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados