VS Code extension

Anim ships a matching VS Code extension for standalone .anim files. It combines the native anim lsp language server with a bundled WebAssembly Canvas preview, so editing feedback stays close to the source while final rendering still belongs to the CLI.

Match the CLI and extension

Anim is still a 0.x preview. Install the VS Code extension from the same release as the anim CLI you run locally. A mismatched language server can report stale or incomplete semantic results.

Install

Install the CLI first, then install the extension artifact published beside the native release:

curl --proto '=https' \
  --tlsv1.2 -fsSLo anim-lang.vsix \
  https://anim-lang.org/releases/latest/anim-lang.vsix
code --install-extension anim-lang.vsix

For pinned builds, use the vscode entry in the release manifest, verify its SHA-256 value, and install that exact VSIX.

The extension launches anim lsp from PATH. If your CLI is installed elsewhere, set anim.server.path in VS Code user or machine settings to the absolute path of the anim executable.

Language support

Opening a .anim file enables editor features backed by the language server:

• lexical and semantic highlighting;
• source diagnostics from the parser, type checker, and asset boundary;
• unused private binding and parameter warnings;
• contextual completion for keywords, builtins, declarations, and fields;
• hover for user declarations and builtins;
• go to definition, find references, rename, and document symbols;
• whole-document formatting.

The language server is intentionally single-file in the current preview. Multi-file modules, workspace indexing, code actions, and range formatting are deferred.

Preview pane

Run Anim: Open Preview Beside from the Command Palette while an .anim file is open. The extension opens one reusable preview panel that follows the active Anim editor unless you pin it.

The preview recompiles unsaved source after a short debounce and renders through the bundled Canvas/WebAssembly backend. It supports playback, pause, scrubbing, declared parameter controls, and relative PNG assets discovered from image(src: ...).

If a change introduces an error, the preview keeps the last good frame visible and overlays the current diagnostic instead of blanking the panel.

Preview accuracy

The VS Code preview is an authoring aid. It is not the canonical CPU renderer and does not define exact pixels. Use anim render for final PNG, SVG, or video artifacts.

Click to source

Click visible artwork in the preview to reveal the source expression that produced the frontmost visible scene leaf at the displayed frame. Repeated clicks on the same artwork cycle through related source spans: the leaf constructor, enclosing scene expressions, scene-valued references, and user-call sites.

Clicks on empty space or fully transparent content do nothing. If the source has changed since the preview frame was generated, the extension ignores the stale click rather than moving the editor to an obsolete span.

Troubleshooting

• If lexical highlighting works but semantic features do not, run anim --version in the same environment VS Code uses and confirm the executable is on PATH.
• If VS Code uses a different shell or install location, set anim.server.path to the full CLI path.
• If the preview starts but final renders differ, trust anim render; the preview is intentionally non-canonical.