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.

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

Stackbit dashboard

With your site open, Stackbit's tooling should overlay the page on the right hand side as shown below. Click the "Edit site" button to access the tools for editing your site.

View your site

To edit content, begin by expanding the element you want to edit using the little arrow to its left.

Editing sections in Stackbit

You will note that, when hovering over or selecting certain items, two new icons appear. The move grabber icon that appears to the left allows you to move this element. This can be useful for things like reordering posts on a list of featured content, for example. The trash can icon that appears to the right allows you to discard the current item. Both of these icons only appear over items that are either movable or removable. In addition, when relevant, a "New Section" link will appear to create a new section of this type.

In addition, the logo icon to the right of the element indicates where the data is coming from (Contentful in the pictured example) and the new window icon immediately to its right will open this specific element within the specified CMS in a new window or tab.

If you expand a content element that is visible on the page and click inside to edit it, you will notice that the relevant section of content is highlighted on the preview.

Editing content in Stackbit

As soon as you finish modifying the content, the preview will update with your changes. Please be aware that your changes are not live on your site yet. At this point, you can do one of four things:

  1. Continue editing other portions of the page. As noted, none of these changes will impact the live site until published.
  2. Click the "copy" button next to where it says "Realtime Preview" to share your changes with others. Note that they will continue to see your changes updated as you make them.
  3. Click the "Publish Page" button to push these changes to your CMS and, thereby, to your live site.
  4. Click, "Switch to Live Site" to view the current page without your changes. It's important to note that you will not lose your changes by doing so.

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

Finally, some page elements may only be editable in the CMS. These items will have a button labeled with the appropriate CMS. Clicking this button will open the relevant record directly in a new browser tab.

field editable only in the CMS