Jinja2 templating that knows your backend.
Stop guessing which variables exist. Backend-aware intelligence for Flask, Django, FastAPI, Express, and Nunjucks — go-to-definition, hover origin, inherited variable resolution, cross-file macros, advanced linting, and template preview. All free.
v1.18.0 @xubylele/jinja2-enhanced-sharedv0.5.2 - Backend intelligence — hover origin, go-to-definition, and a Backend Variables panel for Flask, Django, FastAPI, Express & Nunjucks.
- Cross-file tracking — inherited variables via
extends, imported macros, namespace completions. - Advanced linting — unused set variables, block-scope leaks, nesting depth, macro arity, unused blocks (JHE1200–1204).
- Template Preview v2 — named context profiles, backend-auto-populated variables, mock-data presets, live re-render.
- Jinja2-aware formatting — delegates to
prettier-plugin-jinja-template, auto-detects + auto-installs. - Variable type hints — infers types from backend annotations, inherited scope, and template usage patterns.
Works with your stack
Backend intelligence for all major Jinja2 frameworks — 100% free.
Works with any Jinja2 template — no paid license needed.
How it works
Three steps to cleaner Jinja2 templates.
Install the extension
Install from VS Code Marketplace. Works with VS Code and Cursor. Opens .html, .jinja2, .j2 files automatically.
Open your templates
Syntax highlighting activates immediately. Variable checking catches undefined names. Save known variables to your workspace config with one click.
Connect your backend
The extension reads your Flask, Django, FastAPI, or Express routes. Variables passed to templates are resolved automatically — no more false undefined warnings.
Why Jinja2 Enhance?
Built for real-world template workflows, not just syntax highlighting.
Zero-config start
Install and open any .html, .jinja2, or .j2 file. Syntax highlighting works immediately. No configuration required.
Backend-aware
Reads your Flask, Django, FastAPI, or Express routes to resolve variables at their source. No more false undefined warnings on backend-provided data.
Cross-file intelligence
Tracks extends, includes, and imports across your entire workspace. Variables defined in base templates are visible in children.
5 theme options
Choose from Dark Default, Light Default, High Contrast variants, or Xuby Selection. Fully customizable via VS Code tokenColorCustomizations.
Bilingual UI
Full English and Spanish localization for commands, settings, and the Variable Panel. More languages coming with community contributions.
MIT & Open Source
Fully open source on GitHub. Inspect the code, contribute, or fork it. Free forever.
Everything included
All features are free. No tiers, no paywalls.
- Syntax highlightingDistinct colors for {% %} tags, {{ }} variables, and pipe filters inside HTML, style, and script blocks.
- 10 built-in snippetsfor, if, ife, block, extends, include, set, macro, with, filter — all expandable in any HTML/Jinja2 file.
- Jinja2 comment togglingCmd+/ or Ctrl+/ wraps the selection in {# …
- Jinja2-aware formattingDelegates formatting to prettier-plugin-jinja-template — auto-detected, auto-installed if missing, on save by default.
- Variable checking (JHE0001)Flags undefined Jinja2 variables. Recognizes {% set %} and {% for %} bindings; allowlist suppresses backend-injected names.
- Variable PanelSidebar webview listing every variable used or set in the current template, with one-click jump to its origin.
- 5 built-in themesDark Default, Light Default, Dark/Light High Contrast, and Xuby Selection — plus full editor.tokenColorCustomizations support.
- Filter docs on hoverHover any built-in Jinja2 filter to see its signature, description, and a usage example — English or Spanish.
- English & Spanish UILocalized command titles, settings, and panel copy in EN and ES.
- Template PreviewRender templates with named context profiles, mock-data presets, and one-click chips to fix missing variables.
- Macro IntelliSense (same-file)Autocomplete and signature help for macros defined in the current template. Cross-file macros via extends and import are also supported.
- Backend variable resolutionResolves variables from Flask, Django, FastAPI, Express, Nunjucks, and standalone Jinja2 render calls — no more false "undefined" warnings.
- Go to backend definitionF12 or Cmd+Click on any template variable jumps straight to the line in your Python or JavaScript source where it's declared.
- Cross-file template trackingResolves {% extends %} chains, {% include %} children, and inherited {% set %} variables — so child templates stop flagging variables defined in their base.
- Cross-file macro IntelliSenseAutocomplete and signature help for macros imported from other templates — both {% import as ns %} and {% from … import %}.
- Template path navigationF12 / Cmd+Click on any extends, include, or import path opens the resolved file. Auto-discovers templates/ roots; configurable.
- Variable origin on hoverHover any variable to see whether it came from a backend call, an inherited base template, or an imported macro — with a click-to-jump link.
- Advanced linting rulesJHE1200–JHE1204 catch unused {% set %} variables, block-scope leaks, excessive nesting, macro arity mismatches, and unused blocks — beyond the free JHE0001 / JHE1101 / JHE1102 checks.
- Smart lightbulb actionsWhen JHE0001 fires and the name is found in the template hierarchy, the quick-fix offers "Go to inherited definition".
- Variable type hints on hoverHover any variable to see its inferred type — pulled from backend annotations, inherited scope, and template usage patterns.
- Template PreviewSee exactly how your template renders with backend variables — catch missing or misconfigured variables before you ever hit the server.
Features that make a difference
The differentiators — what makes this extension worth using on a real project.
Variable checking (JHE0001)
Flags undefined Jinja2 variables. Recognizes {% set %} and {% for %} bindings; allowlist suppresses backend-injected names.
Variable checking runs on save (or on demand) and surfaces a JHE0001 diagnostic for any name your template references but never defines. The analyzer follows {% set %} assignments and loop variables, so you only see real misses — not false alarms on locals.
Names that come from your backend can be added to a workspace allowlist with one click via the Save variable quick fix.
Backend variable resolution
Resolves variables from Flask, Django, FastAPI, Express, Nunjucks, and standalone Jinja2 render calls — no more false "undefined" warnings.
Jinja2 Enhance parses your backend source to learn which variables each template actually receives. Flask render_template(), Django render(), FastAPI TemplateResponse, Express/Nunjucks res.render(), and standalone Jinja2 are all recognized.
Variables passed from the backend are no longer flagged as undefined, and the Variable Panel shows their origin alongside template-local bindings.
Go to backend definition
F12 or Cmd+Click on any template variable jumps straight to the line in your Python or JavaScript source where it's declared.
Hover a variable, click the link (or hit F12), and Jump the exact render_template / render / TemplateResponse call site that supplies it. Works across files, across frameworks, and across multi-render templates that receive different variables from different routes.
Cross-file template tracking
Resolves {% extends %} chains, {% include %} children, and inherited {% set %} variables — so child templates stop flagging variables defined in their base.
Builds a workspace-level template graph and walks the entire {% extends %} chain for each file. Variables defined in a base template are visible in every child; loop and block scopes are tracked correctly.
Two graph diagnostics catch structural problems early:
JHE1101— unresolved template path in extends/include/importJHE1102— circular extends chain
Template Preview
See exactly how your template renders with backend variables — catch missing or misconfigured variables before you ever hit the server.
Preview your Jinja2 template directly inside VS Code. The Template Preview panel renders your template and shows:
- The full rendered HTML output built from your template + variables
- Visual placeholders highlighting undefined or missing variables directly in the preview
- An error list with every misconfigured variable, each linking back to the exact line in your template
What’s included
| Feature | Included |
|---|---|
| Rendered HTML preview | ✅ |
| Missing variable highlighting | ✅ |
| Named context profiles saved per template | ✅ |
| Mock-data presets (user, list, paginated, form) | ✅ |
| Backend variables auto-detected (Flask, Django, FastAPI, Express) | ✅ |
| Live reload on template or context changes | ✅ |
| Collapsible JSON context editor | ✅ |
| CSS auto-detected from project (Flask static, CDN, inline) | ✅ |
No more guessing whether {{ user.name }} will actually resolve — see it rendered, or see exactly why it won’t.
Real Backend Context
The preview automatically detects the variables your backend passes to render_template(), render(), TemplateResponse(), or .render() — so the preview matches what you’ll actually see at runtime. Profile-defined values override these defaults.
CSS-Aware Preview
The preview panel automatically detects and applies the CSS your templates reference — no manual setup needed:
- Flask static files —
url_for('static', filename='css/...')and/static/css/...paths are resolved relative to your project and loaded directly in the preview - CDN stylesheets — Bootstrap, Tailwind CDN, Bulma, and any
https://stylesheet are injected automatically - Inline
<style>blocks — styles defined in the template or any of its{% extends %}ancestors are applied - Fallback structural styles — when no CSS is detected, the preview applies a minimal stylesheet that makes semantic elements (
<header>,<section>,<nav>,<aside>,<article>,<footer>) visually distinct so you can read the structure at a glance
What's new
The biggest release yet — backend intelligence, type hints, cross-file macro resolution, and five new linting rules.
Backend Intelligence
Hover any template variable to see which backend file and line declares it. Jump to definition with Cmd+Click. A dedicated panel lists all backend-declared variables for the active template — Flask, Django, FastAPI, Express, and Nunjucks.
Variable Type Hints
Types inferred from Python and TypeScript backend annotations, template usage patterns (member access like user.name infers object), and inherited scope. Object types list their known fields inline on hover.
Cross-file Macro Intellisense
Macros from {% extends %} and {% import %} appear in autocomplete with snippet insertion. Namespace completions work too — type forms. to see all macros from an import. Signature help resolves both inherited and namespaced macros.
Template Navigation
Cmd+Click or F12 on any path inside {% extends %}, {% include %}, {% import %}, or {% from %} jumps directly to the referenced file. Circular {% extends %} chains and unresolvable paths are flagged inline.
Smarter Template Preview
CSS auto-detected from Flask static files, CDN stylesheets, and inline <style> blocks is applied automatically in the preview. Backend-detected variables are pre-populated as context defaults — no manual setup needed.
Advanced Linting
Five new rules: unused {% set %} variables (JHE1200), variables set inside a block but used outside its scope (JHE1201), excessive nesting depth (JHE1202), incorrect macro argument counts (JHE1203), and block definitions never overridden by child templates (JHE1204).
Full details in the CHANGELOG.
See it in your editor
From syntax highlighting to backend-aware variable resolution — all free.
View full size
Distinct colors for {% %}, {{ }}, and pipe filters.
View full size
JHE0001 catches undefined names; one-click "Save variable" adds it to your allowlist.
View full size
F12 or Cmd+Click on any variable jumps to the render_template line that supplies it.
View full size
Every backend-provided variable, grouped by name, with jump-to links per call site.
100% Free. Forever.
MIT-licensed. No account, no subscription, no license key.
Everything included. No tiers, no paywalls.
- Syntax highlighting + 10 snippets
- Variable checking (JHE0001) + quick-fix
- Variable Panel sidebar
- Backend variable intelligence (Flask · Django · FastAPI · Express · Nunjucks)
- Go to backend definition (F12 / Cmd+Click) + hover origin
- Cross-file extends/include/import tracking with inherited variable scope
- Cross-file Macro IntelliSense (completion + signature help)
- Advanced linting (JHE1200–JHE1204)
- Variable Type Hints on hover
- Template Preview v2 with backend auto-population
- Jinja2-aware formatting (prettier-plugin-jinja-template)
- 5 themes + token customization
- EN / ES localization
Frequently asked
The questions we get most. Email us if you don't see yours.