Visual Editor

The Visual Editor is the interface for your content in Storyblok. It gives you tools for writing, editing, arranging, and managing your content.

Select any story from the Content tab of your space to open it in the Visual Editor.

Note

This article focuses on how to edit content in the Visual Editor.

To learn more about what stories are and how to manage them, read the Stories article.

To learn more about how to configure visual editing in your codebase, read our Visual Editor developer concept.

Preview

In the left sidebar, the Form/Visual button will hide and reveal a visual preview of your website. The preview should show a draft rendering of your website. The preview also includes context menus with editing controls when you hover over components. Click on a component to open it in the form.

A preview rendered in the Visual Editor

To preview your content at different screen sizes, click the desktop, mobile, or fullscreen icons in the top toolbar.

To open a full preview, click the open icon in the top toolbar. The preview will open in a new tab.

Form

The basis of the editor is a form comprised of input fields for your content. The precise arrangement of fields depends on the configuration set up by your developer.

The form view in the Visual Editor

Create and edit your content in the form fields and click Save to commit your changes.

Blocks

The input fields can accept many different types of content, but there's one type of field that is more important than all the others: the blocks field.

A block is a chunk of content — usually a few fields that work together to compose a larger element, like an infographic or an image gallery.

Edit a block in the Visual Editor

Blocks often make up the main body of a webpage. For example, a blog post might have a "Body" field that can contain "Rich Text", "Image", and "Pull Quote" blocks. Editors can freely add, delete, and rearrange these blocks to compose content.

To add a block, hover over the borders of a blocks field to reveal a plus-sign icon.

Sometimes rich text fields will also accept blocks as children. Click the plus-sign icon in the rich text toolbar to add a block to a rich text field.

Tip

Tip: Save time with preset blocks

Presets are blocks that come pre-filled with content. Admin users can create presets and define their content. To create a preset out of an existing block, click the three-dot menu ⋯ at the top of the block, select Open Presets, and add a new preset. To illustrate the preset, upload a screenshot. Save, then open the new preset and click Fill preset with current content. To set a preset as the default state for new blocks, go to the Presets tab of the block editor and star the default preset.

Rich Text

Most writing in Storyblok happens in the rich text editor. A story can have any number of rich text fields with different configurations. Depending on the field configuration, the Visual Editor can accept many types of rich content:

• Headings
• Bullet lists
• Numbered lists
• Code blocks
• Links
• Anchors
• Emojis
• Custom styles
• Tables
• Bold
• Italic
• Codespan
• Horizontal rules

The rich text field has a formatting toolbar. For a shortcut, use common markdown syntaxes to apply formatting while you type. For example, start a line with a number sign # to create a heading. Or, surround a word with asterisks * to make it bold.

Links

An internal link defines a relationship to another piece of content without manually writing a URL. To create an internal link, open a link field (that has internal linking enabled) and use the folder browser or search bar to find the appropriate story.

To edit the linked story, click the Stack view icon, which opens the linked story in a floating editor pane. Make changes directly to the linked story, save and optionally publish, and then click outside the window to return to editing the original story. To open the linked story in the main editor, click the open icon.

To specify an anchor position in the linked story, click Define the anchor ID of the link and input an anchor link ID.

Configuration

To edit configurations for your story, such as the name, slug, tags, or date, open the Config pane.

The story's slug is an ID that is unique to the story's folder. It is often used to define the URL for a webpage or the ID for a resource on a website.

Comments

Every field has a comment button, which will open a discussion. When typing a comment, use the at symbol @ to mention a teammate.

A discussion in the Visual Editor

Open the Comments pane to see all discussions in the story and open a comment to write a reply.

To see all your replies and mentions, go to your space's Dashboard and scroll down to Activity > My Mentions.

Browsers

The left sidebar contains three utilities to quickly access resources (according to your user role).

• Layers: View all of the blocks in the current story
• Content: Search through all of the stories in your space
• Blocks: See all of the available blocks

The More menu in the left sidebar provides links to other resources in your space.

Status

A story's status determines who can access it. Stories have four potential statuses: unpublished, published, changed, and scheduled.

The status reflects the most-recently saved version of the story.

The Content tab, showing articles with different statuses

In the editor, a status indicator appears beside the Save button. The indicator has three states:

• Draft: A grey vertical semi-circle inside a solid circle
• Published: A green solid circle inside a solid circle
• Changed: A horizontal grey semi-circle in a dashed circle

Scheduled articles are marked with a clock icon.

Draft

A new story is Unpublished. This story will only appear in preview versions of your website.

Published

After clicking "publish," the story is Published. This story will appear live on your website.

Changed

After making changes to a published story, the story is Changed. The changes will only appear in preview versions until you publish your website.

Scheduled

A draft or changed story might also be Scheduled. In that case, the changes will appear at a specified date.

To schedule a story, open the extended Publish menu and click Schedule Publishing, then choose a date for the changes to go live. After this point, any additional changes saved to the story will be added to the scheduled changes.

Instead of a Publish button, scheduled stories have a Save & Schedule button. Clicking this button reveals two options:

• Save & Schedule: Use this option to change the schedule.
• Publish it now: Use this option to disregard the scheduled publication and publish the current version immediately. The schedule is hereby cleared.

Tip

For more advanced scheduling see the Releases App, which allows you to group and schedule content campaigns.

Advanced usage

The Visual Editor has deep integrations with the rest of the Storyblok ecosystem. Learn more about how the Visual Editor integrates with these tools to streamline your content management:

• History: Track changes to content over time
• Ideas: Brainstorm new content
• Spotlight: Search your space for content and quick actions
• Assets: Upload and manage files in your space
• Image Editor: Apply transformations to your images