Onlook

Onlook es un editor visual de código abierto, impulsado por IA, creado para aplicaciones React. Fundado en 2024 por el diseñador Daniel Farrell y el ingeniero Kiet Ho (ex-Amazon, ex-ServiceNow), el equipo de San Francisco ingresó al lote de invierno de 2025 de Y Combinator con un problema claro que resolver: la dolorosa brecha de transferencia (handoff) entre los prototipos de Figma y el código React en producción. En lugar de ser una herramienta de diseño que exporta recursos, o un generador de código que produce archivos para pegar a mano, Onlook permite a los diseñadores manipular una aplicación Next.js en ejecución dentro de un lienzo visual, mientras las ediciones se escriben en los archivos JSX reales en el disco, en tiempo real.

La herramienta funciona en cualquier proyecto de Next.js y TailwindCSS. Sus capacidades principales incluyen un panel de capas de arrastrar y soltar al estilo Figma, una interfaz de chat con IA que comprende tu árbol de componentes existente, control de ramas y versiones para la experimentación de diseño, comentarios multiusuario y la integración MCP (Model Context Protocol) para extender la cadena de herramientas. Tanto la aplicación de escritorio como el entorno de pruebas web (sandbox) ejecutan el mismo núcleo de código abierto, bajo licencia Apache 2.0, por lo que los equipos que optan por el autoalojamiento obtienen el conjunto completo de funciones sin depender de un proveedor. El repositorio de GitHub superó las 25,900 estrellas a mediados de 2026, con más de 2,000 bifurcaciones (forks) y 1,637 commits de una creciente comunidad de colaboradores.

Lo que Onlook realmente hace en junio de 2026

Vale la pena entender el mecanismo técnico de Onlook porque es lo que lo separa de cualquier otro editor visual en el mercado. En el momento de la compilación, Onlook inyecta atributos data-oid en tu JSX, creando un mapa persistente entre cada nodo del DOM en tu aplicación en ejecución y la línea exacta de código fuente que lo produjo. Cuando un diseñador mueve un componente, cambia un color o redimensiona un contenedor en el lienzo visual, la herramienta utiliza la transmisión diff-match-patch combinada con HMR (reemplazo de módulos en caliente) para aplicar ese cambio al archivo en el disco. No hay paso de exportación. No hay que copiar y pegar. El código base refleja la edición visual en cuestión de segundos.

La capa de chat con IA funciona a través de OpenRouter, lo que significa que Onlook puede enrutar a GPT-4o, Claude 3.5 Sonnet u otros modelos dependiendo de la tarea. A diferencia de una integración de chatbot genérica, la IA tiene contexto sobre tu árbol de componentes real y puede realizar ediciones precisas en archivos específicos. Puedes pedir "haz que la sección hero sea más minimalista" o "reduce el padding en móviles" y la IA edita el JSX correcto, no una aproximación alucinada del mismo.

Las características destacadas actuales en la serie de lanzamientos v0.2 incluyen: un panel de capas para navegar por la jerarquía de componentes, arrastrar y soltar para cambios de diseño, edición de propiedades CSS mediante controles visuales (selector de color, espaciado, tipografía), creación de ramas para experimentos de diseño sin tocar la rama principal, colaboración multiusuario con comentarios en línea y soporte de llamadas a herramientas MCP para equipos que extienden el editor con integraciones personalizadas. El nivel gratuito alojado permite 200 llamadas MCP por día con proyectos ilimitados y chat con IA.

"¡Una herramienta de diseño con IA absolutamente increíble! He usado Onlook durante unos meses en la versión de escritorio" - Michael Thiel, Product Hunt, agosto de 2025

Dónde se sitúa Onlook frente a v0 de Vercel y Bolt.new

Estas tres herramientas se mencionan a menudo en la misma frase, pero resuelven problemas diferentes a nivel de arquitectura. Entender la distinción evita frustraciones.

v0 de Vercel genera componentes de interfaz de usuario a partir de una indicación de texto o una captura de pantalla. Describes lo que quieres, v0 produce código limpio de React y Shadcn, y lo pegas en tu proyecto. No hay un lienzo visual. No hay conexión con tu código base existente. Cada generación de v0 comienza desde cero. v0 está optimizado para la creación de componentes desde cero, no para iterar sobre una aplicación en vivo que ya tienes en ejecución. Produce código que tú integras; Onlook edita el código que ya existe.

Bolt.new de StackBlitz estructura aplicaciones full-stack completas a partir de una indicación, ejecutándose en un WebContainer en el navegador con un panel de editor de código integrado. Bolt maneja el frontend, el backend y el esquema de la base de datos de una sola vez, lo que lo hace rápido para crear prototipos de ideas nuevas. Al igual que v0, no se conecta a un proyecto existente y no ofrece un lienzo visual al estilo Figma para editar apuntando y haciendo clic. Bolt.new es un generador full-stack; Onlook es una capa de diseño visual para un código base existente.

La diferencia mecánica: v0 y Bolt.new generan código nuevo a partir de indicaciones. Onlook edita el código existente a través de un lienzo visual que se mantiene sincronizado con la aplicación en vivo. Ese es un flujo de trabajo fundamentalmente diferente, adecuado para un momento distinto en el ciclo de vida del producto: después de que la aplicación está estructurada y el equipo necesita iterar en los aspectos visuales sin la participación constante de los desarrolladores.

Cursor es la comparación mencionada con mayor frecuencia por los desarrolladores. Cursor es una bifurcación de VS Code con sugerencias en línea y chat de IA, creado para flujos de trabajo de programación donde el desarrollador escribe y revisa código. Onlook está dirigido a diseñadores que nunca abren un editor de código. Ambos pueden coexistir en el mismo proyecto: los desarrolladores usan Cursor para la lógica, los diseñadores usan Onlook para el diseño visual.

Cómo es la realidad del flujo de trabajo de edición visual

La experiencia práctica del día a día depende en gran medida de la versión que utilices. El entorno de pruebas web ejecuta el proyecto en un contenedor en la nube a través de CodeSandbox SDK y Bun, lo que significa que no hay configuración local, pero tampoco modo sin conexión y existe una dependencia de la infraestructura de Onlook. La aplicación de escritorio (disponible para Mac y Windows) se conecta a un servidor de desarrollo local, lo cual es más rápido y funciona sin conexión, pero requiere ejecutar npm o bun localmente primero.

Para una sesión típica de iteración de una página de aterrizaje (landing page): un diseñador abre el proyecto en la aplicación web de Onlook, ve el renderizado en vivo de Next.js en un lienzo con un panel de capas a la izquierda, hace clic en una sección, la arrastra a una nueva posición y luego usa el selector de color para ajustar el botón de llamada a la acción (CTA) principal. Cada clic produce un diff visible en el archivo JSX subyacente. El chat con IA se encarga del trabajo más pesado: "añade una cuadrícula de características de tres columnas debajo del hero" produce nuevos componentes JSX en contexto, no un fragmento genérico para copiar en otro lugar.

"Onlook es una gran herramienta para construir código... te da mucha versatilidad para trabajar de la manera en que te sientas más cómodo" - Diana Fusther, Product Hunt, agosto de 2025

La función de ramificación permite a los diseñadores experimentar sin comprometer el árbol de trabajo principal, de manera similar a las ramas de Git pero presentada como una acción de un solo clic en la interfaz de usuario. Esto es importante para las revisiones de diseño: un diseñador puede enviar un enlace de la rama a un desarrollador, el desarrollador ve el cambio visual junto al diff, y lo fusiona o rechaza como un PR (Pull Request) estándar. El modelo de colaboración elimina el ciclo de diseño-a-ticket-a-PR que ralentiza a muchos equipos de frontend.

Dónde aparece la fricción: la herramienta está en fase alfa, y eso no es un descargo de responsabilidad por cortesía. Los cambios de nombre de archivos pueden desincronizar el mapa data-oid, rompiendo el conocimiento de la capa visual sobre ese componente hasta que vuelvas a ejecutar el paso de compilación. Las bibliotecas de componentes fuera del sistema estándar de clases de utilidad de Tailwind se comportan de manera impredecible. Los equipos que usan frameworks distintos a Next.js aún no pueden usar el producto en absoluto.

Para quién está creado Onlook

El usuario principal es un diseñador que puede usar Figma con fluidez pero no quiere aprender JSX. Necesita hacer cambios visuales en una aplicación React en ejecución, ya sea para la revisión de un cliente, una iteración rápida o una fecha límite de entrega, sin tener que crear un ticket y esperar a un desarrollador. Onlook está diseñado específicamente para esta persona.

El usuario secundario es un desarrollador frontend que quiere reducir la cantidad de veces que un diseñador le contacta para cambios de padding y ajustes de color. Al dar a los diseñadores acceso directo a la capa visual, el desarrollador se mantiene enfocado en la lógica de los componentes y los datos, mientras que el diseñador se encarga del CSS y el diseño.

El tercer caso de uso es el creador en solitario en un proyecto de Next.js: un fundador no ingeniero que construye su propia página de aterrizaje SaaS, iterando visualmente sin alternar entre un editor de código y un bucle de actualización del navegador. El chat con IA cubre la generación de código más pesada; el lienzo se encarga de los ajustes finos.

Los equipos de código abierto y las empresas con requisitos de cumplimiento se benefician de la opción de autoalojamiento bajo licencia Apache 2.0. Ejecutar Onlook en tu propia infraestructura significa que tu código base nunca sale de tu red, lo cual es importante para las industrias reguladas. Figma AI y Lovable no ofrecen opciones de autoalojamiento comparables.

Lo que Onlook no es

Onlook no es compatible con proyectos de Vue, Svelte, Angular o React puro sin TailwindCSS. Si tu stack no incluye Next.js y Tailwind, Onlook no se conectará a tu proyecto. Esta es la fuente más común de expectativas frustradas y una limitación real para los equipos que usan otros frameworks.

Onlook no es una herramienta de estructuración full-stack. No generará un backend, no configurará una base de datos ni conectará flujos de autenticación. Para eso, usa Bolt.new o Replit. Onlook entra en acción después de que la arquitectura de la aplicación está en su lugar y maneja la capa de diseño visual a partir de ahí.

Onlook no es estable para producción de la misma manera que lo son Cursor o GitHub Copilot. La fase alfa es real. Los equipos que entregan trabajo a clientes con plazos ajustados deben probar la estabilidad de Onlook en su código base específico antes de depender de él para un ciclo de lanzamiento. El mecanismo de inyección data-oid funciona de manera confiable para la mayoría de los proyectos, pero los casos extremos en torno a monorepositorios, configuraciones personalizadas de webpack y anulaciones de bibliotecas de componentes siguen siendo problemas abiertos documentados.

Tampoco es una herramienta de creación de prototipos desde cero. Si no tienes un código base y quieres generar una interfaz de usuario funcional a partir de una descripción, v0 o Bolt.new te llevarán más lejos y más rápido. El punto fuerte de Onlook es editar e iterar sobre algo que ya funciona.

"Me impresionó mucho lo intuitivo que es de usar, viniendo de utilizar muchas otras herramientas populares" - May Zhou, Product Hunt, agosto de 2025