Theme Code Editor

A built-in code editor for editing theme files directly from the admin panel. Includes syntax highlighting, Emmet, intellisense, and a reference panel.

Accessing the Code Editor

Navigate to Themes > [Theme Name] > Edit code, or click the "Edit code" button on the themes page.

File Explorer

The left sidebar shows all theme files organized by type:

Folder	Contents
config/	Settings schema and data (JSON)
layouts/	Layout templates (e.g. base.twig)
sections/	Section templates with schemas
templates/	Page templates
controllers/	PHP controllers for dynamic pages
snippets/	Reusable template partials
public/	CSS, JS, images, fonts

Editor Features

Syntax Highlighting

Powered by CodeMirror 6 with support for:

• Twig/HTML — HTML with Twig delimiter highlighting (purple for tags, green for strings)
• PHP — Full PHP syntax colors for controller files
• CSS — CSS properties, selectors, values
• JavaScript — ES6+ syntax
• JSON — Schema and config files

Emmet Support

Type Emmet abbreviations and press Tab to expand in HTML, Twig, CSS, and PHP files:

• div.container>ul>li*3 — Nested HTML structure
• section.hero>h1+p+a.btn — Section with heading, paragraph, button
• m10-20 — CSS shorthand margin: 10px 20px;

Intellisense / Autocomplete

The editor provides context-aware autocomplete suggestions as you type:

• section.settings. — Suggests all setting IDs from the section's schema
• page. — Suggests title, slug, url, template
• item. — Suggests collection fields (system + custom) when a collection is linked
• Controller return variables — If a controller returns items, typing items. suggests data, current_page, etc.

Keyboard Shortcuts

Shortcut	Action
Ctrl+S	Save current file
Ctrl+P	Quick file search
Tab	Expand Emmet abbreviation / indent

Reference Panel

Click the Reference button in the toolbar to open the right-side reference panel. It auto-detects which collection your file uses (from pages.json and code analysis) and shows:

Controller Variables

For template files, shows what the linked controller returns (e.g. items as list, item as entry) with their sub-properties.

Collection Fields

System fields (id, slug, created_at, updated_at) and custom fields with their types. Click any field to copy the accessor to clipboard.

Section Settings

For section files, lists all setting IDs from the schema so you can reference them with section.settings.<id>.

Snippets

Common code patterns for the current file type. Click to copy:

• Twig: for loops, if/else, includes, collection queries
• PHP: collection(), entry(), abort, return data
• CSS: media queries, flexbox, grid patterns

Helper Functions

All available helper functions for the current file type with copy-to-clipboard.

URL Persistence

The active file is saved in the URL as ?file=path. This means:

• Refreshing the page reopens the same file
• You can bookmark or share a direct link to a specific file

Section Designer

When editing a section file, switch between three views using the toolbar tabs:

• Code — Edit the raw Twig template and schema
• Designer — Visual form builder for the section schema (add/edit/reorder settings)
• JSON — Direct JSON editing of the schema

Split View

Click Split in the toolbar to open two files side-by-side. Right-click a file in the explorer and choose "Open in split" to compare or reference another file while editing.

Code Formatting

Click Format in the toolbar to auto-format the current file:

• HTML/Twig — Indents tags, preserves Twig expressions, formats schema JSON
• CSS — Formats properties and selectors
• JSON — Pretty-prints with 2-space indentation
• JavaScript — Formats with proper indentation

Page Controllers

Controllers are PHP files in the controllers/ directory. They run before the template renders and return data to the template:

<?php
// Controller: Blog Listing
// Route: /blogs

return function(array $params) {
    $page = max(1, (int)($params['_query']['page'] ?? 1));
    $items = collection('blog_posts', [
        'per_page' => 10,
        'page' => $page,
        'sort_dir' => 'DESC',
    ]);

    return [
        'items' => $items,
    ];
};

The returned keys become template variables. In the example above, items is available in the Twig template as items.data, items.current_page, etc.