# Editors

URL: https://tuimark.dev/guide/editors

> Editor support for .tui and .tcss (0.4) - the VS Code extension (highlighting, snippets, and the tuimark lsp client) and how to use tuimark lsp from Neovim, Helix, or any other LSP client.

Tuimark files are plain text, so any editor can open them. Since 0.4 there are two kinds of help on top of that:

- **The VS Code extension.** It adds highlighting and snippets for `.tui` and `.tcss`, and starts the language server.
- **`tuimark lsp`.** This is the language server, built into the `tuimark` binary. It shows `validate`'s diagnostics as you type, and adds completion, hover, go to definition, and formatting. It works with any editor that speaks the Language Server Protocol.

## VS Code [#vs-code]

Install **Tuimark** from the Visual Studio Marketplace or from Open VSX: search for "Tuimark" in the Extensions view.

<Callout type="info" title="Not listed yet?">

The extension is published separately from the `tuimark` binary. Until it is listed, build it from a clone of the repository and install the `.vsix` with **Extensions: Install from VSIX…**:

```sh
cd editors/vscode
bun install --frozen-lockfile && bun run build && bunx @vscode/vsce package
```

</Callout>

**Highlighting** works with nothing else installed:

- tags, attributes, and `on:*` actions;
- `{path}` interpolations, `each="path as alias"`, and key tokens;
- the TCSS inside `<style>` and `style=""`;
- in `.tcss`: selectors, pseudo-classes, properties and their keywords, `$tokens`, colors, and `@media`.

The vocabulary is closed, so a tag, property, pseudo-class, or media feature that Tuimark does not have is marked as illegal while you type. A brace pair that holds more than one path is marked too, since `validate` reports it as `V003`.

**Snippets.** Type `tui`, `list`, `table`, `tabs`, `modal`, `bind`, or `root` and press Tab.

**Language server.** When `tuimark` is on your `PATH`, the extension starts `tuimark lsp`. If it cannot start the server, either because there is no `tuimark` or because it is a version without `lsp`, it shows one warning, and highlighting and snippets keep working.

| Setting | Default | |
|---|---|---|
| `tuimark.path` | `tuimark` | The `tuimark` binary. The default is looked up on `PATH`, and a relative path such as `./bin/tuimark` is resolved against the first workspace folder. Changing it restarts the server. |
| `tuimark.trace.server` | `off` | Set it to `messages` or `verbose` to log the traffic with the server in the *Tuimark* output channel. |

The command **Tuimark: Restart Language Server** restarts the server, for example after you upgrade `tuimark`.

**Restricted Mode.** A workspace can set `tuimark.path` in its `.vscode/settings.json`, which chooses the program the extension runs. So the server starts only in a [trusted workspace](https://code.visualstudio.com/docs/editor/workspace-trust): in Restricted Mode, highlighting and snippets work, the workspace value of `tuimark.path` is ignored, and the server starts as soon as you trust the workspace. The extension also checks that `tuimark.path` is a tuimark binary (`tuimark version` exits 0 and prints a version) before it starts the server.

## What the language server does [#what-the-language-server-does]

`tuimark lsp` runs the same checks as `tuimark validate` on the text in your editor, saved or not, with the same codes and messages. A problem in a stylesheet shows in the stylesheet. A `sample.json` next to the document is used as its data. On top of the diagnostics it gives completion, hover, go to definition, and formatting. [Editor support](/guide/tools#editor-support-tuimark-lsp) in the tools guide lists exactly what each one covers.

## Other editors [#other-editors]

Point your editor's LSP client at `tuimark lsp`, a stdio server, for the file types `.tui` and `.tcss`.

**Neovim** (0.11 or later):

```lua
vim.filetype.add({ extension = { tui = "tui", tcss = "tcss" } })

vim.lsp.config("tuimark", {
  cmd = { "tuimark", "lsp" },
  filetypes = { "tui", "tcss" },
  root_markers = { "AGENTS.md", ".git" },
})
vim.lsp.enable("tuimark")
```

**Helix** (`languages.toml`):

```toml
[language-server.tuimark]
command = "tuimark"
args = ["lsp"]

[[language]]
name = "tui"
scope = "text.tui"
file-types = ["tui"]
roots = []
language-servers = ["tuimark"]

[[language]]
name = "tcss"
scope = "source.tcss"
file-types = ["tcss"]
roots = []
language-servers = ["tuimark"]
```

These two get diagnostics, completion, and the rest from the server, but no highlighting, since the TextMate grammars ship only with the VS Code extension.

## See also [#see-also]

- [Dumps and tools](/guide/tools): `validate`, `dump`, `play`, and the other commands the editor complements.
- [Use Tuimark with AI agents](/guide/agents): the loop a coding agent runs, which the editor shows you as you type.