How to vibe codeCraft
Productivity app for notes, tasks, and docs
craft.do ↗Productivity
The verdict: can you vibe code Craft?
Build a web-based subset using Next.js and TipTap, but expect significant friction replicating the buttery native block-editor performance.
Craft's primary competitive advantage is its exquisite native SwiftUI performance on macOS and iOS, combined with a bespoke block architecture. Replicating that exact tactile feeling as a solo developer with AI coding tools is a massive undertaking. While you can build a very capable web clone using Next.js and a rich text framework like TipTap, managing nested block structures, inline commands, and multi-device sync without bugs will require weeks of intense debugging.
Estimated effort: 6-8 weeks of focused development
What you can't replicate
- The native macOS/iOS SwiftUI performance and fluid platform-specific animations
- Apple Mac App of the Year brand prestige and design pedigree
Founded
2019
Raised
$20.2M
Team
11-50
Cheapest paid tier
$0
What Craft does
A block-based productivity and document-creation platform designed for notes, tasks, calendars, whiteboards, and collaborative wikis.
Core features
- Block-based structured document editor (paragraphs, toggles, lists)
- Spaces, folders, and nested page hierarchy
- Collections / relational tables
- Task management and calendar integration
- Web publishing and link sharing
- AI text assistance integration
The business
Pricing
- Free$0
- Plus$8/mo
- Family$15/mo
- Team$50/mo
Funding
$20.2M from Creandum, EBRD Venture Capital, InReach Ventures, Gareth Williams
Pay vs build, cumulative
Break-even at month 3 — after that, every month is money kept.
The hard parts of vibe coding Craft
- Building a buttery-smooth native block editor with precise cursor handling
- Real-time block synchronization across multiple client devices
- Local-first caching and conflict resolution
- Complex cross-platform native UI consistency (macOS, iOS, Windows)
How to vibecode Craft
Prerequisites
Node.jsfree
Required for running the Next.js development environment and package manager.
GitHubfree
Source code control and deployment pipeline integration.
AI coding tools
Recommended stack
| Frontend | Next.js with Tailwind CSS and TipTap / ProseMirror for the block editor |
|---|---|
| Backend | Next.js API routes / Server Actions |
| Database | Turso (SQLite at the edge for lightning-fast personal document storage) |
| Auth | better-auth (self-hosted TypeScript auth with zero MAU fees) |
| Payments | Skip (personal-use clone) |
| Other | Anthropic API for AI writing assistant features |
Build guide
01Project Scaffolding & Database Schema
Initialize a modern Next.js project with TypeScript and Tailwind CSS, configure Turso SQLite connection, and define database schemas for users, spaces, folders, documents, and individual blocks.
Scaffold a new Next.js project with App Router, TypeScript, and Tailwind CSS. Configure Drizzle ORM to connect to a Turso SQLite database. Create database tables for users, spaces, folders, documents, and blocks. The blocks table must support hierarchical nesting (parent_id), block type (paragraph, heading, toggle, task, bullet), content (JSON or text), and sort order. Ensure proper foreign key constraints and indexes.02Authentication System
Integrate better-auth for secure user registration and login, ensuring all database queries are scoped to the authenticated user.
Install and configure better-auth in the Next.js application using Turso as the backing database adapter. Implement email/password authentication along with protected route middleware for application dashboards. Create clear sign-in and sign-up UI views using Tailwind CSS matching a clean productivity aesthetic.03Sidebar Navigation & Space Management
Build the sidebar layout featuring spaces switching, folder organization, nested pages, and starred documents.
Build a responsive sidebar component for a productivity workspace. It must support switching between 'Personal' and 'Work' spaces, expanding/collapsing folder trees, listing documents nested within folders, and toggling starred document status. Implement state management and server actions to create, rename, delete, and move documents and folders.04Block-Based Editor Core
Implement a Notion/Craft-style block-based editor supporting slash commands, drag reordering, and nested toggles.
Implement a rich block-based document editor using TipTap or ProseMirror within the Next.js app. Each block must act as a distinct node supporting slash commands (typing '/' opens a menu to insert headings, bullet lists, tasks, toggles, or code blocks). Ensure keyboard navigation (Enter creates a new block, Backspace on empty block deletes it) works smoothly. Save block state back to the Turso database with debounce auto-saving.05Collections and Tasks Management
Add database-backed collections (tables) and a unified task inbox view aggregating tasks from all documents.
Build a collections/table view component where users can define custom structured attributes (Text, Select, Date, Author) for rows inside a document. Additionally, create a global 'Tasks' view that queries all task-type blocks across every document owned by the user, grouping them into Inbox and Today views with interactive completion checkboxes.06Web Publishing & AI Assistant
Implement public document publishing via shareable links and integrate AI text assistance using the Anthropic API.
Add a document publishing feature that generates a secure public URL slug, rendering a clean read-only view of the document tree without requiring authentication. Also integrate an AI assistant toolbar action utilizing the Anthropic API to summarize selected block text, rewrite paragraphs, or generate new content directly into the document editor.
Cost vs paying for Craft
What will you build it with?
Starting total with Claude Code$0 one-time
Starting costs (one-time)
- AI coding credits (Claude/Cursor)$20
Total~$20 one-time
Ongoing costs (monthly)
- Vercel Hobby & Turso Free$0/mo
Total$0/mo
Paying for Craft
$8/mo
Your time to build
40-60 hours
AI tool credits
$20
Break-even
Never (built for learning and personal use)
Vibe code Craft: FAQ
- Can you vibe code Craft yourself?
- Serious undertaking — 45/100 vibecodeable. Build a web-based subset using Next.js and TipTap, but expect significant friction replicating the buttery native block-editor performance.
- How long does it take to vibe code Craft?
- 6-8 weeks of focused development — roughly 40-60 hours of hands-on time with an AI coding agent.
- How do you build your own Craft?
- Scoped to personal use: Next.js with Tailwind CSS and TipTap / ProseMirror for the block editor on the front, Next.js API routes / Server Actions behind it, Turso (SQLite at the edge for lightning-fast personal document storage) for data. Follow the 6-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Craft without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 6-8 weeks of focused development. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Craft instead of paying?
- About ~$20 one-time to start and $0/mo to run, versus $8/mo for Craft. Break-even: Never (built for learning and personal use).
- What stack should you use to vibe code Craft?
- Next.js with Tailwind CSS and TipTap / ProseMirror for the block editor; Next.js API routes / Server Actions; Turso (SQLite at the edge for lightning-fast personal document storage); plus Anthropic API for AI writing assistant features.