--- title: Visual Editor description: The Visual Editor is the interface for your content in Storyblok. url: https://storyblok.com/docs/manuals/visual-editor --- # 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](/docs/manuals/stories). > > To learn more about how to configure visual editing in your codebase, read our [Visual Editor developer concept](/docs/concepts/visual-editor). ## 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. [![The Visual Editor has two sections: the editing sidebar on the right and the rendered content and design on the left.](https://a.storyblok.com/f/212319/3024x1714/71b699f173/editor-preview.png/m/720x0/)](https://a.storyblok.com/f/212319/3024x1714/71b699f173/editor-preview.png) A preview rendered in the Visual Editor To preview your content at different screen sizes, click the desktop, mobile, or full-screen 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 of a story shows various page sections for hero, logo, grid, and image text.](https://a.storyblok.com/f/212319/3024x1714/69778df445/visual-editor-form.png/m/720x0/)](https://a.storyblok.com/f/212319/3024x1714/69778df445/visual-editor-form.png) 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 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 named Headline Segment inside Storyblok's Visual Editor. Selecting the block opens a pop-up menu with additional options, like duplicating, deleting, or copying the block.](https://a.storyblok.com/f/212319/3024x1714/e8502403aa/visual-editor-blocks.png/m/720x0/)](https://a.storyblok.com/f/212319/3024x1714/e8502403aa/visual-editor-blocks.png) 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 - Code - 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 multiple hash signs `##` to create headings. 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 pop-up over a rih text field titled "What we stand for".](https://a.storyblok.com/f/212319/3024x1714/c1533e65c8/visual-editor-comments.png/m/720x0/)](https://a.storyblok.com/f/212319/3024x1714/c1533e65c8/visual-editor-comments.png) 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 the blocks in the current story - **Content:** search through the stories in your space - **Blocks:** view all 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. [![Storyblok Content section with a list of pages with details like workflow stage, type, and last update date.](https://a.storyblok.com/f/212319/3024x1714/0edb1eeaaf/visual-editor-statuses.png/m/720x0/)](https://a.storyblok.com/f/212319/3024x1714/0edb1eeaaf/visual-editor-statuses.png) 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 gray vertical semicircle inside a solid circle - **Published:** a green solid circle inside a solid circle - **Changed:** a horizontal gray semicircle 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](https://www.storyblok.com/apps/releases_only), 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](/docs/manuals/history): track changes to content over time - [Ideas](/docs/manuals/ideas): brainstorm new content - [Assets](/docs/manuals/assets): upload and manage files in your space - [Image Editor](/docs/manuals/image-editor): apply transformations to your images ## Pagination - [Previous: Technical Requirements](/docs/manuals/technical-requirements) - [Next: Workflows](/docs/manuals/workflows)