Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Image Editor


On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.


We also have an Image Service you can use to resize images on-the-fly! Please take a look at the documentation.

Storyblok’s Assets Library has an image editor built right into it! No need to disturb your design team for a small cropping job or to spin up Photoshop and leave Storyblok. You can do all your edits directly in our app!


Image Editor only supports JPEG and PNG image formats. Other image formats like webp, avif, gif, svg are not supported.

Section titled Access the Image Editor Access the Image Editor

{1} Select the Assets tab then {2} select any image in the gallery


Then, select the {1} Open Image Editor button.

An annotated screenshot of how to open the image editor

Landing on the image editor should look like this:


You can also disable access to the image editor via Roles & Permissions by selecting a role and then selecting {1} Deny access to image editor.

An annotated screenshot of how to disable the image editor via Roles and Permissions

Section titled Features Features

There are several features that are available to edit an image with:

Section titled Crop Crop

A screenshot of the Image Editor with the Crop feature selected

Upon selecting Crop, there will be a crop frame around the image in which you can move the sides and corners to customize your crop section.

From the Crop section you can also do the following:

Rotate leftRotates the image to the left
Flip horizontalFlips image horizontally
Crop shapeGives options for various crop ratios such as: square, 16:9, 9:16, 4:3, and 3:4
Crop boundarySets a boundary for the image to be cropped. It will prevent you from moving the image within the boundary.
RotateRotate the image by dragging the degrees bar left or right
ZoomZoom in on the image by dragging the degrees bar to the left
A screenshot of the Image Editor with the Finetune feature selected

Modify your existing image’s brightness, color contrast, etc. by adjusting features by percentage.

Section titled Modifiers Modifiers

BrightnessMakes the image brighter (closer to white) or darker (closer to black)
ContrastMake the bright areas of your image brighter and the dark areas darker
SaturationIncrease or decrease the color intensity of the image (example: adjust up to make the red redder)
ExposureAdjusts the image’s exposure to light by making the image brighter or darker
TemperatureAdjusting the warmth (more yellow) or coolness (more blue) of the image
GammaMakes the image brighter or darker according to the individual pixels of the monitor
ClarityAdds or subtracts to the sharpness of the image
VignetteAdds an inner shadow to the corners of the image
A screenshot of the Image Editor with the Filter feature selected

Selecting a filter will add an overlay effect to the image to change its look/feel.

Section titled Annotate Annotate

A screenshot of the Image Editor with the Annotate feature selected

Mark your image with several choices in marking styles. An eraser is available to fix any mistakes made with any annotation tool.

Section titled Annotation types Annotation types

Line colorA popup color palette with preset colors
Line widthChoose how thick or thin the line will be for your marker of choice
SharpieThe “pen” function — freehand draw your marks
EraserErases any marks made with any marking feature
ArrowCreates a single straight line but with a pointer at the end
RectangleCreates a hollow rectangle shape
EllipseCreates a hollow ellipse shape
TextAdds text on top of the image
A screenshot of the Image Editor with the Sticker feature selected

Storyblok has a collection of emojis you can use to “stick” onto images. You can also upload own images to use as stickers.

Section titled Redact Redact

A screenshot of the Image Editor with the Redact feature selected

The ability to select any section of the image and pixelate it within a square or rectangle shape. You can also control the percent of pixelization you would like to have in effect.

Section titled Frame Frame

A screenshot of the Image Editor with the Frame feature selected

Choose from several different frames available to attach a decorative border around your image.

Section titled Saving the Asset Saving the Asset

When Save is selected, it will override the original image

To save it as a new image:

{1} Click arrow beside the Save button

{2} Choose Save as new