Add components

Use willRenderCanvas to alter the appearance of the image preview, for example, to overlay a circular crop guide.

The willRenderToolbar property can be used to add controls to the main toolbar.

The willRenderUtilTabs property can be used to adjust or add controls in the main util menu.

The willRenderShapeControls property is used to add or remove controls from shape popup menu.

The willRenderShapeTextControls property is used to add or remove controls from shape text popup menu.

Use cropWillRenderTools to adjust the toolbar contents of the crop interface.

Use resizeWillRenderFooter to adjust the footer of the resize plugin.

Use stickersWillRenderShapePresetToolbar to add items to the sticker toolbar. Use the mount property on a sticker to adjust the look and feel of a sticker thumbnail.

The finetune, frame, fill, and filter plugin each have properties to control which options show in their footers. Additionally it's possible to set up custom finetune controls, frames, and filters.

willRender

We can pass custom nodes to willRender methods that receive a PinturaNodeList.

See createNode for information on which nodes we can add.

const editor = willRenderToolbar({
    src: 'my-image.jpeg',
    willRenderToolbar: (nodeList, env, render) => {
        // Replace, remove, update, or add nodes to `nodeList` here, then return when done

        return nodeList;
    },
});