Infinite Canvas is a web-based spatial notebook that lets you organize your thoughts, code, images, and documents on an infinite 2D workspace. Think of it as a digital desk where everything floats beautifully in space.

• 🎨 Beautiful Design - Minimalist Apple-inspired aesthetic
• ♾️ Infinite Workspace - Pan and zoom freely
• 📝 Multiple Card Types - Text, Markdown, Code, Images, Sticky Notes
• 🎭 Smooth Animations - Physics-based motion with Framer Motion
• 💾 Auto-save - Local storage + optional backend sync
• 🎯 Intuitive Gestures - Drag, zoom, multi-select
• 📦 Export/Import - Save and share your canvases

• Node.js 20 or higher
• npm or yarn
• PostgreSQL 14+ (optional, for backend features)

# Clone or navigate to the repository
cd infinite-canvas

# Install all dependencies (root, client, server)
npm run install:all

# Copy environment variables
cp .env.example .env

# Edit .env with your configuration (optional)

Option 1: Full Stack (Frontend + Backend)

npm run dev

This starts:

• Frontend at http://localhost:5173
• Backend at http://localhost:3001

Option 2: Frontend Only (No Database)

cd client
npm install
npm run dev

The frontend works standalone with localStorage!

Comprehensive documentation is available in the /docs folder:

• Escape - Deselect all
• Delete / Backspace - Delete selected cards
• Cmd/Ctrl + E - Export canvas

• React 18 + TypeScript
• Vite - Lightning-fast dev server
• Zustand - State management
• Framer Motion - Animations
• TailwindCSS - Styling
• React Markdown - Document rendering

• Node.js 20 + Express
• TypeScript - Type safety
• Drizzle ORM - Database queries
• PostgreSQL - Data storage
• Zod - Validation
• Multer - File uploads

infinite-canvas/
├── client/              # React frontend
│   ├── src/
│   │   ├── canvas/     # Canvas rendering
│   │   ├── components/ # UI components
│   │   ├── nodes/      # Card types
│   │   ├── store/      # State management
│   │   ├── hooks/      # React hooks
│   │   └── utils/      # Helpers
│   └── package.json
│
├── server/              # Express backend
│   ├── src/
│   │   ├── routes/     # API routes
│   │   ├── controllers/# Business logic
│   │   ├── db/         # Database
│   │   ├── models/     # Data models
│   │   └── middlewares/# Express middleware
│   └── package.json
│
├── docs/               # Documentation
│   ├── README.md
│   ├── API.md
│   ├── DESIGN.md
│   └── ROADMAP.md
│
├── package.json        # Root scripts
├── .env.example        # Environment template
└── README.md           # This file

• Infinite zoomable workspace
• Multiple card types floating in space
• Smooth pan and zoom

• Text Notes - Simple formatted text
• Markdown - Rich documents with preview
• Code Snippets - Syntax-highlighted code
• Images - Photos and graphics
• Sticky Notes - Quick colorful notes

• Drag cards to organize
• Zoom in for detail, zoom out for overview
• Multi-select for bulk operations
• Right-click for context menu

cd client
npm run dev          # Start dev server
npm run build        # Production build
npm run preview      # Preview build

cd server
npm run dev          # Start with hot reload
npm run build        # Compile TypeScript
npm run start        # Production server
npm run db:generate  # Generate migrations
npm run db:push      # Push to database

Create a .env file:

# Server
PORT=3001
NODE_ENV=development

# Database (optional)
DATABASE_URL=postgresql://user:pass@localhost:5432/infinite_canvas

# CORS
CLIENT_URL=http://localhost:5173

Every interaction is smooth and delightful. Cards float with subtle shadows, lift on hover, and respond to gestures with physics-based animations.

Built with TypeScript throughout, comprehensive error handling, security headers, CORS protection, and optimized bundle size.

Easy to add new card types, customize styling, and extend functionality. Clean separation of concerns and modular design.

The frontend works perfectly without a backend using localStorage. Add the backend when you need sync or collaboration.

• Bundle Size: ~180KB gzipped
• First Load: <1.5s
• Smooth 60fps: Up to 50 cards
• Optimized: Code splitting, lazy loading

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

See ROADMAP.md for planned features.

This project is licensed under the MIT License - see the LICENSE file for details.

• Inspired by Apple Notes, FigJam, and Notion
• Built with amazing open-source tools
• Design philosophy influenced by Apple's Human Interface Guidelines

• 📖 Check the documentation
• 🐛 Report bugs via GitHub Issues
• 💡 Request features via GitHub Discussions
• ❓ Ask questions in Discussions

See our ROADMAP.md for upcoming features:

• Real-time collaboration
• Mobile apps
• AI-powered features
• Advanced card types
• And much more!