The Stackbit application has a number of different tools for adjusting the content and code of your site.
- Page Editor (visual)
- CMS Editor (structure content)
- Code Editor (your site's repo)
- Global Styles (configurable global CSS)
They are available from the left-hand sidebar.
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.
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.
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.
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.
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 and prefer not to work locally. Explore our developer 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.
Customizing Global styles
Like most of Stackbit, this panel is driven entirely by your code. Learn how to customize global styles.