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

The editor ships a full tool set: Crop (with rotate in 90° steps, flip, a straighten slider for fine-angle rotation, and a corner-rounding radius slider for rounded corners, all built into the same tool), Resize, Draw (brush color/type/size), Text (one-tap style presets grouped into Basic, Handwriting, and Effects, a bundled font library picked from a dropdown that previews each face, and font, color, background, outline, and shadow controls; double-click the text on the canvas to edit it), Shapes (circles, rectangles, arrows, stars, and more, grouped into Filled, Outline, and Gradient palettes with search, plus drag/resize/rotate, flip, duplicate, and per-shape color, opacity, outline, and shadow controls), Stickers (a bundled sticker library — emoticons, doodles, landmarks, and more — with search and per-category browsing; single-color stickers in the doodles, landmarks, beach, and transportation categories can be recolored and given an outline or shadow after adding), Frame (9 preset frames with an adjustable size and a color picker for the basic frame), and Filters (one-tap presets like Sepia, Vintage, or Polaroid plus adjustment sliders for brightness, contrast, saturation, vibrance, hue, gamma, blur, pixelate, and noise), alongside the AI Assistant. When the AI Assistant is available it leads the tool rail and its chat panel opens automatically when the editor loads.

The tools appear as a vertical tab rail with a properties panel that opens beside it when a tool is selected. Changes persist automatically — closing a tool's panel, switching to another tool, or saving commits its pending edits, and undo/redo reverts or restores them. There is no separate Apply/Cancel step. The AI Assistant behaves like any other tool — its chat opens in the same panel slot. By default the rail docks to the same side as the builder's own tools panel (appearance.panels.tools.dock, which defaults to the right edge), so the image editor stays visually consistent with the rest of the editor; set dock to 'left' or 'right' to override it for the image editor specifically.

Text, shapes, stickers, and drawings are a live, re-editable layer on top of the photo: they stay selectable after you switch tools or close a panel. Click an object on the canvas at any time to re-select it — its tool reopens with the object's current styling so you can move, resize, recolor, reorder (bring to front/forward, send backward/to back), or delete it from the floating toolbar above the selection. The photo underneath is the only raster surface; the layers are flattened onto it when you export or save the image, send it to the AI Assistant, or click the Flatten layers toolbar button (which bakes them in as a single undoable step). Most edits keep the object layer live: resize scales the layers to match, an axis-aligned crop shifts them with the photo, and filters/adjustments apply to the photo only (overlaid objects keep their own colors). A few transforms can't be applied to vector objects exactly, so they bake (rasterize) the object layer into the photo and it becomes part of the image: rotate, flip, and the straighten slider (all inside the Crop tool). Undo restores the live layer in one step.

unlayer.init({
  features: {
    imageEditor: {
      dock: 'left', // 'left' | 'right'; omit to follow appearance.panels.tools.dock
    },
  },
});

Pinning the image editor version

By default the editor always loads the latest image editor, so improvements and fixes reach your editor automatically. If you need a specific, reproducible build — for example to match a version you tested against or to stage a change — pin it with version. An unknown or unpublished version transparently falls forward to the latest, so a stale pin never breaks image editing.

unlayer.init({
  features: {
    imageEditor: {
      version: '1.500.0', // pin an exact published bundle; omit to always use the latest
    },
  },
});

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, and Frame. Rotate, flip, and rounded corners all live inside the Crop tool (disabling corners hides the corner-radius section).

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.undo	Undo
image_editor.toolbar.redo	Redo
image_editor.toolbar.flatten	Flatten layers
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
image_editor.toolbar.close	Close

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

Inline actions, filters, and object labels

Key	Default
image_editor.actions.reset	Reset
image_editor.crop.aspect_free	Free
image_editor.crop.aspect_original	Original
image_editor.crop.aspect_square	Square
image_editor.crop.aspect_ratio	Aspect ratio
image_editor.crop.rotate_flip	Rotate & flip
image_editor.crop.straighten	Straighten
image_editor.resize.width	Width
image_editor.resize.height	Height
image_editor.resize.lock_aspect	Lock aspect ratio
image_editor.rotate.rotate_left	Rotate left
image_editor.rotate.rotate_right	Rotate right
image_editor.rotate.flip_horizontal	Flip horizontal
image_editor.rotate.flip_vertical	Flip vertical
image_editor.arrange.bring_to_front	Bring to front
image_editor.arrange.bring_forward	Bring forward
image_editor.arrange.send_backward	Send backward
image_editor.arrange.send_to_back	Send to back
image_editor.draw.brush	Brush
image_editor.draw.color	Color
image_editor.draw.type	Type
image_editor.draw.size	Size
image_editor.draw.brush_pencil	Pencil
image_editor.draw.brush_eraser	Eraser
image_editor.draw.brush_circle	Circle
image_editor.draw.brush_spray	Spray
image_editor.draw.brush_diamond	Diamond
image_editor.draw.brush_vline	V Line
image_editor.draw.brush_hline	H Line
image_editor.draw.brush_square	Square
image_editor.draw.custom_color	Custom color
image_editor.shapes.fill	Fill
image_editor.shapes.transparent	Transparent
image_editor.shapes.color	Color
image_editor.shapes.opacity	Opacity
image_editor.shapes.outline	Outline
image_editor.shapes.shadow	Shadow
image_editor.shapes.outline_width	Width
image_editor.shapes.shadow_blur	Blur
image_editor.shapes.shadow_offset_x	Offset X
image_editor.shapes.shadow_offset_y	Offset Y
image_editor.shapes.duplicate	Duplicate
image_editor.shapes.delete	Delete
image_editor.shapes.circle	Circle
image_editor.shapes.rectangle	Rectangle
image_editor.shapes.triangle	Triangle
image_editor.shapes.ellipse	Ellipse
image_editor.shapes.curved_arrow	Curved arrow
image_editor.shapes.arrow	Arrow
image_editor.shapes.line	Line
image_editor.shapes.star	Star
image_editor.shapes.decagon	Decagon
image_editor.shapes.shield	Shield
image_editor.shapes.filled	Filled
image_editor.shapes.gradient	Gradient
image_editor.shapes.search	Search ...
image_editor.shapes.more	More ({count})
image_editor.shapes.less	Less
image_editor.shapes.empty	No shapes found
image_editor.text.new	New text
image_editor.text.default_text	Double click to edit
image_editor.text.font	Font
image_editor.text.size	Size
image_editor.text.style	Style
image_editor.text.align	Align
image_editor.text.bold	Bold
image_editor.text.underline	Underline
image_editor.text.strikethrough	Strikethrough
image_editor.text.italic	Italic
image_editor.text.align_left	Align left
image_editor.text.align_center	Align center
image_editor.text.align_right	Align right
image_editor.text.background	Background
image_editor.text.more	More ({count})
image_editor.text.less	Less
image_editor.text.group.basic	Basic
image_editor.text.group.handwriting	Handwriting
image_editor.text.group.effects	Effects
image_editor.text.preset.heading	Heading
image_editor.text.preset.subheading	Subheading
image_editor.text.preset.body	Body
image_editor.text.preset.marker	Marker
image_editor.text.preset.script	Script
image_editor.text.preset.bubbles	Bubbles
image_editor.text.preset.sketch	Sketch
image_editor.text.preset.meme	Meme
image_editor.text.preset.outline	Outline
image_editor.text.preset.highlight	Highlight
image_editor.text.preset.shadow	Shadow
image_editor.text.preset.neon	Neon
image_editor.text.preset.typewriter	Typewriter
image_editor.corners.radius	Radius
image_editor.stickers.search	Search ...
image_editor.stickers.more	More ({count})
image_editor.stickers.less	Less
image_editor.stickers.empty	No stickers found
image_editor.stickers.category.emoticons	Emoticons
image_editor.stickers.category.doodles	Doodles
image_editor.stickers.category.landmarks	Landmarks
image_editor.stickers.category.beach	Beach
image_editor.stickers.category.bubbles	Bubbles
image_editor.stickers.category.clouds	Clouds
image_editor.stickers.category.stars	Stars
image_editor.stickers.category.transportation	Transportation
image_editor.frame.presets	Presets
image_editor.frame.adjust	Adjust
image_editor.frame.size	Size
image_editor.frame.color	Color
image_editor.frame.basic	Basic
image_editor.frame.pine	Pine
image_editor.frame.oak	Oak
image_editor.frame.rainbow	Rainbow
image_editor.frame.grunge1	Grunge 1
image_editor.frame.grunge2	Grunge 2
image_editor.frame.ebony	Ebony
image_editor.frame.art1	Art 1
image_editor.frame.art2	Art 2
image_editor.filters.presets	Presets
image_editor.filters.adjust	Adjust
image_editor.filters.group.light	Light
image_editor.filters.group.color	Color
image_editor.filters.group.effects	Effects
image_editor.filters.brightness	Brightness
image_editor.filters.contrast	Contrast
image_editor.filters.saturation	Saturation
image_editor.filters.vibrance	Vibrance
image_editor.filters.hue	Hue
image_editor.filters.gamma	Gamma
image_editor.filters.blur	Blur
image_editor.filters.pixelate	Pixelate
image_editor.filters.noise	Noise
image_editor.filters.sharpen	Sharpen
image_editor.filters.grayscale	Grayscale
image_editor.filters.none	None
image_editor.filters.black_white	Black & White
image_editor.filters.sepia	Sepia
image_editor.filters.vintage	Vintage
image_editor.filters.polaroid	Polaroid
image_editor.filters.kodachrome	Kodachrome
image_editor.filters.technicolor	Technicolor
image_editor.filters.brownie	Brownie
image_editor.filters.invert	Invert
image_editor.filters.emboss	Emboss
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