[V0_FILE]typescriptreact:file="app/page.tsx" import { Builder } from "@/components/builder" export default function Home() { return (

Low Code UI Builder

) } [V0_FILE]typescriptreact:file="components/builder.tsx" "use client" import { useState } from "react" import { DndProvider } from "react-dnd" import { HTML5Backend } from "react-dnd-html5-backend" import { ComponentPalette } from "@/components/component-palette" import { Canvas } from "@/components/canvas" import { PropertiesPanel } from "@/components/properties-panel" import { BlockType, type Block, type ComponentConfig } from "@/lib/types" export function Builder() { const [blocks, setBlocks] = useState([]) const [selectedBlockId, setSelectedBlockId] = useState(null) const [availableData] = useState([ { id: "users", name: "Users", fields: ["id", "name", "email", "role", "createdAt"], data: [ { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", createdAt: "2023-01-15" }, { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Editor", createdAt: "2023-02-20" }, { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "Viewer", createdAt: "2023-03-10" }, ], }, { id: "products", name: "Products", fields: ["id", "name", "price", "category", "stock"], data: [ { id: 101, name: "Laptop", price: 1299, category: "Electronics", stock: 45 }, { id: 102, name: "Desk Chair", price: 249, category: "Furniture", stock: 28 }, { id: 103, name: "Coffee Maker", price: 89, category: "Appliances", stock: 36 }, ], }, ]) const selectedBlock = selectedBlockId ? blocks.find((block) => block.id === selectedBlockId) : null const addBlock = (type: BlockType, parentId?: string) => { const newBlock: Block = { id: `block-${Date.now()}`, type, parentId, config: getDefaultConfig(type), children: [], } if (parentId) { setBlocks((prevBlocks) => prevBlocks.map((block) => block.id === parentId ? { ...block, children: [...block.children, newBlock.id] } : block, ), ) } setBlocks((prevBlocks) => [...prevBlocks, newBlock]) setSelectedBlockId(newBlock.id) } const updateBlockConfig = (blockId: string, config: ComponentConfig) => { setBlocks((prevBlocks) => prevBlocks.map((block) => (block.id === blockId ? { ...block, config } : block))) } const removeBlock = (blockId: string) => { // First, find all child blocks to remove const getAllChildrenIds = (id: string): string[] => { const block = blocks.find((b) => b.id === id) if (!block) return [] const childrenIds = [...block.children] block.children.forEach((childId) => { childrenIds.push(...getAllChildrenIds(childId)) }) return childrenIds } const childrenIds = getAllChildrenIds(blockId) const allIdsToRemove = [blockId, ...childrenIds] // Remove references from parent blocks setBlocks((prevBlocks) => prevBlocks.map((block) => ({ ...block, children: block.children.filter((id) => !allIdsToRemove.includes(id)), })), ) // Remove the blocks setBlocks((prevBlocks) => prevBlocks.filter((block) => !allIdsToRemove.includes(block.id))) if (selectedBlockId === blockId) { setSelectedBlockId(null) } } const getDefaultConfig = (type: BlockType): ComponentConfig => { switch (type) { case BlockType.Container: return { style: { padding: "16px", backgroundColor: "#ffffff", borderRadius: "4px" }, } case BlockType.Text: return { content: "Text content", style: { fontSize: "16px", color: "#000000" }, } case BlockType.Image: return { src: "/placeholder.svg?height=200&width=300", alt: "Placeholder image", style: { width: "100%", height: "auto" }, } case BlockType.Iterator: return { dataSource: "users", selectedFields: ["name", "email"], style: { display: "flex", flexDirection: "column", gap: "8px" }, } case BlockType.Card: return { title: "Card Title", style: { padding: "16px", backgroundColor: "#ffffff", borderRadius: "8px", boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)", }, } case BlockType.Button: return { label: "Click me", variant: "default", style: {}, } default: return {} } } return (

) } [V0_FILE]typescriptreact:file="components/component-palette.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BlockType } from "@/lib/types" import { LayoutGrid, Type, ImageIcon, Repeat, CreditCard, MousePointerClick } from "lucide-react" interface ComponentPaletteProps { onAddBlock: (type: BlockType) => void } export function ComponentPalette({ onAddBlock }: ComponentPaletteProps) { const components = [ { type: BlockType.Container, icon: , label: "Container" }, { type: BlockType.Text, icon: , label: "Text" }, { type: BlockType.Image, icon: , label: "Image" }, { type: BlockType.Iterator, icon: , label: "Iterator" }, { type: BlockType.Card, icon: , label: "Card" }, { type: BlockType.Button, icon: , label: "Button" }, ] return (

Components {components.map((component) => ( ))}

) } [V0_FILE]typescriptreact:file="components/canvas.tsx" "use client" import { useCallback } from "react" import { type Block, BlockType } from "@/lib/types" import { BlockRenderer } from "@/components/block-renderer" import { Button } from "@/components/ui/button" import { Plus } from "lucide-react" interface CanvasProps { blocks: Block[] selectedBlockId: string | null setSelectedBlockId: (id: string | null) => void onAddBlock: (type: BlockType, parentId?: string) => void onRemoveBlock: (id: string) => void availableData: any[] } export function Canvas({ blocks, selectedBlockId, setSelectedBlockId, onAddBlock, onRemoveBlock, availableData, }: CanvasProps) { const rootBlocks = blocks.filter((block) => !block.parentId) const renderBlocks = useCallback(() => { if (rootBlocks.length === 0) { return (

Drag components from the palette to start building

) } return rootBlocks.map((block) => ( )) }, [rootBlocks, blocks, selectedBlockId, setSelectedBlockId, onAddBlock, onRemoveBlock, availableData]) return (

{renderBlocks()}

) } [V0_FILE]typescriptreact:file="components/block-renderer.tsx" "use client" import { type Block, BlockType } from "@/lib/types" import { ContainerBlock } from "@/components/blocks/container-block" import { TextBlock } from "@/components/blocks/text-block" import { ImageBlock } from "@/components/blocks/image-block" import { IteratorBlock } from "@/components/blocks/iterator-block" import { CardBlock } from "@/components/blocks/card-block" import { ButtonBlock } from "@/components/blocks/button-block" interface BlockRendererProps { block: Block blocks: Block[] isSelected: boolean onSelect: (id: string | null) => void onAddBlock: (type: BlockType, parentId?: string) => void onRemoveBlock: (id: string) => void availableData: any[] iteratorData?: any iteratorFields?: string[] } export function BlockRenderer({ block, blocks, isSelected, onSelect, onAddBlock, onRemoveBlock, availableData, iteratorData, iteratorFields, }: BlockRendererProps) { const childBlocks = blocks.filter((b) => b.parentId === block.id) const renderChildBlocks = (childBlocks: Block[]) => { return childBlocks.map((childBlock) => ( )) } const renderBlock = () => { switch (block.type) { case BlockType.Container: return ( {renderChildBlocks(childBlocks)} ) case BlockType.Text: return ( ) case BlockType.Image: return ( ) case BlockType.Iterator: return ( ) case BlockType.Card: return ( {renderChildBlocks(childBlocks)} ) case BlockType.Button: return ( ) default: return null } } return renderBlock() } [V0_FILE]typescriptreact:file="components/blocks/container-block.tsx" "use client" import type { ReactNode } from "react" import type { Block, BlockType } from "@/lib/types" import { BlockControls } from "@/components/block-controls" interface ContainerBlockProps { block: Block isSelected: boolean onSelect: (id: string | null) => void onAddBlock: (type: BlockType, parentId?: string) => void onRemoveBlock: (id: string) => void children: ReactNode } export function ContainerBlock({ block, isSelected, onSelect, onAddBlock, onRemoveBlock, children, }: ContainerBlockProps) { const { style } = block.config return (

{ e.stopPropagation() onSelect(block.id) }} > {isSelected && } {children} {!children && (

Container - Drag components here

)}

) } [V0_FILE]typescriptreact:file="components/blocks/text-block.tsx" "use client" import type { Block } from "@/lib/types" import { BlockControls } from "@/components/block-controls" interface TextBlockProps { block: Block isSelected: boolean onSelect: (id: string | null) => void onRemoveBlock: (id: string) => void iteratorData?: any iteratorFields?: string[] } export function TextBlock({ block, isSelected, onSelect, onRemoveBlock, iteratorData, iteratorFields, }: TextBlockProps) { const { content, style } = block.config // Process content to replace field placeholders with actual data const processContent = (content: string) => { if (!iteratorData || !iteratorFields) return content let processedContent = content iteratorFields.forEach((field) => { const placeholder = `{${field}}` if (processedContent.includes(placeholder) && iteratorData[field] !== undefined) { processedContent = processedContent.replace(new RegExp(placeholder, "g"), String(iteratorData[field])) } }) return processedContent } return (

{ e.stopPropagation() onSelect(block.id) }} > {isSelected && }

{processContent(content)}

) } [V0_FILE]typescriptreact:file="components/blocks/image-block.tsx" "use client" import type { Block } from "@/lib/types" import { BlockControls } from "@/components/block-controls" interface ImageBlockProps { block: Block isSelected: boolean onSelect: (id: string | null) => void onRemoveBlock: (id: string) => void iteratorData?: any iteratorFields?: string[] } export function ImageBlock({ block, isSelected, onSelect, onRemoveBlock, iteratorData, iteratorFields, }: ImageBlockProps) { const { src, alt, style } = block.config // Process src to replace field placeholders with actual data const processSrc = (src: string) => { if (!iteratorData || !iteratorFields) return src let processedSrc = src iteratorFields.forEach((field) => { const placeholder = `{${field}}` if (processedSrc.includes(placeholder) && iteratorData[field] !== undefined) { processedSrc = processedSrc.replace(new RegExp(placeholder, "g"), String(iteratorData[field])) } }) return processedSrc } // Process alt to replace field placeholders with actual data const processAlt = (alt: string) => { if (!iteratorData || !iteratorFields) return alt let processedAlt = alt iteratorFields.forEach((field) => { const placeholder = `{${field}}` if (processedAlt.includes(placeholder) && iteratorData[field] !== undefined) { processedAlt = processedAlt.replace(new RegExp(placeholder, "g"), String(iteratorData[field])) } }) return processedAlt } return (

{ e.stopPropagation() onSelect(block.id) }} > {isSelected && }

) } [V0_FILE]typescriptreact:file="components/blocks/iterator-block.tsx" "use client" import type React from "react" import type { Block, BlockType } from "@/lib/types" import { BlockControls } from "@/components/block-controls" import { BlockRenderer } from "@/components/block-renderer" interface IteratorBlockProps { block: Block blocks: Block[] isSelected: boolean onSelect: (id: string | null) => void onAddBlock: (type: BlockType, parentId?: string) => void onRemoveBlock: (id: string) => void availableData: any[] renderChildBlocks: (blocks: Block[]) => React.ReactNode childBlocks: Block[] } export function IteratorBlock({ block, blocks, isSelected, onSelect, onAddBlock, onRemoveBlock, availableData, childBlocks, }: IteratorBlockProps) { const { dataSource, selectedFields, style } = block.config // Find the data source const dataSet = availableData.find((ds) => ds.id === dataSource) if (!dataSet) { return (

{ e.stopPropagation() onSelect(block.id) }} > {isSelected && }

Iterator - No data source selected

) } return (

{ e.stopPropagation() onSelect(block.id) }} > {isSelected && } {childBlocks.length === 0 ? (

Iterator - Add components to repeat for each item

) : (

{dataSet.data.map((item: any, index: number) => (

{childBlocks.map((childBlock) => ( ))}

))}

)}

) } [V0_FILE]typescriptreact:file="components/blocks/card-block.tsx" "use client" import type { ReactNode } from "react" import type { Block, BlockType } from "@/lib/types" import { BlockControls } from "@/components/block-controls" interface CardBlockProps { block: Block isSelected: boolean onSelect: (id: string | null) => void onAddBlock: (type: BlockType, parentId?: string) => void onRemoveBlock: (id: string) => void children: ReactNode iteratorData?: any iteratorFields?: string[] } export function CardBlock({ block, isSelected, onSelect, onAddBlock, onRemoveBlock, children, iteratorData, iteratorFields, }: CardBlockProps) { const { title, style } = block.config // Process title to replace field placeholders with actual data const processTitle = (title: string) => { if (!iteratorData || !iteratorFields) return title let processedTitle = title iteratorFields.forEach((field) => { const placeholder = `{${field}}` if (processedTitle.includes(placeholder) && iteratorData[field] !== undefined) { processedTitle = processedTitle.replace(new RegExp(placeholder, "g"), String(iteratorData[field])) } }) return processedTitle } return (

{ e.stopPropagation() onSelect(block.id) }} > {isSelected && }

{processTitle(title)}

{children} {!children && (

Card - Drag components here

)}

) } [V0_FILE]typescriptreact:file="components/blocks/button-block.tsx" "use client" import type { Block } from "@/lib/types" import { Button } from "@/components/ui/button" import { BlockControls } from "@/components/block-controls" interface ButtonBlockProps { block: Block isSelected: boolean onSelect: (id: string | null) => void onRemoveBlock: (id: string) => void iteratorData?: any iteratorFields?: string[] } export function ButtonBlock({ block, isSelected, onSelect, onRemoveBlock, iteratorData, iteratorFields, }: ButtonBlockProps) { const { label, variant, style } = block.config // Process label to replace field placeholders with actual data const processLabel = (label: string) => { if (!iteratorData || !iteratorFields) return label let processedLabel = label iteratorFields.forEach((field) => { const placeholder = `{${field}}` if (processedLabel.includes(placeholder) && iteratorData[field] !== undefined) { processedLabel = processedLabel.replace(new RegExp(placeholder, "g"), String(iteratorData[field])) } }) return processedLabel } return (

{ e.stopPropagation() onSelect(block.id) }} > {isSelected && }

) } [V0_FILE]typescriptreact:file="components/block-controls.tsx" isFixed="true" isQuickEdit="true" "use client" import { type Block, BlockType } from "@/lib/types" import { Button } from "@/components/ui/button" import { Plus, Trash2, LayoutGrid, Type, ImageIcon, CreditCard, MousePointerClick } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" interface BlockControlsProps { block: Block onAddBlock?: (type: BlockType, parentId?: string) => void onRemoveBlock: (id: string) => void } export function BlockControls({ block, onAddBlock, onRemoveBlock }: BlockControlsProps) { return (

{onAddBlock && ( onAddBlock(BlockType.Container, block.id)}> Container onAddBlock(BlockType.Text, block.id)}> Text onAddBlock(BlockType.Image, block.id)}> Image onAddBlock(BlockType.Card, block.id)}> Card onAddBlock(BlockType.Button, block.id)}> Button )}

) } [V0_FILE]typescriptreact:file="components/properties-panel.tsx" "use client" import { type Block, BlockType } from "@/lib/types" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" interface PropertiesPanelProps { selectedBlock: Block | null updateBlockConfig: (blockId: string, config: any) => void availableData: any[] } export function PropertiesPanel({ selectedBlock, updateBlockConfig, availableData }: PropertiesPanelProps) { if (!selectedBlock) { return (

Properties Select a component to edit its properties

) } const handleChange = (key: string, value: any) => { updateBlockConfig(selectedBlock.id, { ...selectedBlock.config, [key]: value, }) } const handleStyleChange = (key: string, value: any) => { updateBlockConfig(selectedBlock.id, { ...selectedBlock.config, style: { ...selectedBlock.config.style, [key]: value, }, }) } const renderProperties = () => { switch (selectedBlock.type) { case BlockType.Container: return ( <>

Padding handleStyleChange("padding", e.target.value)} />

Background Color handleStyleChange("backgroundColor", e.target.value)} className="h-10 w-full" />

Border Radius handleStyleChange("borderRadius", e.target.value)} />

) case BlockType.Text: return ( <>

Content

handleChange("content", e.target.value)}
                rows={3}
              />
              <p className="text-xs text-muted-foreground">Use {"{field}"} to insert data from iterator</p>
            </div>
            <div className="space-y-2">
              <Label htmlFor="fontSize">Font Size</Label>
              <Input
                id="fontSize"
                value={selectedBlock.config.style?.fontSize || ""}
                onChange={(e) => handleStyleChange("fontSize", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="color">Text Color</Label>
              <Input
                id="color"
                type="color"
                value={selectedBlock.config.style?.color || "#000000"}
                onChange={(e) => handleStyleChange("color", e.target.value)}
                className="h-10 w-full"
              />
            </div>
          </>
        )
      case BlockType.Image:
        return (
          <>
            <div className="space-y-2">
              <Label htmlFor="src">Image Source</Label>
              <Input
                id="src"
                value={selectedBlock.config.src || ""}
                onChange={(e) => handleChange("src", e.target.value)}
              />
              <p className="text-xs text-muted-foreground">Use {"{field}"} to insert data from iterator</p>
            </div>
            <div className="space-y-2">
              <Label htmlFor="alt">Alt Text</Label>
              <Input
                id="alt"
                value={selectedBlock.config.alt || ""}
                onChange={(e) => handleChange("alt", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="width">Width</Label>
              <Input
                id="width"
                value={selectedBlock.config.style?.width || ""}
                onChange={(e) => handleStyleChange("width", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="height">Height</Label>
              <Input
                id="height"
                value={selectedBlock.config.style?.height || ""}
                onChange={(e) => handleStyleChange("height", e.target.value)}
              />
            </div>
          </>
        )
      case BlockType.Iterator:
        return (
          <>
            <div className="space-y-2">
              <Label htmlFor="dataSource">Data Source</Label>
              <Select
                value={selectedBlock.config.dataSource || ""}
                onValueChange={(value) => handleChange("dataSource", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select data source" />
                </SelectTrigger>
                <SelectContent>
                  {availableData.map((dataSource) => (
                    <SelectItem key={dataSource.id} value={dataSource.id}>
                      {dataSource.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

{selectedBlock.config.dataSource && (
              <div className="space-y-2">
                <Label>Fields to Pass to Children</Label>
                <div className="border border-border rounded-md p-2 space-y-2">
                  {availableData
                    .find((ds) => ds.id === selectedBlock.config.dataSource)
                    ?.fields.map((field: string) => (
                      <div key={field} className="flex items-center space-x-2">
                        <Checkbox
                          id={`field-${field}`}
                          checked={(selectedBlock.config.selectedFields || []).includes(field)}
                          onCheckedChange={(checked) => {
                            const currentFields = selectedBlock.config.selectedFields || []
                            const newFields = checked
                              ? [...currentFields, field]
                              : currentFields.filter((f: string) => f !== field)
                            handleChange("selectedFields", newFields)
                          }}
                        />
                        <Label htmlFor={`field-${field}`}>{field}</Label>
                      </div>
                    ))}
                </div>
              </div>
            )}

<div className="space-y-2">
              <Label htmlFor="flexDirection">Layout Direction</Label>
              <Select
                value={selectedBlock.config.style?.flexDirection || "column"}
                onValueChange={(value) => handleStyleChange("flexDirection", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select direction" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="column">Column</SelectItem>
                  <SelectItem value="row">Row</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="gap">Gap Between Items</Label>
              <Input
                id="gap"
                value={selectedBlock.config.style?.gap || ""}
                onChange={(e) => handleStyleChange("gap", e.target.value)}
              />
            </div>
          </>
        )
      case BlockType.Card:
        return (
          <>
            <div className="space-y-2">
              <Label htmlFor="title">Card Title</Label>
              <Input
                id="title"
                value={selectedBlock.config.title || ""}
                onChange={(e) => handleChange("title", e.target.value)}
              />
              <p className="text-xs text-muted-foreground">Use {"{field}"} to insert data from iterator</p>
            </div>
            <div className="space-y-2">
              <Label htmlFor="padding">Padding</Label>
              <Input
                id="padding"
                value={selectedBlock.config.style?.padding || ""}
                onChange={(e) => handleStyleChange("padding", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="backgroundColor">Background Color</Label>
              <Input
                id="backgroundColor"
                type="color"
                value={selectedBlock.config.style?.backgroundColor || "#ffffff"}
                onChange={(e) => handleStyleChange("backgroundColor", e.target.value)}
                className="h-10 w-full"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="borderRadius">Border Radius</Label>
              <Input
                id="borderRadius"
                value={selectedBlock.config.style?.borderRadius || ""}
                onChange={(e) => handleStyleChange("borderRadius", e.target.value)}
              />
            </div>
          </>
        )
      case BlockType.Button:
        return (
          <>
            <div className="space-y-2">
              <Label htmlFor="label">Button Label</Label>
              <Input
                id="label"
                value={selectedBlock.config.label || ""}
                onChange={(e) => handleChange("label", e.target.value)}
              />
              <p className="text-xs text-muted-foreground">Use {"{field}"} to insert data from iterator</p>
            </div>
            <div className="space-y-2">
              <Label htmlFor="variant">Button Variant</Label>
              <Select
                value={selectedBlock.config.variant || "default"}
                onValueChange={(value) => handleChange("variant", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select variant" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="default">Default</SelectItem>
                  <SelectItem value="destructive">Destructive</SelectItem>
                  <SelectItem value="outline">Outline</SelectItem>
                  <SelectItem value="secondary">Secondary</SelectItem>
                  <SelectItem value="ghost">Ghost</SelectItem>
                  <SelectItem value="link">Link</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </>
        )
      default:
        return null
    }
  }

return (
    <div className="w-80 border-l border-border bg-muted/30 p-4 overflow-y-auto">
      <Card>
        <CardHeader className="py-3">
          <CardTitle className="text-sm font-medium">Properties</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4 p-4">{renderProperties()}</CardContent>
      </Card>
    </div>
  )
}

[V0_FILE]typescriptreact:file="lib/types.ts"
export enum BlockType {
  Container = "container",
  Text = "text",
  Image = "image",
  Iterator = "iterator",
  Card = "card",
  Button = "button",
}

export interface ComponentConfig {
  [key: string]: any
}

export interface Block {
  id: string
  type: BlockType
  parentId?: string
  config: ComponentConfig
  children: string[]
}
</article></body></html>