The Stackbit application has a number of different tools for adjusting the content and code of your site.

They are available from the left-hand sidebar.

Editor modes overview

Page Editor

The page editor is where the magic happens in Stackbit. You can click elements in the preview panel (right side of the screen) and jump directly to content fields to see your changes in real time.

Page Editor

You also have the ability to start from the page level, by clicking on the Page icon in the left-hand sidebar and drilling down into the appropriate component you'd like to edit. The preview panel will continue to update on the fly.

Direct page editor access

Highlighting Elements

What makes the page editor so effective and efficient is the ability to highlight elements in the preview panel and jump right to their content fields.

Highlighting elements occurs through a process we call annotating. Learn more about annotations.

When to Use

The page editor is a great tool when you want to see how the changes you've made will be visually represented on the screen. This is especially useful when adding new components or moving components around.

When to Avoid

Visual editing is less beneficial when you have a series of structured content that you want to edit quickly, and already have an understanding of how they are going to appear on the site. Examples of this are structured items like blog posts, products, or shared items like people or tags.

CMS Editor

The CMS editor provides a means to quickly edit structured data.

CMS Editor

When to Use

The CMS editor is a fantastic complementary tool to the visual editor. While the visual editor is a great way to get quick feedback on visual elements on the page, it can be limiting when you want to make several content changes quickly and understand clearly how those changes will affect the look of your site.

When to Avoid

CMS doesn't work as well when you don't know exactly what type of content you want to edit or where it might be located in the CMS. In that case you can jump quickly to the content using the visual editor.

Code Editor

The code editor is for, well, editing code! Your entire Next.js codebase is available for editing in the code editor.

Code Editor

Technically, you can also edit content with the code editor since Stackbit stores content as local files. But we suggest that if you're already using the Stackbit application to use the page or CMS editor for adjusting content when possible. It's safer.

Working Locally

If you want to work with code but the editor seems limiting, you can also claim your project on GitHub and clone it to work locally. Learn more about local development with Stackbit.

When to Use

Use the code editor whenever you need to get under the hood of your site. You might want to add a component, adjust global styles, or add any number of custom features to your site.

Explore our how-to guides for help in making technical adjustments and enhancements to your site.

When to Avoid

The code editor is not a great fit when you want to adjust content. The page and CMS editors are optimized for editing content on your site.

Global Styles

Last but not least is the styles editor, which provides a pleasant interface for adjusting global style rules for your site.

Style Editor

Customizing Global styles

Like most of Stackbit, this panel is driven entirely by your code. Learn how to customize global styles.