@drawmotive/textgraph · JavaScript SDK

Text in. Diagram out.

A minimal JavaScript SDK integration: edit the source, render a PNG, then inspect the code below. For writing and sharing diagrams, use the Playground. For editing shapes on a canvas, see the DrawMotive editor.

TextGraph source

Syntax ↗

Live output

Loading the renderer…

The first render downloads the WebAssembly runtime. Your source stays on this device.

Use it in your own page

A small API. A real diagram.

Complete setup & Node.js guide ↗

1. Install and copy browser assets

npm install @drawmotive/[email protected]
npx textgraph-copy-assets public/textgraph/wasm

Use a JavaScript bundler such as Vite. Serve the public directory over HTTPS or localhost.

This example is plain HTML and JavaScript. View its JavaScript or browse the complete source ↗.

2. Render source into an image

import { initializeTextGraph }
  from "@drawmotive/textgraph/browser";

const graph = await initializeTextGraph({
  resolveAsset: asset =>
    new URL(`/textgraph/${asset.path}`, location.origin),
});
const result = await graph.renderPng("A -> B", {
  encoding: "base64",
});
if (result.success) {
  document.querySelector("img").src =
    `data:image/png;base64,${result.png}`;
}
await graph.dispose();