Here’s a complete README draft you can use for your project: --- # πŸ–ŒοΈ tldraw Interactive UI Controllers This project extends [tldraw](https://tldraw.dev) to support **interactive UI components** (similar to Balsamiq) that can be dropped into the canvas and interacted with directly. We’ve built **10 controllers**: 1. βœ… **Checkbox** 2. πŸ”˜ **Radio Group** 3. ✏️ **Text Input** 4. πŸ“ **Textarea** 5. ⏹ **Button** 6. πŸ”„ **Toggle Switch** 7. πŸ“… **Date Picker** 8. πŸ”½ **ComboBox (Select Dropdown)** 9. πŸ“Š **Data Grid (Table)** 10. πŸ“¦ **Form Container** (groups other controls) All controllers are **fully interactive** inside the canvas, not just static wireframes. --- ## πŸš€ Features * Drag & drop controllers into the tldraw canvas. * Controls retain **state** (e.g., checkbox checked, input text, dropdown selection). * Controls are **resizable & draggable** like normal shapes. * Real **HTML elements embedded in SVG** via `foreignObject`. * Can be extended with new components easily. --- ## πŸ“‚ Project Structure ``` src/ β”œβ”€ shapes/ β”‚ β”œβ”€ ButtonShape.tsx β”‚ β”œβ”€ CheckboxShape.tsx β”‚ β”œβ”€ ComboBoxShape.tsx β”‚ β”œβ”€ DataGridShape.tsx β”‚ β”œβ”€ DatePickerShape.tsx β”‚ β”œβ”€ FormShape.tsx β”‚ β”œβ”€ InputShape.tsx β”‚ β”œβ”€ RadioGroupShape.tsx β”‚ β”œβ”€ TextAreaShape.tsx β”‚ └─ ToggleShape.tsx β”œβ”€ components/ β”‚ └─ ControlsPalette.tsx β”œβ”€ App.tsx └─ main.tsx ``` --- ## ⚑ Installation ```bash git clone https://github.com/your-org/tldraw-ui-controllers.git cd tldraw-ui-controllers npm install npm run dev ``` Open [http://localhost:5173](http://localhost:5173) in your browser. --- ## πŸ› οΈ Usage ### Adding a Control Each control is implemented as a **custom shape**. From the **palette sidebar**, you can click any control to insert it: ```tsx editor.createShape({ type: "checkbox", x: 200, y: 200, props: { checked: false, label: "Accept Terms" }, }); ``` ### Example: Checkbox Implementation ```tsx type CheckboxShape = TLBaseShape<"checkbox", { checked: boolean; label: string }>; class CheckboxShapeUtil extends ShapeUtil { static override type = "checkbox"; override render(shape: CheckboxShape) { return (
this.editor.updateShape({ ...shape, props: { ...shape.props, checked: e.target.checked }, }) } /> {shape.props.label}
); } } ``` --- ## πŸŽ›οΈ Controllers | Control | Description | Example Props | | ------------------ | -------------------------- | ---------------------------------------------- | | **Button** | Clickable button | `{ label: "Submit" }` | | **Checkbox** | Standard checkbox | `{ checked: false, label: "Accept Terms" }` | | **Radio Group** | Multiple exclusive options | `{ options: ["A", "B", "C"], selected: "A" }` | | **Text Input** | Single-line input | `{ value: "", placeholder: "Enter text" }` | | **Textarea** | Multi-line input | `{ value: "", placeholder: "Write here..." }` | | **Toggle Switch** | On/Off toggle | `{ on: true }` | | **Date Picker** | Calendar input | `{ date: "2025-09-01" }` | | **ComboBox** | Dropdown list | `{ options: ["One", "Two"], selected: "One" }` | | **Data Grid** | Simple editable table | `{ rows: [["A1","B1"],["A2","B2"]] }` | | **Form Container** | Holds other shapes | `{ title: "User Form" }` | --- ## 🧩 Extending with New Controls To add a new control: 1. Create a new `ShapeUtil` subclass in `src/shapes/`. 2. Use `` to render any HTML element. 3. Update `App.tsx` to register it in `shapeUtils`. 4. Add it to the **ControlsPalette**. --- ## πŸ“Έ Preview * Palette on the left with draggable controllers. * tldraw canvas on the right. * Controls behave just like Balsamiq but **real & interactive**. --- Got it βœ… I see your **Prompt-to-Wireframe (tldraw)** app running locally β€” it already generates wireframes on the canvas. Now you want to **integrate the interactive controllers (button, forms, data grid, date picker, etc.)** into this environment. Here’s how you can integrate the two: --- ## πŸ”Ή Integration Plan 1. **Extend your current tldraw setup** * Right now your app renders `` with AI-generated wireframes. * You’ll register your **10 custom controllers (shapes)** into the same editor. 2. **Add Controllers Palette** * Create a sidebar/panel with the controllers (like Balsamiq’s top bar). * Each controller button inserts its shape into the tldraw canvas. 3. **Register Custom Shapes** * In your `App.tsx` (or wherever `` is rendered), pass `shapeUtils` with all the controllers you built: ```tsx import { ButtonShapeUtil, CheckboxShapeUtil, ComboBoxShapeUtil, DataGridShapeUtil, DatePickerShapeUtil, FormShapeUtil, InputShapeUtil, RadioGroupShapeUtil, TextAreaShapeUtil, ToggleShapeUtil, } from "./shapes"; ``` 4. **Connect Palette β†’ Shape Creation** Example for a button in your palette: ```tsx function ControlsPalette({ editor }) { return (
); } ``` Add similar buttons for checkbox, date picker, grid, etc. 5. **Combine With Prompt-to-Wireframe Flow** * When your AI generates wireframes, they appear as usual. * The user can then drag in **interactive controllers** to replace/augment them. * Example: AI generates a rectangle with label "DATA TABLE" β†’ user deletes it and inserts a real **DataGridShape**. --- ## πŸ”Ή Updated Project Structure ``` src/ β”œβ”€ shapes/ # all 10 controllers β”‚ β”œβ”€ ButtonShape.tsx β”‚ β”œβ”€ CheckboxShape.tsx β”‚ β”œβ”€ ... β”œβ”€ components/ β”‚ β”œβ”€ ControlsPalette.tsx β”‚ └─ WireframeGenerator.tsx # your existing AI integration β”œβ”€ App.tsx └─ main.tsx ``` --- ## πŸ”Ή User Flow After Integration 1. User enters a **prompt** β†’ AI generates a wireframe layout (as in your screenshot). 2. User sees a **palette of interactive controllers**. 3. User drags/drops or clicks to insert **real interactive controls** (button, forms, date pickers, data grid). 4. Wireframe evolves into a **clickable mockup**, not just static boxes. --- ## πŸ“œ License MIT License Β© 2025 --- πŸ‘‰ Do you want me to **include example code for all 10 controllers in the README** (full implementations), or just keep this README as a **setup + usage guide** and document the shape types in a separate file?