VSCode extension

If you are using VisualStudio Code, install the Jinja-Jx extension.

Syntax Highlighting

The extension provides full syntax highlighting for .jx files, including:

• Jx pragmas: {#import ... #}, {#def ... #}, {#css ... #}, {#js ... #}
• PascalCase component tags (e.g., <MyComponent>, <Card />)
• Jinja2 expressions ({{ ... }}), statements ({% ... %}), and comments ({# ... #})
• Standard HTML (inherited from VS Code's built-in HTML grammar)

Go-to-Definition

Ctrl+click (or Cmd+click on macOS) to jump to a component file. This works from three places:

• The import path — click on the string in {#import "card.jx" as Card #}
• The alias name — click on Card in the import declaration
• A component tag — click on <Card> or </Card> anywhere in the template

The extension resolves paths using your catalog folders (auto-detected from Python files), relative paths (./, ../), and prefixed paths (@ui/modal.jx).

Diagnostics

The extension runs jx check automatically and shows errors inline in the editor. Checks run:

• On save (.jx and .py files)
• When a .jx file is opened
• On startup

Errors appear in the Problems panel and as red underlines in the editor, including "did you mean?" suggestions for typos.

This uses the same checker as the CLI validator — see that page for details on what gets checked.

Snippets

Type a prefix and press Tab to expand:

Formatting

The extension provides document formatting (Shift+Alt+F) by delegating to VS Code's built-in HTML formatter. Your HTML formatting settings (indentation, wrapping, etc.) are respected.

Auto-Detection

The extension asks jx itself where your components live, rather than trying to work it out from your Python source.

It scans the workspace for a ... = Catalog(...) assignment to find candidate catalogs, then runs jx info on each one and uses what the catalog reports: its folders, their prefixes, and its file_ext. So however the folders were registered — a literal string, a Path, settings.BASE_DIR / "components", add_package — they are found.

If no catalog can be loaded, it falls back to looking for component files inside well-known folder names (views, components, templates).

The scan re-runs when a .py file is created, changed, or deleted.

Go-to-definition and the import list come from jx parse, run over the editor's buffer, so unsaved edits are what gets parsed. This is also why a <Button /> written inside a comment or a {% raw %} block is correctly not treated as a component tag.

If jx is not installed in the selected interpreter, the extension falls back to recognising imports by their shape, so go-to-definition keeps working.

Installation

Launch VSCode Quick Open (Ctrl+P), paste the following command, and press ENTER.

ext install jpscaletti.jinja-jx

Alternatively:

1. Download the jinja-jx-VERSION.vsix file from the GitHub repo
2. Launch VSCode Quick Command (Shift+Ctrl+P)
3. Run "Extensions: Install from VSIX..."

Configuration

All settings are optional — the extension works out of the box with auto-detection.