CanvasGen

Inspiration

CanvasGen was inspired by the gap between designing a UI and building it. We wanted to make form creation more visual, interactive, and AI-friendly.

What it does

Users can drag inputs, buttons, and frames onto a canvas, group them into functional forms, preview them live, and view generated React code. MCP support lets AI assistants edit the canvas too.

What we learned

We learned how to combine React canvas interactions, live state synchronization, generated UI code, and MCP tools into one smooth workflow.

Challenges

The biggest challenge was keeping dragging, resizing, nested frames, layouts, previews, and remote AI edits synchronized.

Built With

• css
• docker
• nginx
• node.js
• react
• rest-api
• typescript
• vite
• zod