Onlook overview: visual editing and self-hosting

The original video is a Japanese-language explanatory dialogue, rather than a hands-on installation demonstration. Onlook is presented as an open source visual code editor for designers and developers working with Next.js and Tailwind CSS. The speakers describe a Figma-like canvas where selecting an element opens controls for spacing, typography, color and size. Changes update both the preview and the React source; dragging in a new element adds JSX.

The explanation focuses on keeping ordinary code editable. Development-only element IDs connect the preview to source locations, and a right-click can take users to the corresponding code. AI chat handles larger changes by finding files, editing code and running type checks. Branches let users compare design variants before merging a choice.

The video also describes browser-based development through the CodeSandbox SDK, an embedded terminal and publishing links. A self-hosted deployment uses Docker Compose, with the database and backend on the team's infrastructure. Setup still requires services such as Supabase and CodeSandbox, plus AI API keys; this is not an offline model-running walkthrough.

The stated limits are Next.js with Tailwind CSS only, no CSS Modules or styled-components support, and Figma import still in development. These are the video's claims about the product at the time of recording.