Si alguna vez abriste Figma, diseñaste el componente perfecto, se lo pasaste a un desarrollador y lo viste transformarse en algo completamente distinto en código — Onlook fue construido exactamente para esa frustración.
Onlook es un editor visual open-source con IA integrada que te permite diseñar directamente dentro de tu aplicación React en ejecución. Hacés click en un elemento, lo arrastrás, cambiás sus colores, agregás un nuevo div — y tus archivos .tsx reales se actualizan en tiempo real. Sin exports de Figma. Sin documentos de handoff. Sin conversaciones del tipo “¿podés mover el botón un poco más a la izquierda?”.
Con 25.1K estrellas en GitHub y en tendencia ahora mismo, vale entender qué hace realmente.
Cómo funciona Onlook
Onlook corre en cualquier proyecto Next.js + TailwindCSS. Al abrir tu proyecto, levanta tu app dentro de un web container (usando el CodeSandbox SDK + runtime Bun) e instrumenta el HTML renderizado con atributos especiales data-oid en tiempo de build. Cada atributo mapea un elemento DOM visible de vuelta a su línea exacta de código JSX fuente.
Cuando editás algo visualmente — arrastrás una card, cambiás un color, redimensionás una sección — Onlook usa el oid para ubicar el JSX correcto, lo parchea y dispara un hot module reload. Ves el cambio en el canvas y en tu árbol de archivos simultáneamente.
La capa de IA usa Morph Fast-Apply + OpenRouter para streamear ediciones de código vía diff. Podés describir cambios en lenguaje natural:
“Make this hero section darker on hover”
Y Onlook genera el diff de React + Tailwind, lo aplica y muestra el resultado — sin que toqués una sola línea de código manualmente.
Qué podés hacer visualmente
- Drag-and-drop de elementos y reorganizarlos dentro de sus contenedores padre
- Dibujar nuevos divs directamente en el canvas
- Ajustar estilos Tailwind desde la barra del editor (colores, espaciado, tipografía)
- Extraer componentes — click derecho en cualquier elemento y Onlook crea un archivo
.tsxreutilizable, reemplazando el JSX inline con el nuevo componente - Navegar el árbol de componentes a través de un panel de capas visual — sin más búsquedas a mano en el JSX
- Rollback en cualquier momento — Onlook guarda snapshots automáticos del proyecto para que puedas experimentar con confianza
- Preview del código en paralelo con tu canvas visual
El chat con IA
Más allá de la edición visual, Onlook tiene un chat de IA que entiende tus componentes React y tus patrones de Tailwind. Podés promtearlo para construir desde cero:
“Design me an inventory tracker website for my café”
La IA genera código que encaja en la arquitectura existente de tu proyecto — no boilerplate genérico que después tenés que refactorizar.
Self-hosted vs hosted
Onlook es open source (Apache 2.0) y gratis para self-hostear. También hay versión cloud hospedada — útil si no querés ocuparte del setup.
Un dato honesto: el plan gratuito te limita a 5 mensajes de IA. No es mucho para trabajo de diseño iterativo. Si lo vas a usar en serio, el self-hosting es el camino práctico — aunque incluso así, las features de IA siguen enrutando por servicios cloud.
¿Para quién es?
Onlook ocupa un lugar interesante en el medio. No reemplaza a Cursor ni a Claude Code para lógica compleja, integraciones de API o trabajo de backend. Pensalo como la herramienta que abrís cuando la arquitectura ya está en su lugar y necesitás que la UI quede bien — rápido, visualmente, sin saltar entre el browser y el editor de código.
Es especialmente útil para:
- Diseñadores que codean (o que quieren hacerlo)
- Desarrolladores frontend que piensan visualmente
- Equipos donde diseñadores y desarrolladores necesitan colaborar directamente en el mismo codebase
En términos de posicionamiento, Onlook compite con Figma Make, Bolt.new, Lovable, V0 y Webflow — pero con una diferencia clave: trabajás directamente en tu proyecto real, no en un sandbox. Tu proceso de build existente queda intacto.
Cómo empezar
# Opción 1: Usá la app hospedada en onlook.com
# Opción 2: Self-host
git clone https://github.com/onlook-dev/onlook
# Ver docs.onlook.com/contributing/developers/running-locally
Una vez corriendo, importás tu proyecto Next.js + Tailwind existente o arrancás desde cero dentro del editor.
Onlook es de esas herramientas difíciles de explicar solo con palabras — tenés que ver el mapeo DOM-a-fuente en acción para entender por qué la experiencia es diferente. Si tu stack es React + Tailwind, vale 20 minutos.