Automating SVG-to-Canvas Code Export in a Build Pipeline

Fetch the schema (source of truth, no options)

Before scripting anything, confirm the contract. The options array comes back empty — there is nothing to configure for this tool.

$ curl -s -H "Authorization: Bearer $JAD_KEY" \
    https://jadapps.com/api/v1/tools/svg-canvas-exporter

{
  "slug": "svg-canvas-exporter",
  "category": "svg",
  "minTier": "developer",
  "options": [],
  "execution": { "runnerMode": "headless-browser" }
}

What the hosted /run endpoint returns (by design)

POSTing content to the hosted endpoint does not process it — it tells you to use the runner. This is the privacy guarantee, not an error in your script.

$ curl -s -X POST -H "Authorization: Bearer $JAD_KEY" \
    https://jadapps.com/api/v1/tools/svg-canvas-exporter/run -d '{}'

HTTP 400
{
  "error": "Runner required",
  "reason": "JAD's API/MCP never accepts uploads. Pair an @jadapps/runner …",
  "runnerEndpoint": "http://127.0.0.1:9789/v1/tools/svg-canvas-exporter/run",
  "schemaEndpoint": "https://jadapps.com/api/v1/tools/svg-canvas-exporter"
}

Convert one SVG through the local runner

The runner accepts the same payload on localhost and returns the generated module. Send an empty options object.

$ curl -s -X POST http://127.0.0.1:9789/v1/tools/svg-canvas-exporter/run \
    -H 'Content-Type: application/json' \
    -d '{"files":[{"name":"badge.svg","content":"<svg…><path d=\"M10 90L50 10L90 90Z\" fill=\"#6366f1\"/></svg>"}],"options":{}}' \
    > badge-canvas.js

# badge-canvas.js now contains:
# export function drawBadge(ctx) { ctx.save(); … ctx.restore(); }

Loop a whole icon folder (single-file tool, scripted batch)

Since the tool is single-file, batching is a loop. This Node snippet converts every SVG in ./icons into ./generated.

import { readdir, readFile, writeFile } from 'node:fs/promises';

const files = (await readdir('./icons')).filter(f => f.endsWith('.svg'));
for (const name of files) {
  const content = await readFile(`./icons/${name}`, 'utf8');
  const res = await fetch('http://127.0.0.1:9789/v1/tools/svg-canvas-exporter/run', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ files: [{ name, content }], options: {} }),
  });
  const js = await res.text();
  await writeFile(`./generated/${name.replace(/\.svg$/, '-canvas.js')}`, js);
}

Make a barrel + sanity-check the output

Re-export everything from one module and fail the build if any file came back with degraded arcs or an empty body.

# generated/index.js (barrel)
export * from './arrow-left-canvas.js';
export * from './badge-canvas.js';

# CI guard: warn on approximated arcs, fail on empty draw bodies
grep -l 'arc approximated as line' generated/*.js   # review these
grep -L 'ctx.beginPath' generated/*.js && exit 1     # empty → no <path> found

The hosted endpoint is upload-free; it never processes file content. Sending an SVG returns HTTP 400 with error: "Runner required" and the localhost runner endpoint to use. This is the intended privacy behaviour — point your script at 127.0.0.1:9789, not the hosted URL.

This tool runs in headless-browser mode (it needs the DOM parser). On a minimal CI image without the browser dependencies the runner can't execute it. Provision the browser the runner expects on your agent, or run the conversion on a machine that has it. Pure-text SVG tools don't have this requirement, but the Canvas Exporter does.

There is no 'send an array of SVGs, get a bundle' call for this tool — the UI is single-file and the runner processes one SVG per request. Batch by looping in your script and writing one module per file. The 20-file SVG batch cap on Pro applies to multi-file SVG tools, not to this one.

The Canvas Exporter is gated to the Developer plan. An API key without Developer entitlement won't be able to run it (and org keys are additionally scoped per tool). Ensure the key/account has Developer access before wiring it into a pipeline.

Only <path> elements are translated. SVGs built from <rect>/<circle>/<text> produce a module with an empty (or partial) draw body and no error. Add a build guard (e.g. fail if ctx.beginPath is absent) and pre-flatten primitives to paths in your asset export step.

Every A/a arc is exported as a ctx.lineTo() with an // arc approximated as line comment. In an automated run nothing fails, but rounded shapes silently straighten. Grep for the comment as a review gate, or convert arcs to cubic Béziers in your export pipeline before conversion.

The export name derives from the file stem, so icons/a/star.svg and icons/b/star.svg both yield drawStar. Re-exporting both from one barrel collides. Namespace your filenames (or rename functions after generation) before bundling.

The exporter reads literal fill/stroke attributes only. If your asset pipeline styles paths through a stylesheet or style= attribute, the generated module has no colour calls. Bake colours onto the path attributes during export, or set ctx.fillStyle in a post-processing step.