Visual Editing

Methods for adjusting code and content in Stackbit.

Editing Methods

Stackbit's visual editing application provides four different ways to directly edit code and content.

While inline editing is done directly on the preview, all others are enabled through icons on the left sidebar in the visual editing application.

Visual Editing Controls
Visual Editing Controls

Page Editor

The page editor is a panel on the left side of the screen that changes context based on actions taken within the preview and sitemap navigator.

Page Editor
Page Editor

Learn more about Stackbit's page editor

Content Editor

The content editor provides a means to quickly edit structured pages and data objects. This is similar to traditional form-based editing within a CMS.

Content Editor
Content Editor

Learn more about Stackbit's content editor

Code Editor

The code editor can be used to make code changes directly in Stackbit. Every change is automatically committed to the working branch in the remote repository.

The code editor is only available in cloud projects, since you can use your code editor when working locally.

Code Editor
Code Editor

Learn more about Stackbit's code editor

Inline Editor

The visual editor provides the ability to make changes directly in the preview by clicking directly on editable content.

Inline Editor
Inline Editor

Learn more about Stackbit's inline editor

Editor Extensions

These editing methods can be further customized with various editing features.

Custom buttons can be added to the sidebar as direct links and shortcuts to content or editing controls.

Standard and Custom Sidebar Buttons
Standard and Custom Sidebar Buttons

Learn more about customizing the sidebar

Field Controls

Stackbit infers field editor controls as best as possible. Fields can then be further customized through model extensions.

Thumbnail Field from Model Extension
Thumbnail Field from Model Extension

Learn more about customizing field controls

Field Groups

Fields can be broken up into tabbed groups for better organization when using the page or content editors.

Field Groups in Page Editor
Field Groups in Page Editor

Learn more about grouping fields