Get to know how the Studio Editor is composed.

overview of all studio featuresBackground

Split Screens

The Studio is separated in two sections:

  • The editable section where you can navigate through your content and access the different features proposed by Studio.
  • The live preview that can be resized by moving the middle separation bar.


Studio is composed of three main features to edit your website:

  • The Editor provides a enhanced Monaco editor to edit your content files with the mdc syntax
  • The Medias offers a gallery where you can manage your existing files and upload new ones
  • The Configs is a simple way to customize your website

Live Preview

If you can update it from Studio, you can preview it. The right section is showing your website as it will be once deployed. Learn more in the Live preview section.

Draft System

When you're editing something in Studio, whether it is from the Editor, the Media gallery or the Configs, those updates are saved in a draft. This draft is not related to GitHub, it only exists in Studio.

All CRUD actions are available on the draft:

  • Create a new file, folder or media
  • Update your content or your configs
  • Revert your work on a file, folder or media
  • Rename your file, folder or media
  • Delete your file, folder or media

Once your are satisfied with your work and your draft, you can save it by creating a new branch or directly by commiting on your default branch. Learn more in the Save section.