- 웹에서 사이트, 프로토타입, 디자인을 실시간 코드와 함께 만들 수 있는 오픈소스 비주얼 바이브코딩 에디터
-
Next.js + TailwindCSS 기반, 브라우저에서 실시간 미리보기 및 직접 DOM을 수정 가능
- Bolt, Lovable, V0, Replit Agent, Figma Make, Webflow 등 상용 서비스의 오픈소스 대체를 목표
주요 기능
- Next.js 앱을 텍스트/이미지로부터 즉시 생성 - Figma 임포트, 템플릿 등 지원 예정
-
Figma와 유사한 UI로 페이지 생성, 자산 및 토큰 관리, 실시간 프리뷰 지원
-
실시간 코드 에디터, 체크포인트 저장 및 복원, CLI 통한 명령어 실행, 마켓플레이스 연동
- 드래그앤드롭, Tailwind 스타일 편집, 레이아웃 실험 등 시각적 조작 지원
- 실시간 편집 / 댓글 / 공유링크 / 커스텀 도메인 지원 예정
- 웹 기반이지만, 데스크톱 앱(Onlook Desktop)과도 연동 가능
아키텍처 및 동작 방식
- 앱 생성 시 코드를 웹 컨테이너에 로드해 코드가 실행됨
- 미리보기 링크를 iFrame으로 에디터에 표시, 코드와 UI 매핑 처리
-
AI 챗봇이 코드 접근 및 편집 지원, 코드를 직접 이해하고 수정 가능
- JSX/TSX/HTML 등 선언형 DOM을 사용하는 다양한 프레임워크 확장 가능
사용 기술 스택
- 프론트엔드: Next.js, TailwindCSS, tRPC
- 데이터베이스/스토리지: Supabase, Drizzle
- AI: AI SDK, Anthropic, Morph Fast Apply, Relace
- 샌드박스/호스팅: CodeSandboxSDK, Freestyle
- 런타임/번들러: Bun, Docker
기타 정보
- Apache 2.0 라이선스
- 웹 앱은 곧 공개 예정, 데스크톱 앱도 별도 제공
- 전체 문서 및 개발 참여 방법은 공식 문서 참고