@genart-dev/plugin-typography

Typography design layer plugin for genart.dev — add text overlays to any sketch with customizable fonts, styles, alignment, stroke, and drop shadow. Includes MCP tools for AI-agent control.

Part of genart.dev — a generative art platform with an MCP server, desktop app, and IDE extensions.

Install

npm install @genart-dev/plugin-typography

Usage

import typographyPlugin from "@genart-dev/plugin-typography";
import { createDefaultRegistry } from "@genart-dev/core";

// Register the plugin with a renderer registry
const registry = createDefaultRegistry();
registry.registerPlugin(typographyPlugin);

// Or access individual exports
import {
  textLayerType,
  typographyMcpTools,
  BUILT_IN_FONTS,
  resolveFontStack,
} from "@genart-dev/plugin-typography";

Text Layer

Adds a "typography:text" layer type to the design layer system. Text is rendered at a specified canvas position with full styling control.

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | text | string | "Hello World" | Text content | | fontFamily | select | "Inter" | Font family | | fontSize | number | 48 | Font size in pixels (1–1000) | | fontWeight | select | "400" | "400" (Regular) or "700" (Bold) | | fontStyle | select | "normal" | "normal" or "italic" | | color | color | "#ffffff" | Text fill color | | align | select | "left" | "left", "center", "right" | | baseline | select | "top" | "top", "middle", "bottom" | | letterSpacing | number | 0 | Letter spacing in pixels | | lineHeight | number | 1.2 | Line height multiplier | | strokeColor | color | "" | Stroke color (empty = no stroke) | | strokeWidth | number | 0 | Stroke width in pixels | | shadowColor | color | "" | Shadow color (empty = no shadow) | | shadowBlur | number | 0 | Shadow blur radius | | shadowOffsetX | number | 0 | Shadow X offset | | shadowOffsetY | number | 0 | Shadow Y offset |

Built-in Fonts

8 fonts available without custom loading:

| Family | Category | Weights | |--------|----------|---------| | Inter | sans-serif | 400, 700 | | JetBrains Mono | monospace | 400 | | Georgia | serif | 400, 700 | | Arial | sans-serif | 400, 700 | | Helvetica | sans-serif | 400, 700 | | Times New Roman | serif | 400, 700 | | Courier New | monospace | 400, 700 | | Verdana | sans-serif | 400, 700 |

MCP Tools (4)

Exposed to AI agents through the MCP server when this plugin is registered:

| Tool | Description | |------|-------------| | set_text | Add a text layer or update an existing one by layer ID | | apply_text_style | Update font, size, weight, color, alignment on a text layer | | set_text_shadow | Set drop shadow properties on a text layer | | list_fonts | List all available built-in fonts with metadata |

API Reference

textLayerType

The LayerTypeDefinition for "typography:text" layers. Registered automatically when using registry.registerPlugin(typographyPlugin).

BUILT_IN_FONTS

import { BUILT_IN_FONTS } from "@genart-dev/plugin-typography";

for (const font of BUILT_IN_FONTS) {
  console.log(font.family, font.category, font.weights);
}

resolveFontStack(family)

Resolves a font family to a full CSS font stack with appropriate fallbacks:

import { resolveFontStack } from "@genart-dev/plugin-typography";

resolveFontStack("Inter");
// → "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"

resolveFontStack("JetBrains Mono");
// → "'JetBrains Mono', 'SF Mono', 'Fira Code', monospace"

Related Packages

| Package | Purpose | |---------|---------| | @genart-dev/core | Plugin host, layer system (dependency) | | @genart-dev/mcp-server | MCP server that surfaces plugin tools to AI agents |

Support

Questions, bugs, or feedback — [email protected] or open an issue.

License

MIT