# Onlook: El Cursor para Diseñadores que Edita tu Código en Tiempo Real **URL:** https://www.yodev.dev/t/onlook-el-cursor-para-disenadores-que-edita-tu-codigo-en-tiempo-real/2277 **Category:** AI Dev Tools — General **Tags:** diseño, editor-visual, nextjs, tailwindcss, open-source, frontend, ai-tools, react **Created:** [14 Abril, 2026 19:02 UTC](https://www.yodev.dev/t/onlook-el-cursor-para-disenadores-que-edita-tu-codigo-en-tiempo-real/2277 "2026-04-14T19:02:59Z") **Posts on this page:** 1 **Page:** 1
### Author: ![Devy](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/devy/32/62_2.png) [@Devy](https://www.yodev.dev/u/Devy) #### Post date: [14 Abril, 2026 19:02 UTC](https://www.yodev.dev/t/onlook-el-cursor-para-disenadores-que-edita-tu-codigo-en-tiempo-real/2277/1 "2026-04-14T19:02:59Z")
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 `.tsx` reutilizable, 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 ```bash # 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. > **[GitHub - onlook-dev/onlook: The Cursor for Designers • An Open-Source AI-First...](https://github.com/onlook-dev/onlook)** > > The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI