Act as a Senior Full-Stack Engineer. Create a functional MVP of a no-code UI builder inspired by Webflow, specifically for SaaS applications.
Technical Stack: Next.js (App Router), Tailwind CSS, Shadcn/UI, and @dnd-kit for drag-and-drop functionality.
Key Features to Implement:
Component Sidebar: A list of draggable Shadcn elements (Button, Card, Input, Badge).
Canvas/Viewport: A central area where components can be dropped, reordered, and deleted.
Properties Panel: A right sidebar that allows me to edit the 'props' of the selected component (e.g., changing button text, variant, or colors via Tailwind classes).
State Management: Use a JSON-based tree structure to track the layout.
Provide the core logic for the DnD wrapper and a sample 'Button' component that is editable within the canvas.
Now let me read the existing files to understand the codebase structure before building.
Now let me read the existing shadcn components I'll need for the builder:
Now I have full context. Let me build the no-code UI builder. I'll start with the dark theme, then create the builder store, component registry, and all the panels.
Now add the custom canvas theme tokens to the @theme inline block:
Now add @dnd-kit to the package.json:
Now let me update the layout with proper metadata:
Now let me create the core builder store and types:
Now let me create the component sidebar (palette):
Now create the rendered components within the canvas:
Now create the canvas with sortable items:
Now create the properties panel:
Now create the top toolbar/header:
Now create the main DnD wrapper that orchestrates everything:
Now create the main builder layout that combines everything:
Finally, create the page:
Let me verify everything compiles by checking for any import issues I might have missed:
All imports look correct. Now let me check the @dnd-kit/utilities import to make sure we import CSS correctly:
Let me also verify the store looks correct to make sure the useCallback with stable references is correct:
I need to fix the BuilderProvider — it needs a proper useRef to avoid recreating the store on every render:
Now let me also fix the useCallback usage — useCallback expects a function factory, but we're passing stable references from the store. Let me simplify the actions hook since the store functions are already stable:
Now let me also check for a potential issue with @dnd-kit/sortable v10 — let me check the correct version and API:
Let me check the dnd-kit v10 API since it may have breaking changes:
The @dnd-kit/sortable@10.0.0 still uses @dnd-kit/core@^6.3.0 as a peer dependency and the API remains the same (SortableContext, useSortable). The major version changes are for the new @dnd-kit/react package. Our current approach with the classic API is correct.
Let me verify the package.json dependencies are compatible:
Good, the deps are correct. Now let me verify the final file structure one more time to ensure everything is in order:
All files are in place. Here's a summary of what was built:
BuildKit — No-Code UI Builder MVP with a dark, IDE-inspired interface featuring a three-panel layout:
component-sidebar.tsx): 6 draggable elements (Button, Card, Input, Badge, Text, Container) powered by @dnd-kit/core's useDraggable hook, with visual grip handles and palette-style icons.builder-canvas.tsx): A central droppable zone with a subtle dot-grid background. Uses @dnd-kit/sortable for reorder-by-drag. Each canvas item has a floating toolbar with drag handle, move up/down, duplicate, and delete actions. A DragOverlay provides ghost previews during drag.properties-panel.tsx): Context-aware right sidebar with type-specific editors — Button (text, variant, size), Card (title, description, content), Input (placeholder, type), Badge (text, variant), Text (content, HTML tag), and Container (direction, gap, padding). All components also expose a Tailwind custom class field.builder-store.tsx): A zero-dependency external store using useSyncExternalStore with a JSON tree structure (Record<string, BuilderNode> + rootChildren ordering). The toolbar includes a JSON viewer modal to inspect the full layout tree at any time.Possible encore les features en ajoutant la possibilité de faire ces actions suivantes :
Now I have complete context of every file. Let me also check existing shadcn components I might need:
Now I have complete context. This is a massive enhancement requiring deep rearchitecting of every file. Let me set up a task list and work through this systematically.
Starting with the full type system and store rearchitecture. This is the foundation everything else builds on.
Now rewrite the entire store with nesting support, parent tracking, and font management:
Types and store done. Moving to the grouped sidebar with registry dialog.
Now the canvas needs to render nodes recursively with nested drop targets, and the rendered-component needs to support the full style system:
Now the canvas with recursive nesting and droppable containers:
Now the comprehensive properties panel - this is the biggest file. It needs tabs for Props, Layout, Style, and Typography:
Now update the DnD wrapper to handle dropping into containers:
Now update the toolbar to show font loading and nesting info:
Now update the main layout to load Google Fonts dynamically:
Now let me check for any compilation issues by verifying all imports are correct:
Let me also check for unused imports in the properties panel that might cause warnings:
Let me check if Plus, X, and Square are used, and the Paintbrush icon:
Plus and Paintbrush are imported but unused. Let me clean those up:
Now let me also check DnD wrapper for unused imports:
These are imported but not used in the DnD wrapper. Let me clean that:
Now let me also verify the rendered component handles inline color styles since we have backgroundColor and textColor in NodeStyles but the CSS converter doesn't map them:
The backgroundColor and textColor mappings are missing from the stylesToCSS function. Let me add them:
Now mark all tasks done:
Here is a summary of every enhancement implemented across the entire builder:
Nesting support -- Components like Container and Card now acceptsChildren: true, allowing you to drag a Button (or any other element) directly inside them. The canvas renders recursively with nested ContainerDropZone droppable areas, and the custom collision detection (pointerWithin for containers, then rectIntersection fallback) ensures the drop target is correctly identified. The store tracks parentId on every node and handles deep removal of descendants.
Layout system -- The new Layout tab in the properties panel exposes display mode (block, inline, flex, inline-flex, grid, none), and conditionally shows flex properties (direction, wrap, justify, align, gap) or grid properties (columns, gap) based on the selected display mode. All values are applied via inline CSS computed from a NodeStyles object.
Grouped sidebar -- The palette is now organized into 4 collapsible categories (Layout, Content, Forms, Data Display) with a search filter. Two new component types were added (Textarea, Image, Heading, Separator). A "Shadcn Registry" button at the bottom opens a dialog to browse and simulate installing additional shadcn/ui components.
Google Fonts -- The Typography tab includes a font manager where you can add any of 18 preset Google Fonts. Added fonts are dynamically loaded via a <link> tag and become available in the font family selector for any selected node.
Comprehensive style controls -- The Style tab provides sliders and selectors for border width/style/color, per-corner border radius (none through full), box shadow presets, background/text colors, opacity, and a raw Tailwind class escape hatch. The Layout tab includes T/R/B/L padding and margin controls on the Tailwind 4px scale, plus width/height/min-height/max-width sizing fields.