Stackbit allows you to edit content, site configuration or page metadata elements and preview 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 needing to push them onto the live site until they are ready.

Video - Editing Content

Accessing Stackbit Studio

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

Stackbit dashboard

You will immediately be taken to Stackbit Studio, though the preview of your site may take a few moments to initialize.

To edit content, click the element on the page that you would like to edit. This will select the item in the left-hand editing pane or open the editor for the selected in the case of long-form Markdown content.

Alternatively, you can locate an item in the left-hand editing pane. In some cases, elements are contained within a tree. Click the arrow to the left to expand the tree and view the elements it contains. If you click an element that is visible on the page it will highlight on the site.

Editing sections in Stackbit

Specialized Editors

Some elements of the page, such as the plain text element shown above, can be edited simply by making a change directly in text field. Others, such as rich text in Markdown, have specialized editors.

Markdown Editing

To open the specialized editor for Markdown content, simply click the content you wish to edit in the preview.

click to edit Markdown in Stackbit Studio

You can also locate the item in the left-hand editing pane and click edit to open the specialized editor.

editing Markdown in Stackbit Studio's markdown editor

Image Editing

Another specialized editor is the image editor. The image editor allows you to upload a new image or to choose from the library of existing images already on the site.

Stackbit Studio image editor

Clicking on the use existing button will open a list of images already existing within the site's assets that you can choose from.

Selecting an existing image

Adding, Deleting and Reodering Items

Video - Adding, Deleting and Reodering Items

Adding Items

In some cases, items on the page are made up of repeatable content elements. For example, the features section on this page is made up on multiple features content elements. In these cases, you'll have the option to add a new content item directly from the containing page by clicking "Add Content".

Adding content elements

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

Adding content elements with default text

Deleting Items

Clicking the trash can icon to the right of the highlighted item will remove the item from the page. It's important to note, however, that only the reference to the content object is removed from the page. The content itself will still exist in the CMS. This prevents accidentally removing pages or content that is displayed elsewhere in the site.

removing a content item

Reordering Items

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

reordering content items

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).

Ready to get started?