Introducing the Source Editor

Last modified: June 1st, 2023

The Source Editor is an in-browser code editor, used to make edits within CloudCannon on any text-based file. It is available to the owner and developers of the site.

Screenshot of source editor with an html file open

Configuring the Source Editor#

The Source Editor is used to edit the raw content of text-based files. Client Sharing users and editor-level team members do not have access to it.

Syntax highlighting is automatically detected from the extension of the file you are opening.


To change the appearance and behavior of the Source Editor, use the source_editor option in your global configuration:

  tab_size: 2
  show_gutter: false
  theme: dawn
  "source_editor": {
    "tab_size": 2,
    "show_gutter": false,
    "theme": "dawn"
module.exports = {
  source_editor: {
    tab_size: 2,
    show_gutter: false,
    theme: "dawn"
Screenshot of the Source Editor with a custom theme set

The Source Editor has the following options available:

tab_size - Integer#

Defines how many spaces lines are auto indented by, and how many spaces tabs are shown as. Optional, defaults to 2.

theme - String#

Changes the colors scheme for syntax highlighting in the editor. Optional, defaults to monokai. Must be one of:

ambiance chaos chrome clouds clouds_midnight cobalt crimson_editor dawn dracula dreamweaver eclipse github gob gruvbox idle_fingers iplastic katzenmilch kr_theme kuroir merbivore merbivore_soft mono_industrial monokai nord_dark pastel_on_dark solarized_dark solarized_light sqlserver terminal textmate tomorrow tomorrow_night tomorrow_night_blue tomorrow_night_bright tomorrow_night_eighties twilight vibrant_ink xcode

show_gutter - Boolean#

Toggles displaying line numbers and code folding controls in the editor. Optional, defaults to true.

Open in a new tab