Craft icon

Can I vibecode Craft?

price $10/moyou'd save $120/yrbuild time one sittingcategory notes-knowledgereplaced by 0 people
KINDA
MOATexecution polishcollaboration

The core loop is buildable, but a dependable replacement becomes a real weekend or multi-day project. For Craft, write visually polished documents, link them, and export a portable personal library. The hard boundary is native apps, sync, publishing, collaboration, and strong block-editor polish, plus sync, collaboration, and capture polish.

In-List Ad$79/30 days
promote your product in the vibecoded list

The Build Prompt

copy it and go build
ready to paste · 3,094 chars
Build a local-first, block-based personal document editor inspired by Craft's unique aesthetic and architecture, starting in an empty repository.
Use Next.js (App Router), React, TypeScript, Tailwind CSS, and a robust block-editor framework (e.g., Plate.js or Editor.js). Use IndexedDB for local storage and provide seamless Markdown export.

### Core Features & Value Proposition
The goal is to write visually stunning, polished documents effortlessly, structure them via nested pages and bidirectional wiki links, and navigate them instantly.
*   **Block-Based Architecture:** Every paragraph, image, list, or callout is a distinct block. Users can easily drag, drop, reorder, style, and nest these blocks.
*   **Aesthetic Excellence:** Emulate a high-end, native feel with smooth micro-animations, tasteful glassmorphism, precise typography (e.g., Inter font), and a refined dark/light mode. The app must look presentation-ready out of the box.
*   **Visual Polish:** Support document cover images, customizable page widths, and distinct block styles (like highlighted callouts with emojis).
*   **Knowledge Base Integration:** Support `[[wiki-linking]]` for rapid page creation and referencing. Automatically show a "Backlinks" section at the bottom of each document.
*   **Daily Notes:** Integrate a subtle calendar for daily journaling and capture.

### UI Layout & Key Interactions
*   **Collapsible Sidebar:** Features a fast fuzzy-search bar (Cmd+K command palette), Daily Notes access, nested document tree, and pinned items. Use a slightly translucent background.
*   **Main Editor Canvas:** A distraction-free, margin-rich writing pane. Document titles should be bold and prominent. Hovering over a block should reveal a subtle drag handle (six dots) and a "+" button for rapid block insertion.
*   **Slash Commands:** Typing `/` must instantly open a beautiful dropdown menu to insert specialized block types (Headers, Checklists, Code snippets, Quotes, Dividers, Images).
*   **Properties Panel:** A toggleable right sidebar showing document metadata, word count, and a dynamic table of contents.

### Step-by-Step Implementation Instructions
1.  **Project Setup:** Initialize a Next.js app with Tailwind CSS. Set up a local IndexedDB wrapper for data persistence.
2.  **Data Schema:** Design a JSON schema representing documents as arrays of block objects, alongside metadata (title, timestamps, cover image URL, tags).
3.  **Editor Integration:** Implement the core block editor. Prioritize custom rendering for blocks to guarantee premium typography and spacing.
4.  **Navigation & Sidebar:** Build the recursive document tree sidebar and dynamic Next.js routes for viewing specific pages.
5.  **Linking System:** Implement the Cmd+K command palette for global search. Add parsing for `[[links]]` during text entry to map relationships.
6.  **Export Functionality:** Provide an "Export Workspace" feature that converts the block-based JSON into standard Markdown files.

Focus exclusively on a premium local experience. Omit cloud sync, multiplayer, and auth. Provide a README.
In-List Ad$79/30 days
promote your product in the vibecoded list

What you lose

  • Hosted infrastructure and managed operations from Craft
  • The original service's mature integrations and ecosystem
In-List Ad$79/30 days
promote your product in the vibecoded list
Share on X ->Your vote helps rank the vibecoded list.

Questions

5 answers