Live Jinja Renderer
A powerful VS Code extension for real-time Jinja2 template preview with authentic Python Jinja2 (via Pyodide). Edit templates and variables side-by-side with instant rendering, markdown support, mermaid diagrams, intelligent whitespace management, and smart error navigation.
🎯 Perfect for: Python developers, DevOps engineers, Ansible users, configuration management, and anyone working with Jinja2 templates.
✨ Key Features
🐍 Authentic Python Jinja2
- Uses real Python Jinja2 engine via Pyodide (not a JavaScript port)
- 100% compatible with Python Jinja2 behavior
🎨 Flexible UI Options
- Sidebar View: Persistent panel in Activity Bar (like Source Control or Debug)
- Panel View: Separate editor pane that opens beside your file
- Selection Rendering: Select any portion of text to render just that section
- File History Dropdown: Quick access to recently opened files/selections
- Switch between views based on your workflow
⚡ Real-time Everything
- Instant rendering as you type (or manual control with auto-rerender toggle)
- Live variable updates with JSON editing
- Auto-sync when switching between files
- Multi-file support with automatic context switching
- File history tracks last 5 contexts for easy switching
📝 Rich Content Support
- Markdown rendering: Beautiful formatted output
- Mermaid diagrams: Flowcharts, sequence diagrams, gantt charts
- Whitespace management: Smart culling and visualization
🎯 Developer Experience
- Smart Error Navigation: Click errors to jump to the line in your template
- Visual Error Highlighting: Red highlights on error lines
- Save/Load Variable Presets: Reuse complex JSON configurations
- Import/Export Variables: Share variables via JSON files or clipboard
- Ghost Save: Variables auto-save per file and restore across sessions
- Auto-Resizing: Variables section adapts to content
- File History: Dropdown menu for quick context switching
- Keyboard shortcuts for quick access
Quick Start
- Open a
.txt, .jinja, .j2, or plaintext file with Jinja2 syntax
- Press
Ctrl+Alt+J (Windows/Linux) or Cmd+Shift+J (Mac)
- Edit variables in JSON format
- See rendered output in real-time
- Use the auto-rerender toggle button (▶️⏸️) to control automatic updates
- Click the chevron icon (🔽) to access recently opened files/selections
Quick Actions:
- Navigation bar: Markdown, Mermaid, Update icons
- Three-dot menu (⋯): All settings and actions
- Auto-rerender button: Toggle automatic rendering on/off
- File history dropdown: Switch between recent files/selections
Panel View
Press Ctrl+Alt+Shift+J (Windows/Linux) or Cmd+Shift+Alt+J (Mac) for side-by-side editor view.
Features in Detail
File History Dropdown
NEW in v1.5.0: Switch between multiple files and selections effortlessly! 📂
- Quick access: Click the chevron icon next to the file name in sidebar
- Last 5 contexts: Tracks your most recent files and selections
- Live-linked: Each entry stays connected to its source file for automatic updates
- Unique states: Each context maintains its own variables and selection range
- Active indicator: Checkmark shows which context is currently active
- Use cases: Multi-file projects, comparing template sections, rapid context switching
Selection-Based Rendering
v1.4.0: Render only the portion of your file that matters! 🎯
- Select text in your Jinja/text file (any lines)
- Open renderer via sidebar, panel, or context menu
- Visual highlight: Selected range gets a subtle blue tint in your editor
- File name shows selection:
filename.txt (Lines 5-12)
- Scoped operations: Variables, auto-refresh, ghost save all work on selected lines only
- Persistent: Each file remembers its rendering scope
- History support: Different selections of the same file appear as separate history entries
- Use cases: Large templates, focusing on sections, testing specific blocks
Auto-Rerender Control
v1.3.3: Toggle automatic rendering for better performance with large templates.
- Enabled (default): Template re-renders on every file/variable change
- Disabled: Manual render only - prevents automatic updates
- Toggle button: Click the play/pause icon in the sidebar file name bar
- Setting:
liveJinjaRenderer.autoRerender in VS Code settings
File Name Display
v1.3.3: See which file you're rendering at a glance.
- Displayed prominently above the Variables section
- Automatically updates when switching files
- Shows selection range if rendering partial document
- History dropdown for quick context switching
- Handles special characters correctly
Automatic: When opening or switching files
Manual: Ctrl+Alt+E (Windows/Linux) or Cmd+Shift+E (Mac)
Intelligently detects:
{{ variable }} patterns{% for item in items %} loops- Object properties like
{{ user.name }}
- Preserves custom values on re-extraction
Ghost Save
Auto in v1.3.2: Variables save automatically per file (1 second after editing) and restore when you reopen files.
Variable Presets
v1.1.0: Save, load, and reuse variable configurations.
- Save: Click save icon or three-dot menu
- Load: Click load icon or three-dot menu
- Use cases: API responses, test scenarios, common templates
Import/Export Variables
NEW: Share and backup variable configurations with intuitive import/export.
- Export to File: Save variables as formatted JSON files with smart naming
- Export to Clipboard: Copy variables as JSON for quick sharing
- Import from Workspace: Choose from JSON files in your workspace
- Import from File Browser: Load from any JSON file on your system
- Import from Active Editor: Use JSON from currently open file
Examples
Basic Template
Hello {{ name }}!
{% for item in items %}
- {{ item }}
{% endfor %}
Markdown Output
Enable "Markdown" toggle for formatted output with headers, lists, and code blocks.
Mermaid Diagrams
Enable "Mermaid" toggle for flowcharts and sequence diagrams.
Extension Settings
All settings are now organized into clear categories for easier configuration:
Rendering
liveJinjaRenderer.rendering.enableMarkdown: Markdown rendering (default: false)liveJinjaRenderer.rendering.enableMermaid: Mermaid diagrams (default: false)liveJinjaRenderer.rendering.showWhitespace: Show whitespace characters (default: true)liveJinjaRenderer.rendering.cullWhitespace: Remove excessive whitespace (default: false)liveJinjaRenderer.rendering.autoRerender: Automatic re-rendering (default: true)liveJinjaRenderer.rendering.rerenderDelay: Delay before auto-rerender in ms (default: 300)
Editor
liveJinjaRenderer.editor.autoResizeVariables: Auto-resize variables section (default: true)liveJinjaRenderer.editor.formatVariablesJson: Auto-format JSON (default: true)
Variables
liveJinjaRenderer.variables.autoExtract: Auto-extract variables (default: true)liveJinjaRenderer.variables.preserveCustomValues: Preserve custom values on re-extract (default: true)
History
liveJinjaRenderer.history.enabled: Enable file history tracking (default: true)liveJinjaRenderer.history.size: Max history items, 3-15 (default: 5)
Advanced
liveJinjaRenderer.advanced.ghostSave: Auto-save variables per file (default: true)liveJinjaRenderer.advanced.ghostSaveDelay: Delay before ghost-save in ms (default: 1000)liveJinjaRenderer.advanced.showLoadingIndicators: Show loading messages (default: true)
Note: Old setting names (e.g., liveJinjaRenderer.enableMarkdown) still work for backwards compatibility.
Recent Updates
- Expanded Jinja keyword list with 40+ new filters and built-ins
- Added support for ternary expressions in templates
- Added support for slice notation (e.g.,
{{ items[1:5] }})
- Added support for negative array indices (e.g.,
{{ items[-1] }})
- Added support for method calls (e.g.,
{{ dict.keys() }})
- Improved handling of multi-line
{% set %} blocks
- Better variable extraction accuracy for complex templates
1.5.1 - Migration & Compatibility Patch
- Fixed settings migration and backwards compatibility for toggle commands
- Improved fallback logic for reading old/new setting names
1.5.0 - Enhanced Settings & Customization
- Reorganized Settings: Clear categories (Rendering, Editor, Variables, History, Advanced)
- 8 New Settings: Control render delay, auto-resize, JSON formatting, file history, ghost save delay, and more
- Better Defaults: Show Whitespace now ON, Cull Whitespace now OFF by default
- Smart UI: File history dropdown hides when disabled, ghost save respects settings
- Backwards Compatible: Old setting names still work
1.4.6 - Status Bar Indicator
- Status bar shows current settings (hover to see all)
- Click status bar to open extension settings
- Removed toast notifications for less intrusive experience
1.4.5 - Code Quality & Type Safety
- Major Refactor: Split webview code into separate files (HTML, CSS, JS) for better maintainability
- Clean Code: Fixed all TypeScript and ESLint errors without using
@ts-nocheck
- Added comprehensive type declarations for webview APIs and external libraries
- Improved code organization following separation of concerns best practices
- Zero linting errors with proper type checking enabled
- No functional changes - all features work exactly as before
1.4.4 - Bug Fixes
- Fixed selection highlight persistence when closing/reopening sidebar
- Highlights properly clear and re-apply when switching views
1.4.3 - File History
- File History Dropdown: Quick access to last 5 files/selections via dropdown menu
- Each history entry maintains its own state (file, selection, variables)
- Live-linked to source files for automatic updates
- Click chevron icon next to file name to switch contexts
- Perfect for multi-file workflows and rapid context switching
1.4.2 - Selection Range Adjustment
- Dynamic selection range adjustment when adding/removing lines
- Selection automatically expands and shrinks based on edits
1.4.1 - Visual Highlighting
- Subtle blue background tint highlights selected rendering range
- Shows in overview ruler for easy navigation
1.4.0 - MAJOR UPDATE
- Selection-based rendering: Select any portion of text to render just that section
- Visual highlight: Subtle blue tint on selected range in editor
- Scoped operations: Variables, auto-refresh, ghost save all work on selection
- File name displays line range when rendering selection
- Smart error navigation adjusts for selection offset
1.3.3 - Auto-Rerender Control
- Dynamic file name display above variables
- Auto-rerender toggle control for performance
- Sidebar toggle button for quick access
1.3.2 - Ghost Save
- Ghost save: Variables auto-save per file
- Smarter variable extraction with merge
- Editor context menu integration
- Variable preset quick action buttons
1.3.0 - Error Navigation
Clickable error messages with line highlighting - jump directly to errors in your template. Enhanced error detection and navigation for faster debugging.
1.2.1 - Enhanced JSON Editor
Enhanced JSON editor with smart auto-closing brackets, auto-indentation, tab support, and better editing experience.
1.2.0 - Loading Indicators
Loading indicators for async operations, improved variable extraction algorithm (30+ test cases), and cleaner JSON output with 2-space indentation.
1.1.4 - Auto-Resizing
Auto-resizing variables section that dynamically adjusts height based on content (100px min, 60% viewport max).
1.1.3 - Bug Fixes
Fixed "Update for Current File" button functionality for proper variable extraction and live updates.
1.1.2 - Bug Fixes
Fixed "Extract Variables" button in panel view and improved icon visibility in menus.
1.1.0 - Variable Presets
Variable Presets feature - save, load, and delete variable configurations for reuse across templates.
Smart variable extraction (auto-extract on file load, manual via Ctrl+Alt+E). Fixed newline rendering and whitespace preservation bugs.
1.0.1 - UI/UX Improvements
UI/UX improvements - moved controls to native VS Code menus, added navigation bar buttons, fixed clipboard functionality.
1.0.0 - Initial Release
Initial Marketplace Release - production-ready with full feature set.
0.0.1 - Development Release
Initial Development Release - Authentic Python Jinja2 via Pyodide, JSON editor, live preview, Markdown/Mermaid rendering, whitespace control.
Links
Contributing
Issues and pull requests are welcome! Visit the GitHub repository to contribute.
License
This extension is licensed under the MIT License.
