@appmockup/core

Environment-agnostic core of AppMockup: the config schema (zod) and the Canvas 2D rendering engine. Pure TypeScript, no Node- or DOM-only dependencies — it runs identically in the browser and in Node (via @napi-rs/canvas), so the web preview and CLI/MCP exports produce the same pixels.

npm i @appmockup/core

What's inside

• mockupConfigSchema / parseConfig — the config schema and parser.
• validateHeadlines(config) — cross-field check: every language has a headline.
• renderMockup(ctx, scene) + resolveScene(...) — the layered renderer (background → device frame → text).
• deviceFrameRect(canvasW, canvasH, deviceFrame) — pure device geometry, shared by the renderer and the studio's interactive overlay.
• createStarterConfig, STANDARD_OUTPUT_SIZES, TEMPLATES, parseHexColor.
• THEMES / applyTheme(config, theme) — accent color palettes that recolor a config (background, decorations, text, bezel) without touching layout.

Example

import { parseConfig, resolveScene, renderMockup } from "@appmockup/core";

const config = parseConfig(json);
const scene = resolveScene(config, config.screenshots[0], "en", config.outputSizes[0], image);
renderMockup(ctx, scene); // ctx: a Canvas 2D context (browser or @napi-rs/canvas)

See docs/config-schema.md for the field reference.

License

MIT © Yakup Bülbül