Image Editor

Paid Feature

This feature is only available in paid plans. Learn More

We have a built-in image editor that can be used to resize, crop or apply effects to images. It's enabled by default but you can disable it if you want. You can also access it by double-clicking on any image.

unlayer.init({
  features: {
    imageEditor: {
      enabled: false,
    },
  },
});

Image Editor Tools

You can also choose to disable any of the image editor tools. By default, all of these tools are enabled: Filter, Resize, Crop, Draw, Text, Shapes, Stickers, Frame, Corners and Merge.

Here's an example if you want to disable the Resize tool in the image editor.

unlayer.init({
  features: {
    imageEditor: {
      tools: {
        resize: false,
      },
    },
  },
});

Customize Tool Icons

Each tool entry also accepts an object form so you can customize its icon while keeping the tool enabled. The icon field accepts a FontAwesome icon name (with or without the fa- prefix), an image URL (http(s):, data:, or absolute path), or inline SVG markup (must start with <svg). The object form also accepts enabled so you can mix-and-match tool visibility with icon overrides.

unlayer.init({
  features: {
    imageEditor: {
      tools: {
        filter: { icon: 'magic-wand-sparkles' },
        crop: { icon: 'https://example.com/icons/crop.svg' },
        draw: { icon: '<svg viewBox="0 0 24 24">…</svg>' },
        resize: { enabled: false },
      },
    },
  },
});

When the icon string cannot be resolved, the editor falls back to the default icon for that tool.

Translations

The image editor ships with built-in translations for the locale you pass to unlayer.init({ locale }) and falls back to English when a locale is not yet available. You can override any string — or supply translations for a brand-new locale — through the same translations config you use for the rest of the editor (see Localization). All image editor keys are grouped under the image_editor.* prefix.

If your project uses @unlayer/types, every translation key (and the rest of the unlayer.init config) is fully typed, so your editor will autocomplete the keys below as you write them.

unlayer.init({
  locale: 'fr-FR',
  translations: {
    'fr-FR': {
      'image_editor.toolbar.save': 'Enregistrer',
      'image_editor.tools.filter': 'Effets',
      'image_editor.ai_assistant.placeholder':
        'Décrivez ce que vous souhaitez modifier…',
    },
  },
});

All image editor translation keys

Toolbar

Key	Default
image_editor.toolbar.save	Save
image_editor.toolbar.cancel	Cancel
image_editor.toolbar.apply	Apply
image_editor.toolbar.undo	Undo
image_editor.toolbar.redo	Redo
image_editor.toolbar.zoom_in	Zoom in
image_editor.toolbar.zoom_out	Zoom out
image_editor.toolbar.fit_to_screen	Fit to screen
image_editor.toolbar.show_chat	Show chat
image_editor.toolbar.hide_chat	Hide chat

Side nav tools

Key	Default
image_editor.tools.filter	Filter
image_editor.tools.crop	Crop
image_editor.tools.resize	Resize
image_editor.tools.draw	Draw
image_editor.tools.text	Text
image_editor.tools.shapes	Shapes
image_editor.tools.stickers	Stickers
image_editor.tools.frame	Frame
image_editor.tools.corners	Corners
image_editor.tools.merge	Merge

Inline actions, filters, and object labels

Key	Default
image_editor.actions.done	Done
image_editor.actions.dismiss	Dismiss
image_editor.filters.brightness	Brightness
image_editor.filters.blur	Blur
image_editor.filters.noise	Noise
image_editor.filters.sharpen	Sharpen
image_editor.filters.color	Color
image_editor.filters.grayscale	Grayscale
image_editor.labels.text	Text
image_editor.labels.shape	Shape
image_editor.labels.sticker	Sticker
image_editor.labels.drawing	Drawing
image_editor.labels.image	Image

AI Assistant

Key	Default
image_editor.ai_assistant.nav_label	AI
image_editor.ai_assistant.title	AI Assistant
image_editor.ai_assistant.empty_state	Choose or describe an edit
image_editor.ai_assistant.placeholder	Describe what you want to change…
image_editor.ai_assistant.editing	Editing…
image_editor.ai_assistant.progress.analyzing	Analyzing image…
image_editor.ai_assistant.progress.applying	Applying changes…
image_editor.ai_assistant.progress.finalizing	Finalizing…
image_editor.ai_assistant.done	The changes have been applied.
image_editor.ai_assistant.aborted	Generation cancelled.
image_editor.ai_assistant.error	Our AI service is temporarily unavailable. Please try again in a few minutes.
image_editor.ai_assistant.suggestions.remove_background	Remove the background
image_editor.ai_assistant.suggestions.vintage	Make it look vintage
image_editor.ai_assistant.suggestions.brightness	Increase brightness
image_editor.ai_assistant.suggestions.black_white	Convert to black & white
image_editor.ai_assistant.suggestions.blur_background	Blur the background
image_editor.ai_assistant.suggestions.warm_tone	Add a warm tone
image_editor.ai_assistant.suggestions.sharpen	Sharpen the image
image_editor.ai_assistant.suggestions.remove_text	Remove text from image