Compono UI Builder

Problem

Prototyping UIs with shadcn/ui components usually means writing the same boilerplate repeatedly before seeing a result.

Approach

Built a visual drag-and-drop builder for shadcn/ui components with real-time WYSIWYG editing, device previews, and one-click export to clean TypeScript + Tailwind code via a Babel/Prettier pipeline.

Tech highlights

Next.js 15 with React 19 and TypeScript, @dnd-kit for drag-and-drop component placement, Tiptap for rich-text editing, device previews (desktop/tablet/mobile), a Babel/Prettier pipeline generating clean TypeScript + Tailwind code on export, and PostHog for usage analytics.

Results

Shipped a working visual builder that exports ready-to-use shadcn component code.

Challenges

Keeping the live preview in sync with builder state changes in real time without re-rendering the whole canvas.