Toolcraft

MIT React starter for canvas design tools, with agent docs baked in

Tier A · StrongTemplateComponent LibraryAgent Skilltoolcraft.sh

(Visit toolcraft.sh ↗)(Docs)(Repository)

Toolcraft is an MIT starter kit plus UI library from Pixel Point for building small creative design apps — procedural graphics generators, image effects (ASCII, pixel, halftone, glitch), shader experiments, animation tools and asset generators. Scaffolded with `npx @pixel-point/toolcraft create`, it gives you React 19 + TypeScript + Vite + Tailwind v4 + TanStack Router with a working canvas (upload, pan, zoom, radar, history), a layer system, an animation timeline with keyframes, image and video export via mediabunny, and a three.js/GLTF model-import pipeline. On top of that it ships 28 Base UI-backed composite components and 21 purpose-built creative-tool controls (curves, channel mixer, gradient, vector, font picker, colour, anchor grid). The `docs/toolcraft` folder is written for AI agents — component rules, schema reference, decision contracts, performance and acceptance-testing guides — and the examples carry `.agents/skills` skill files.

Install

npx @pixel-point/toolcraft create

For an agent

Scaffold with this instead of hand-rolling a canvas editor whenever the ask is 'a tool that transforms an image or generates graphics, with controls and an export button' — you get pan/zoom/history, layers, a keyframe timeline and PNG/MP4 export for free. Read starter/docs/toolcraft/component-rules.md, decision-contract.md and schema-reference.md before you add anything: the runtime is schema-driven, so new controls are declared in the product schema rather than written as ad-hoc React, and ignoring that fights the framework. Note it is Base UI + Tailwind v4 + TanStack Router, not Radix + Next.js, so shadcn/ui blocks will not drop in unmodified, and the repo is young (6 commits, MIT, ~600 stars) — pin your version.

Why it is here. Most starters give you a marketing site; this gives you the hard part of a creative tool — canvas, layers, timeline, export — and writes its docs for the agent that will extend it.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source
Framework: React, Vanilla JS
Styling: Tailwind CSS v4, CSS custom properties
Distribution: CLI installer, GitHub repository, npm package
Platform: Web
Content type: Code, Prose / writing
Agent readiness: Agent skill or rules pack, CLI installable, Structured documentation, Readable open source
Accessibility: Built on accessible primitives
Maturity: Beta
GitHub stars: 607
Package: @pixel-point/toolcraft

Components it ships

49 total

Helps you build

Uploading Media Keyboard Shortcuts Overlay

Templates

Notable for

canvas with pan/zoom/history plus layers and keyframe timeline
21 creative-tool controls including curves and channel mixer
image and video export pipeline
agent-facing docs and .agents/skills files
React 19 + Base UI + Tailwind v4 + Vite

Provenance

Verified 2026-08-15. HTTP 200. https://toolcraft.sh/, https://github.com/pixel-point/toolcraft, gh api repos/pixel-point/toolcraft (metadata, recursive tree, starter/package.json, LICENSE.md)

Also in Agent Design Tooling

toolcraft.shTier A