Sketchmark

A pure 2D render kernel for animated visuals. Documents contain only five element types: path, text, image, point, and group. Higher-level constructs (rectangles, arrows, charts, etc.) compile down to this format.

Quick Start

As a dependency:

npm install sketchmark

Starter template:

git clone https://github.com/anmism/sketchmark-starter.git

For AI agents:

npx skills add anmism/sketchmark --yes

Document Structure

{
  "version": 1,
  "canvas": { "width": 640, "height": 360, "background": "#f8fafc", "duration": 2, "fps": 30 },
  "elements": [...]
}

Usage

const { render, edit, validateVisualDocument } = require("sketchmark");

// Render
const svg = render.svg(doc, { time: 1 });
const html = render.html(doc);
const embed = render.embedHtml(doc, { title: "Preview" });

// Edit
const updated = edit.setProperty(doc, "element-id", "fill", "#22c55e");

CLI

sketchmark render input.visual.json out.svg
sketchmark render input.visual.json out.mp4
sketchmark preview input.visual.json
sketchmark edit input.visual.json
sketchmark lint input.visual.json

Video export requires sharp and ffmpeg.

Package Entry Points

| Entry | Purpose | |-------|---------| | sketchmark | Core kernel: validate, render, edit, keyframes | | sketchmark/presets | Authoring helpers: shapes, motions, effects | | sketchmark/editor | Editor UI | | sketchmark/preview | Preview player | | sketchmark/schema | JSON schema |

Documentation

See skills/sketchmark/ for detailed guides:

• kernel.md - Element types, properties, paints, effects, timelines
• design.md - Composition and visual construction
• animation.md - Timeline and motion
• render.md - Validation, rendering, export workflows