onlook
무엇인가
Onlook은 코드베이스 위에서 디자인하는 것을 목표로 하는 오픈소스 비주얼 에디터다. Figma Make, Webflow, Bolt.new, Lovable, v0, Replit Agent가 나눠 가진 영역, 즉 디자인 도구와 코드 생성 도구 사이를 겨냥한다. 새 디자인을 그리는 대신 이미 존재하는 React 코드를 열어 그 위에서 편집한다.
어떻게 동작하나
앱을 만들면 코드가 웹 컨테이너에 적재되고 컨테이너가 이를 실행해 서빙한다. 에디터는 프리뷰 링크를 받아 iFrame에 띄우고, 컨테이너에서 코드를 읽어 인덱싱한 뒤 코드를 계측해 DOM 요소를 소스 위치에 매핑한다. 요소를 편집하면 iFrame의 DOM을 먼저 바꾸고 그다음 코드를 바꾼다. AI 채팅도 같은 코드 접근 권한과 편집 도구를 갖는다. 프런트엔드는 Next.js·TailwindCSS·tRPC, 데이터는 Supabase와 Drizzle, AI는 AI SDK·OpenRouter·Morph Fast Apply·Relace, 샌드박스는 CodeSandbox SDK, 호스팅은 Freestyle, 런타임은 Bun과 Docker를 쓴다.
무엇과 다른가
Figma는 코드가 없는 캔버스에서, Webflow는 자체 런타임 위에서 디자인한다. Bolt.new·Lovable·v0는 프롬프트로 새 코드를 생성한다. Onlook은 기존 React 코드베이스를 그대로 두고 DOM 수준에서 편집한 결과를 소스로 되돌린다. 계측 단계에서 요소와 코드 위치를 연결하므로 요소를 우클릭하면 대응하는 코드 위치로 바로 이동한다.
어떻게 쓰나
호스팅 앱을 쓰거나 로컬에서 실행한다. Next.js + TailwindCSS 프로젝트를 가져오거나 에디터 안에서 새로 시작한다. AI 채팅으로 프로젝트를 생성·수정하고, 툴바로 Tailwind 스타일과 레이아웃을 조정한다. div를 그려 넣고 부모 컨테이너 안에서 드래그로 재배치하며, 코드와 프리뷰를 나란히 본다. 브랜치로 디자인 실험을 분리하고 체크포인트에서 저장·복원한다.
전제와 한계
지원 범위는 Next.js + TailwindCSS 프로젝트로 한정된다. 비 Next.js·비 Tailwind 프로젝트 지원은 로드맵에만 있다. 댓글, MCP 연동, 이미지 레퍼런스, 컴포넌트 패널 드래그앤드롭도 아직 구현되지 않았다. 라이선스는 Apache 2.0이다.