# How to Vibe Code Your Own Milanote (and Stop Paying for It)

> The visual board for organizing creative projects

- Site: https://milanote.com
- Category: Visual Collaboration / Productivity SaaS
- Platforms: Web app, macOS app, Windows app, iOS app, Android app, Browser extension
- Verdict: **Serious undertaking** (42/100 vibecodeable)
- Estimated effort: 4-6 weeks of part-time work

## Verdict

Build a simplified web-only spatial board for personal use, but expect heavy debugging around canvas rendering performance and multiplayer state syncing.

Cloning Milanote's core value—a visual workspace with diverse node types—is a serious engineering undertaking. While an AI coding agent can quickly scaffold a Next.js frontend with Tailwind and a basic drag-and-drop grid, keeping an infinite spatial canvas smooth at 60fps while orchestrating multi-user Yjs CRDT bindings, image uploads, and nested board hierarchies will require manually untangling complex state bugs. Real-time multiplayer canvas state synchronization breaks down easily without careful architecture.

### What you can't replicate

- The polished 10-year ecosystem of creative templates and niche workflow guides
- The exact browser extension user base and native app distribution network

## What it does

Milanote is a visual collaboration platform designed for creative professionals, combining infinite spatial canvases, moodboards, mind maps, sticky notes, and media asset integration into a flexible project hub.

### Core features

- Infinite zoomable and pannable spatial canvas
- Heterogeneous node types (sticky notes, links, columns, sketches, videos, files)
- Real-time multiplayer synchronization and presence cursors
- Drag-and-drop file and image upload pipeline with asset storage
- External Pexels image search integration
- Web clipper browser extension for capturing DOM snippets
- Nested boards and board hierarchy navigation
- Comments and team feedback threads on specific nodes

## The business

### Pricing

- Free: Free — Up to 100 notes, images or links, 10 file uploads, and unlimited shared boards.
- Individual: $9.99 / mo — Billed annually ($12.50/mo billed monthly).
- Team: $49 / mo — Billed annually for up to 10-50 people.

### Funding

$600k–$800k USD raised.
- Seed (April 2017)
Investors: Simon Martin

Founded 2016.
Team size: ~22-23.

## The hard parts

- Achieving 60fps buttery-smooth panning, zooming, and spatial sorting across hundreds of DOM/canvas elements
- Implementing CRDT-backed real-time multi-user conflict resolution for spatial object coordinates and nested trees
- Building a performant binary media upload, scaling, and caching pipeline for images, PDFs, and videos
- Designing a robust browser extension that serializes DOM fragments and communicates with the web app securely

## How to vibe code Milanote

### Prerequisites

- Node.js (free): Required runtime for executing the Next.js full-stack development environment.
- GitHub (free): Code repository hosting and integration with Vercel deployment pipelines.

### Recommended AI tools

- Claude Code: Best-in-class terminal coding agent for scaffolding multi-file features, managing database schemas, and writing complex React components.
- Cursor: Ideal AI code editor for inspecting canvas diffs, refining spatial drag-and-drop interactions, and styling UI components.

### Stack

- Frontend: Next.js with Tailwind CSS and React Flow / custom pan-zoom canvas hooks
- Backend: Next.js Server Actions and API Routes with Liveblocks for real-time multiplayer sync
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: None (personal use clone)
- Other: Liveblocks for real-time multiplayer cursors and CRDT state, Vercel AI SDK, UploadThing for asset and image uploads

### Hosting

- Vercel (Hosting the Next.js web application and edge serverless routes.): $0-20/mo
- Turso (Serverless SQLite database for storing board metadata, node coordinates, and user accounts.): $0/mo

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js project, configure Tailwind CSS, set up Turso with Drizzle ORM, and configure better-auth for single-user authentication.

```
Scaffold a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS v4. Initialize Drizzle ORM configured with a Turso SQLite database connection. Create database schemas for users, workspaces, boards, and canvas_nodes. The canvas_nodes table must store id, board_id, type (note, image, link, column), x coordinate, y coordinate, width, height, z-index, and content (JSON payload for text, URLs, or file references). Configure better-auth for email/password authentication with Turso adapter support. Ensure all TypeScript types are fully articulated and strict mode is enabled. Write a migration script and verify local connectivity.
```

2. **Infinite Spatial Canvas Core Mechanics** — Build the infinite pannable and zoomable canvas viewport with custom pointer event handlers and node positioning logic.

```
Create a high-performance interactive InfiniteCanvas React component in src/components/canvas/InfiniteCanvas.tsx. Implement mouse drag panning, scroll wheel zooming (clamped between 0.1x and 4x), and coordinate transformation mapping between screen space and canvas world space. Add support for creating sticky notes, text blocks, and color-coded cards directly on the canvas via a toolbar. Implement client-side local state management for node dragging with CSS transform matrices to guarantee 60fps fluid rendering without full-tree React re-renders. Ensure proper touch and mouse event isolation so panning does not conflict with dragging individual nodes.
```

3. **Heterogeneous Node Renderers & Asset Uploads** — Implement specialized node components for notes, links, and file/image uploads backed by UploadThing.

```
Build modular node renderer components inside src/components/canvas/nodes/ for StickyNoteNode, TextNode, LinkNode, and ImageNode. Integrate UploadThing for binary file and image uploads, allowing users to drag and drop images or documents directly onto the canvas or paste them from the clipboard to generate an ImageNode. Implement a search modal that queries the Pexels API to let users pick and insert stock photography onto the canvas. Store node content updates debounced via Server Actions to persist coordinates and text state back to Turso.
```

4. **Real-Time Multiplayer Collaboration with Liveblocks** — Integrate Liveblocks to enable real-time collaborative editing, presence cursors, and live board updates.

```
Integrate Liveblocks into the infinite canvas architecture to support real-time multi-user collaboration. Configure Liveblocks room provider and Yjs client bindings to synchronize canvas node positions, resizing events, and node creation across active sessions. Implement remote user presence indicators and colored cursor overlays showing collaborators' names and current positions on the canvas. Handle edge cases where concurrent node drags by multiple users occur without race conditions or jittery position resets. Verify multi-tab synchronization works smoothly locally.
```

5. **Board Hierarchies and Navigation Sidebar** — Add nested board creation, breadcrumb navigation, and sidebar workspace management.

```
Develop a collapsible sidebar component in src/components/sidebar/WorkspaceSidebar.tsx that displays a hierarchical tree of boards and nested sub-boards. Implement Server Actions and database relations allowing users to create sub-boards inside existing boards, move nodes between boards, and use breadcrumbs at the top of the canvas viewport to navigate back up the hierarchy. Ensure board deletion cascades cleanly to child boards and associated canvas nodes. Style the sidebar to match Milanote's clean, minimalist creative aesthetic using Tailwind CSS.
```

6. **Polish, Comment Threads, and Verification** — Add node-level commenting, keyboard shortcuts, export utilities, and run a comprehensive QA pass.

```
Implement node-level commenting threads where users can click any canvas node to open a comment drawer, leave feedback replies, and resolve discussion items. Add global keyboard shortcuts (e.g., Space+Drag to pan, Delete/Backspace to remove selected nodes, Cmd+Z for history undo/redo). Build a lightweight board export utility that generates a clean layout summary. Audit all components for accessibility, responsive error boundaries, and loading skeletons. Write integration tests for board node persistence and verify the build compiles cleanly without errors.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom domain (optional): $12/yr
- Total: $12 one-time

**Ongoing costs (monthly):**

- Vercel Hobby & Turso Free tiers: $0/mo
- Liveblocks Free tier (up to 50 MAU): $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $9.99/mo
- Build time: 35-50 hours
- AI tool credits: $20/mo (Claude Pro / Cursor)
- Break-even: Never (built for personal use & learning)

## Sources

- [Milanote Marketing & Product Scraped Pages](https://milanote.com)
- [PitchBook Company Profile for Milanote](https://pitchbook.com)
- [GetLatka Revenue & Growth Profile](https://getlatka.com)