Type something to search...

Pro plan. Available on Pro and above, during the free trial, and in every self-hosted install.

The forms and the visual editor cover content. The code editor covers everything else — components, styles, build config, a stray JSON file — without leaving Sitepins.

Opening It

Three ways in:

  • Code in the sidebar, which browses your whole repository
  • Edit as code in a content file’s menu
  • Edit as code in a config file’s menu

Files open in the editor; folders open a directory listing you can browse further.

The Editor

A TypeScript file open in the Sitepins code editor

Syntax highlighting is picked from the file extension, and the theme follows your light/dark preference. You get:

  • Line numbers, folding, and word wrap
  • The file’s icon and breadcrumb path in the header
  • Presence avatars showing anyone else in the same file
  • A Preview button, if live preview is available

Saving

Save commits the file directly to the current branch. There’s no draft step here — the code editor writes to Git.

  • Reset discards your changes and reloads the file
  • Discard asks for confirmation before throwing away edits
  • Navigating away with unsaved changes prompts you first

If a live preview is running, saving syncs it.

Directory View

Opening a folder in the Code section lists its files with:

  • File name
  • Size
  • Last modified

Plus search, sorting, and pagination. This is the fastest way to find a file when you know roughly where it lives but not its exact name — though global search is usually faster still.

When to Use It

Good uses: fixing a typo in a template, tweaking a CSS value, editing a build config, correcting frontmatter the form can’t express, inspecting a file you’re not sure about.

Think twice: large refactors, anything you’d want to test locally first, changes across many files. The code editor commits straight to your branch. For anything substantial, work on a branch so it can be reviewed before it reaches production.

Code Editor vs Markdown Mode

Two different editors:

  • Markdown mode is the raw view of a content file, sitting beside the frontmatter form, with the same draft and publish options as the visual editor.
  • The code editor is for any file in the repository, with no frontmatter form and a direct commit on save.

For a Markdown file you’re writing, use Markdown mode. For a Markdown file whose structure is broken and needs surgery, the code editor gives you the raw file with nothing interpreting it.

What Editors See

On the Hobby plan, the Code section in the sidebar is replaced with an upgrade prompt, “Edit as code” doesn’t appear in file menus, and code files are excluded from global search results. Content, media, and config editing are unaffected.