Skip to main content

API Usage

pintora API

Here is the API of @pintora/standalone.

import pintora from '@pintora/standalone'
  • Use pintora if you are using the ESM lib.
  • Use pintora.default if you are using the UMD lib.

Here are some useful APIs.

interface PintoraStandalone {
renderTo(code: string, options: RenderToOptions): void
renderContentOf(container: HTMLElement, options: RenderContentOptions = {}): void;

type RenderContentOptions = {
* sometimes you want to customize content rather than simply `innerText`
getContent?(container: HTMLElement): string | undefined
* destination container for result element,
* if not specified, pintora will create a '.pintora-wrapper' element and insert it before the container
resultContainer?: HTMLElement

renderTo(code, options)

type RenderToOptions = {
container: HTMLElement
renderer?: RendererType
onRender?(renderer: IRenderer): void
onError?(error: Error): void
enhanceGraphicIR?(ir: GraphicsIR): GraphicsIR
config?: PintoraConfig
* An option dict to specify different types of diagram event listeners
eventsHandlers?: Partial<{
[K in DiagramEventType]: (diagramEvent: IDiagramEvent) => void;

For example:

const container = document.createElement('div')

pintora.renderTo(code, {
config: {
themeConfig: {
theme: 'dark'

renderContentOf(container, options?)

This function will call pintora.renderTo underneath, and will read some dataset of the container element to get some options for one render.

  • data-renderer, pintora RendererType, currently svg and canvas are supported.

For example:

<pre className="pintora" data-renderer="canvas">
* Root
** Second

<script type="module">
import pintora from ''
document.querySelectorAll('.pintora').forEach((codeElement) => {


An event manager for Diagram Event. Let's see the types.

* A DiagramEvent eventbus
class DiagramEventManager extends EventEmitter {
addRecognizer(recognizer: IDiagramEventRecognizer): void

on<D extends keyof PintoraDiagramItemDatas = any, T extends keyof PintoraDiagramItemDatas[D] = any>(
evt: DiagramEventType,
handler: (dEvent: IDiagramEvent<D, T>) => void,
once?: boolean,
): Function

const diagramEventManager: DiagramEventManager

on(evt, handler)

Only the renders that happen after the event binding will trigger the event handler.

In the example below, only the click handler will be triggered because it is bound before the render.

const disposeClickListener = pintora.diagramEventManager.on('click', (item) => {
console.log('diagramEvent click', item)

pintora.renderTo(code, {...configs})

const disposeMouseenterListener = pintora.diagramEventManager.on('mouseenter', (item) => {
console.log('diagramEvent mouseenter', item)