# Add components

Use [willRenderCanvas](../../api/ui/properties/#willrendercanvas) to alter the appearance of the image preview, for example, to overlay a circular crop guide.

The [willRenderToolbar](../../api/ui/properties/#willrendertoolbar) property can be used to add controls to the main toolbar.

The [willRenderUtilTabs](../../api/ui/properties/#willrenderutiltabs) property can be used to adjust or add controls in the main util menu.

The [willRenderShapeControls](../../api/markup-editor/properties/#willrendershapecontrols) property is used to add or remove controls from shape popup menu.

The [willRenderShapeTextControls](../../api/markup-editor/properties/#willrendershapetextcontrols) property is used to add or remove controls from shape text popup menu.

Use [cropWillRenderTools](../../api/plugins/crop/#cropwillrendertools) to adjust the toolbar contents of the crop interface.

Use [resizeWillRenderFooter](../../api/plugins/resize/#resizewillrenderfooter) to adjust the footer of the resize plugin.

Use [stickersWillRenderShapePresetToolbar](../../api/plugins/sticker/) to add items to the sticker toolbar. Use the [mount](../../api/markup-editor/stickers/#altering-the-sticker-thumbnail) 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](../../api/ui/exports/#createnode) for information on which nodes we can add.

```js
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;
    },
});
```