Mozaika

Crochet/knit pattern composition tool for pen plotters. Renders stitch patterns as SVG with Inkscape-compatible layer output.

Features

• SVG canvas with mm-scale rulers and dotted grid
• Paper format selection (A5/B5/A4/A3, portrait/landscape)
• Configurable bleed margin, cell size, pen width, and paper color
• Built-in stitch patterns: checkerboard, diagonal, diamond, stripes, houndstooth, zigzag, brick, hearts, waves, polka
• Expression-based pattern editor with Monaco (syntax highlighting, autocompletion)
• Combine patterns with math: checkerboard() + diagonal(4, 1, 0) * diamond(7, 1)
• Tiled pattern editor: draw pixel-art tiles and arrange them on a placement grid with drag-and-drop reordering
• Pattern management: save expressions as reusable pattern functions, fork to edit, rename, delete with confirmation
• Thumbnail-based pattern picker with library and save shortcuts
• Configurable fill and empty cell colors with inline hex/RGB/HSV text inputs, alpha, and swatch picker
• Independent border radius and size distribution for filled and empty cells
• Zoom and pan (scroll wheel, pinch, drag)
• SVG export with hatch fill lines, cell outlines, and bleed clipping
• PNG export at selectable DPI (72–600) with optional transparent background
• Export preview drawer with format toggle (SVG/PNG) before download
• Dark/light theme
• Undo/redo with debounced gesture coalescing
• Save/load drawings organized in notebooks (persisted in IndexedDB)
• Notebook-level default document properties (format, color, cell size, pen width, bleed) inherited by new drawings
• Override warnings when drawing properties differ from notebook defaults
• macOS-style menu bar with keyboard shortcuts (File, Edit menus)
• Command bar with icon shortcuts
• Document properties dialog with live paper preview
• Saved/unsaved status indicator with document info (paper color, format, name)

Prerequisites

• Bun

Alternatively, run the project inside the included devcontainer (requires Docker and Docker Compose) — see Devcontainer.

Getting Started

bun install
bun run dev

Devcontainer

The repo ships with a .devcontainer/ config that provides an isolated, reproducible environment with Node.js 24.4.1, Bun, Claude Code, Aikido safe-chain, and GitHub CLI preinstalled.

Open the folder in a Dev Containers–aware editor (VS Code, Cursor, etc.), or run it from the terminal:

bun run container:up      # build and start the container (serves Vite on http://localhost:5173)
bun run container:shell   # in another terminal: open a bash shell inside the running container
bun run container:down    # stop and remove the container

Commands

• bun run dev — Start dev server
• bun run build — Type-check and build for production
• bun run lint — Run oxlint
• bun run fmt — Format with oxfmt
• bun run fmt:check — Check formatting
• bun run test — Run tests
• bun run preview — Preview production build
• bun run container:up — Build and start the devcontainer
• bun run container:down — Stop and remove the devcontainer
• bun run container:shell — Open a bash shell inside the running devcontainer

Keyboard Shortcuts

Shortcut	Action
⌘N	New drawing (reset to defaults)
⌘O	Open notebooks dialog
⌘S	Save (or Save As if untitled)
⇧⌘S	Save As
⌘Z	Undo
⇧⌘Z	Redo
⇧⌘D	Document Properties

Tech Stack

• React 19 + TypeScript 5.9
• Vite 7
• Tailwind CSS 4
• shadcn/ui (Radix UI + CVA)
• Zustand (state management)
• React Router 7 (client-side routing)
• Monaco Editor (expression editor)
• IndexedDB via idb (browser persistence)
• Zod 4 (schema validation)
• Vitest + Testing Library (testing)
• oxlint + oxfmt (linting & formatting)