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

> Productivity app for notes, tasks, and docs

- Site: https://craft.do
- Category: Productivity
- Platforms: macOS app, iOS app, iPadOS app, Windows app, Android app, Web app
- Verdict: **Serious undertaking** (45/100 vibecodeable)
- Estimated effort: 6-8 weeks of focused development

## Verdict

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.

### 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

## What it 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 raised.
- Series A ($8 million)
- Series B ($12.2 million)
Investors: Creandum, EBRD Venture Capital, InReach Ventures, Gareth Williams

Founded 2019.
Team size: 11-50.

## The hard parts

- 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 vibe code Craft

### Prerequisites

- Node.js (free): Required for running the Next.js development environment and package manager.
- GitHub (free): Source code control and deployment pipeline integration.

### Recommended AI tools

- Claude Code: Best-in-class agentic coding tool for scaffolding complex full-stack web applications and iterating through debugging loops.
- Cursor: AI-native code editor ideal for fine-tuning complex frontend block components and managing inline text editor state.

### 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

### Hosting

- Vercel (Hosting the Next.js frontend and serverless API endpoints with zero-config preview deployments.): $0/mo (Hobby Tier)
- Turso (Serverless SQLite database storage for pages, blocks, and user data.): $0/mo (Free Tier)

### Build guide

1. **Project 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.
```

2. **Authentication 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.
```

3. **Sidebar 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.
```

4. **Block-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.
```

5. **Collections 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.
```

6. **Web 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

**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 the SaaS instead: $8/mo
- Build time: 40-60 hours
- AI tool credits: $20
- Break-even: Never (built for learning and personal use)

## Sources

- [Craft Official Website & Pricing](https://craft.do)