In this section, we'll cover:

Overview

Stackbit allows you to edit content, site configuration, and page metadata elements while giving you a preview of how these changes will appear on the page.

It's important to note that:

  • Any changes you make will not impact the live site until you publish them. However, they are reflected in the CMS but remain unpublished;
  • Any changes made directly in the CMS will be reflected on the live preview, even if those changes have not been published.

These features offer you the freedom to see how your changes impact the site and even share them with others without pushing them onto the live site until they are ready.

Accessing Stackbit Studio

To access the Stackbit Studio, sign in and then navigate to your site on the dashboard and click "Open".

Stackbit dashboard

This will open the Stackbit Studio. For sites on the Free plan, the preview of your site may take a few moments to initialize as the container wakes back up from hibernation. For sites with a Pro, Business, or Enterprise plan, the container does not hibernate, and the site is always ready to start editing immediately.

Inline Editing

To edit any element on the page, just click on it. This will trigger inline editing in the Studio to let you make element-specific edits right where you are working on the page. For example, clicking on a string will let you change the text, and clicking on an image will let you choose a new one.

Editing text with inline editing in the Stackbit Studio

The same way, clicking on a section will highlight all of the elements contained inside that section and which are available to be edited.

Highlighting a section with Stackbit Studio

Markdown Editor

Some elements of the page, such as the content fields for blog posts and similar longer bits of text, will open the Markdown editor. Markdown fields are identified with the following icon when you hover on them:

Hover to discover a Markdown in Stackbit Studio

Clicking on a Markdown field will open the Markdown editor for you to make changes to it.

Click to edit Markdown in Stackbit Studio

Adding, Deleting and Reordering Items

Adding Items

In some cases, items on the page are made up of repeatable content elements. In these cases, you'll have the option to add a new content item directly from the containing page by tapping the "+"" icon in the page or clicking "Add Content" button in the side navbar.

Adding content elements

A new content item of that type will be added with default text populating it.

Deleting Items

Clicking the trash can icon on the highlighted item's- from the page or from the side navbar- will remove the item from the page. However, it's important to note that only the reference to the content object is removed from the page. The content itself will still exist in GitHub (or in the CMS). This prevents accidentally removing pages or content that is displayed elsewhere on the site.

Removing content item from the pageRemoving content item from side navbar

Reordering Items

You may also reorder certain content elements. If an element can be reordered, a "gripper" icon will appear to the element's left when highlighted. Grabbing the icon will allow you to move it within the section.

reordering content items

You can locate instances of text by using the search bar at the top of the left-hand sidebar in the Studio. When you type the string you are looking for, the sidebar view will edit to only show fields containing that text. You can also modify the relevant fields directly from the sidebar or by clicking on them to edit inline.

button elements exposed in sidebar

Image Editing

Discover editable images by hovering on them, the following icon should appear:

Discovering an image

Select an image and then click on the 'Edit' icon to replace with an existing image or to upload a new one.

Selecting an existing image

Hidden Elements

Some editable elements represent design or other configuration that is not necessarily visible on the page. These elements will have the "hidden icon" next to them, as shown below.

editing hidden elements

Additionally, some editable elements represent content that may not be immediately visible (ex. navigation dropdowns) or metadata that does not display (ex. slugs or meta titles and descriptions).