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