Customizing the editor interface

Customizing the editor interface can be done by setting properties on the editor instance or setting CSS Custom Properties on either the pintura-editor element or the .pintura-editor class.

Editor properties

Editor properties can be used to disable interface elements, alter elements, or re-order and re-label interface elements.

Disabling elements

The following selection of editor properties help with disabling components. Please consult the related pages for more information.

These generic editor options controls which parts of the user interface are active:

  • enableToolbar
  • enableUtils
  • enableButtonClose
  • enableButtonExport
  • enableButtonRevert
  • enableNavigateHistory

These crop plugin specific properties control which buttons and controls are enabled:

  • cropEnableButtonFlipHorizontal
  • cropEnableButtonFlipVertical
  • cropEnableButtonRotateLeft
  • cropEnableButtonRotateRight
  • cropEnableButtonToggleCropLimit
  • cropEnableImageSelection
  • cropEnableInfoIndicator
  • cropEnableLimitWheelInputToCropSelection
  • cropEnableRotationInput
  • cropEnableSelectPreset
  • cropEnableZoomInput
  • cropEnableZoomAutoHide
  • cropEnableCenterImageSelection

This sticker plugin property toggles the browse sticker button in its footer.

  • stickerEnableSelectImage

Ordering elements

These generic editor properties allow us to control on which side of the editor the menu is positioned.

  • layoutDirectionPreference
  • layoutHorizontalUtilsPreference
  • layoutVerticalUtilsPreference

We can re-order the main menu utils, or remove utils by altering the contains of the utils array.

The markupEditorToolbar property controls which utils are shown in the markup editor toolbar and in which order.

Altering elements

We can set different labels and languages by adjusting the locale property.

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 willRenderShapeControls properties is used to add or remove controls from shape 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, 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.

Styles

In the examples below we will use the .pintura-editor class selector. If we use the Custom Element version of Pintura Image Editor we can use the element selector pintura-editor instead (ommitting the dot).

You can quickly control the editor theme by adjusting the Pintura Image Editor Custom Properties.

Color Theme

To change the overall color of Pintura Image Editor we can adjust the --color-background and --color-foreground RGB values. Pintura Image Editor will automatically generate different shades of colors to render the UI. Same goes for the --color-focus variable.

Note that the values for these properties need to be supplied in RGB format, 255, 255, 255, without the rgb() function.

.pintura-editor {
    --color-background: 255, 255, 255;
    --color-foreground: 0, 0, 0;
}

To change to dark mode we can switch the color values.

.pintura-editor {
    --color-background: 0, 0, 0;
    --color-foreground: 255, 255, 255;
}

To automatically switch to dark mode based on the users system preferences we can use the prefers-color-scheme media query.

.pintura-editor {
    --color-background: 255, 255, 255;
    --color-foreground: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
    .pintura-editor {
        --color-background: 0, 0, 0;
        --color-foreground: 255, 255, 255;
    }
}

We can change the focus ring color to red using the --color-focus CSS variable.

.pintura-editor {
    --color-focus: 255, 0, 0;
}

To adjust the color of the image preview outline and it's crop guides we can use the --color-preview-outline property.

.pintura-editor {
    --color-preview-outline: 255, 0, 0;
}

In older versions of Pintura Image Editor this property was called --preview-border-color

Setting primary and secondary colors can be done with the --color-primary and --color-secondary properties, these properties take any CSS color value. The --color-primary-text value is used for text rendered on elements that have --color-primary as their background color.

.pintura-editor {
    --color-primary: #2990ff;
    --color-primary-dark: #1a80ec;
    --color-primary-text: #fff;
    --color-secondary: #03a9f4;
    --color-secondary-dark: #046bbf;
}
Property Description
--editor-max-width Will limit the max width of the editor modal. Defaults to none
--editor-max-height Will limit the max height of the editor modal. Defaults to none
--editor-modal-border-radius Controls the border radius of the editor modal, only applied when editor is centered in view. By default no border radius is applied.
--editor-modal-overlay-opacity Controls the opacity of the overlay behind the editor panel. The default opacity is .95
--editor-modal-shadow Controls the shadow rendered below the editor panel. Defaults to a light shadow. Only applied when editor is centered in view.
--editor-modal-outline Controls the outline rendered along the edges of the editor panel. Is rendered with a pseudo-element on the editor panel. Defaults to an inset box-shadow with very low opacity. Only applied when editor is centered in view.

We can adjust the --editor-max-width and --editor-max-height properties to limit the size of the editor when using the modal view. The editor will automatically be centered in the viewport.

.pintura-editor {
    --editor-max-width: 50em;
    --editor-max-height: 40em;
}

To add some additional padding to the top and/or bottom of the editor we can use --editor-inset-top and --editor-inset-bottom

.pintura-editor {
    --editor-inset-top: 20px;
}

Other styles

We can adjust button styles with the --border-radius-round and --border-radius properties. Using the --button-cursor property we can toggle between using a pointer (hand) or a default (arrow) cursor on button elements.

.pintura-editor {
    --border-radius-round: 9999em;
    --border-radius: 0.75em;
    --button-cursor: pointer;
}

Adjust the font family with the --font-family property. The default family is based on the default system font stack. The --font-size property sets the font size for the root element of the editor, all other font sizes are scaled relatively to this font size.

.pintura-editor {
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol';
    --font-size: 16px;
}