Online Coding Environment

The site builder includes a full coding environment in the browser. You write EJS templates, CSS, JavaScript, and config files directly in the SleekCMS interface — no local setup, no Git checkout, no install step. Saves trigger an immediate rebuild and the result is visible in preview seconds later.

This page covers what the editor exposes, how files are organized, and how to work with the environment day-to-day.

What's in the Editor

The coding environment surfaces every file that participates in rendering, organized into the same logical structure described in the Site Builder reference:

• pages/ — EJS templates for page models. One template per page model, named to match the model key.
• entries/ — EJS templates for entry models that need their own rendered fragment.
• blocks/ — EJS templates for block models. Each declared block has a template here.
• layouts/ — Layout wrappers. The default is common.ejs; you can add more and select per page.
• css/ — Stylesheets. tailwind.css is special — see Tailwind and Styling.
• js/ — Client-side scripts.
• public/ — Other static assets (favicons, fonts, downloadables) — see Assets and Static Files.

The file tree mirrors the file naming convention used throughout SleekCMS. A key like blog+ produces files at models/pages/blog+.model, pages/blog+.ejs, and content files under content/pages/blog+/. The editor groups these by purpose so you can move between schema, template, and sample content without losing track.

The Save-Rebuild-Preview Loop

Every save triggers a build. The cycle is:

1. Save — Edit a template or asset, save the file.
2. Sync — The CMS syncs the file change and validates it against the model and template engine.
3. Build — Affected pages re-render. For most edits this is incremental — only pages that touch the changed file rebuild.
4. Preview — The preview view updates with the rebuilt output.

The loop is designed for tight iteration. Single-page edits typically complete in a second or two. Layout-wide changes may rebuild more pages but still finish before you're done switching tabs.

When something fails — a template throws, an image shortcut doesn't resolve, a model field doesn't match its content — the error is written to sync-errors.log in the workspace root. Check that file first when a save doesn't appear in preview.

→ Site Builder

Editor Surfaces

The coding environment is split into a few surfaces that map to what you're working on:

File tree — Navigation across templates, assets, layouts, and configuration. Files are grouped by type and sorted by key.

Code editor — A standard monospace editor with syntax highlighting for EJS, HTML, CSS, JavaScript, and JSON. Tab handling, search, and multi-cursor work as you'd expect.

Preview pane — The rendered output of the current page (or a selected page if you're editing a block, layout, or asset). The pane updates after each save.

Console / error surface — Build errors, template runtime errors, and image-resolution warnings surface here in addition to sync-errors.log.

The split is configurable — you can collapse the file tree, hide the preview when working on shared assets, or expand the preview full-width when reviewing layout work.

What You Can Edit

The coding environment treats templates and assets as the contract between models and rendered output. You can:

• Add and edit page/entry/block templates (Model Templates).
• Edit the layout wrapper (Layout).
• Add CSS and JS files in css/ and js/, include them with link() and script().
• Add static files to public/ (Assets and Static Files).
• Adjust tailwind.css for design-token changes (Tailwind and Styling).

You can't directly edit the model schemas from the coding environment — those live in the modeling interface. The coding environment is for rendering, not for shaping content structure.

→ Content Modeling

Editing Locally with cms-sync

For longer editing sessions, multi-file refactors, or AI-agent-driven site building, SleekCMS provides cms-sync — a CLI that pulls your site to a local folder, watches for changes, and syncs every save back to the CMS. You edit in VS Code, Cursor, or any editor; the CLI handles the round trip.

Run it directly without installing:

npx @sleekcms/sync@latest -t <your-auth-token>

Get the token from the Set Up Local Workspace option in the SleekCMS builder. cms-sync also injects AGENT.md, CLAUDE.md, and a Copilot instructions file into the workspace so AI agents (Cursor, Claude Code, Copilot) understand your site from the first prompt.

→ Local Workspace (cms-sync)

What's Next

• Model Templates — Binding EJS templates to page, entry, and block models.
• Layout — The wrapper template that frames every page.
• Template Context and Data Access — The full reference for item, helpers, and content access.
• Assets and Static Files — Managing CSS, JS, and other static files.
• Tailwind and Styling — Zero-setup Tailwind support.
• Local Workspace (cms-sync) — The CLI for editing your site locally with VS Code, Cursor, or any AI agent.