HTML Export

Overview

The @polotno/html-export package converts a Polotno design into an HTML string. It works directly on plain design JSON — no running editor or store instance is required — so you can export a saved design, or export from a page that never mounts the full editor.

The exporter is browser-first: it renders through the DOM, so it runs best in the browser. It can run server-side in Node under jsdom (see Using in Node), but with some fidelity trade-offs; for pixel-accurate server-side rendering use polotno-node.

Installation

npm install @polotno/html-export

Basic Usage

Pass the design JSON (from store.toJSON(), a saved file, or any source) to jsonToHTML:

import { jsonToHTML } from '@polotno/html-export';

const html = await jsonToHTML(store.toJSON());

jsonToHTML returns a Promise<string> containing the rendered HTML.

API Reference

jsonToHTML(json, options?)

Renders a Polotno design into an HTML string.

Parameters:

• json (required): plain design JSON (e.g. from store.toJSON()).
• options (optional):
  • elementHook({ dom, element }) — post-process each element's virtual node before it is serialized. dom is a lightweight JSX-like object with type, props, and children; mutate and return it.
  • textOverflow — how text taller than its box is handled: 'change-font-size' (default, shrinks the font to fit), 'resize', or 'ellipsis'.
  • textSplitAllowed — boolean (default false); whether shrink-to-fit measurement may wrap a long word mid-word.

import { jsonToHTML } from '@polotno/html-export';

const html = await jsonToHTML(store.toJSON(), {
  elementHook: ({ dom, element }) => {
    // add a custom class to every element
    dom.props.className = `element-${element.type}`;
    return dom;
  },
});

jsonToDOM(json, options?)

Same as jsonToHTML but returns the DOM tree instead of a serialized string — useful when you want to mount or further manipulate the result in the browser.

Using in Node

In Node, run the exporter under jsdom to provide the DOM it needs:

import { JSDOM } from 'jsdom';
import { jsonToHTML } from '@polotno/html-export';

const dom = new JSDOM();
global.document = dom.window.document;
global.window = dom.window;

const html = await jsonToHTML(designJson);

Limitations