Experimental: Canvas to Code - Transform your Excalidraw sketches into React components!
A fun, experimental project that bridges the gap between design and development. Sketch your ideas in Excalidraw and watch them transform to React Components.
excalireact-demo.mov
As a long-term user and maintainer of Excalidraw, I always use Excalidraw for any mockups or diagrams and want to turn them into code.
I wanted to go deeper into how to transform canvas to code and hence started on this experimental project to achieve the same. Currently this project is heavily in progress.
- Real-time conversion - See your React code update as you sketch
- UI Elements - Built-in buttons, inputs, and links
- Live preview - Toggle between sketch and generated code
- Monaco editor - Full-featured code editor with syntax highlighting
- Export ready - Copy generated JSX directly to your project
- Node.js 20+
- pnpm (recommended), yarn or npm
# Clone the repository
git clone git@github.com:ad1992/ExcaliReact.git
cd ExcaliReact# Install dependencies
pnpm install
# Start the development server
pnpm dev# Development server
pnpm dev# Build for production
pnpm build# Preview production build
pnpm preview
# Lint code
pnpm lint- React 19 - Latest React with concurrent features
- Excalidraw - Canvas based editor for sketching hand-drawn like diagrams
- TypeScript - Type-safe development
- Vite - Fast build tool
- Tailwind CSS - Utility first CSS framework
- Monaco Editor - VS Code editor in the browser
New contributions are most welcome. This is an experimental project with plenty of room for innovation.
Before you start: Please open an issue and lets discuss :).
Built as a fun experiment to explore the intersection of design and development.
© 2025 ExcaliReact. Made with ❤️