Editor & LSP

ReeWeb ships a Language Server Protocol server at ree-lsp.cjs that gives any LSP-compatible editor deep awareness of your .ree templates. It runs as a stdio process — no network port, no daemon, no separate install. The project starter already includes it and configures it through the ree section in package.json.

What It Provides

How It Works

The LSP reads the ree section from package.json to discover your project's structure:

{
  "ree": {
    "project_family": "reeweb",
    "template_roots": ["src/public"],
    "component_roots": ["src/components"],
    "translation_provider": "route-json",
    "translation_root": "src/public"
  }
}

From these paths it builds a project profile that knows:

• Where templates live — src/public/ and any additional template_roots
• Where components live — src/components/ and any additional component_roots
• Where translations live — src/public/ and its subdirectories. The LSP walks the directory tree for {locale}.json files, merges keys with cross-locale fallback, and provides completions based on the closest translation file to the current template

The translation_provider: "route-json" tells the LSP that translations are co-located JSON files — it finds the right file for each template's context automatically.

Connecting Your Editor

VS Code

Install the Ree Templates extension from the marketplace. It bundles the LSP and connects automatically when you open a .ree file in a project with a ree section in package.json.

code --install-extension reepolee.ree-templates

The extension also provides syntax highlighting, file icons, and formatting (via reettier). See the extension docs for settings and configuration.

Other Editors

Any editor that speaks LSP over stdio can connect. Point it at:

bun ree-lsp.cjs

from the project root. The server uses JSON-RPC 2.0 over stdin/stdout. It accepts initialize, textDocument/completion, textDocument/hover, textDocument/definition, and textDocument/didChange / didOpen / didClose. Consult your editor's LSP documentation for how to register a custom stdio language server.

Translation Support

The LSP reads {locale}.json files from src/public/ and its subdirectories. Translation keys from parent directories are inherited by pages below them, and the LSP mirrors this merge model. This gives you:

• Key completions — type {_ and see every key available from the closest translation file, with the default locale's value as a detail string
• Multi-locale hover — hover any {_ ui.title } to see its value in every configured locale
• Go-to-definition — Cmd/Ctrl-click a key to jump to its entry in the nearest {locale}.json file

The LSP re-reads translation files when they change, so completions stay current as you add keys.

Without the ree Section

If package.json has no ree object, the LSP falls back to heuristics: it walks up the directory tree looking for src/public/ alongside lib/template_engine.ts and lib/i18n.ts. When it finds all three it loads a default ReeWeb profile. The explicit ree section is faster and unambiguous — every starter ships with it.

Troubleshooting