Preview a Django template without starting its application server

A template review is easier to reproduce when the template, engine and input data are all explicit. Here is the native Django workflow being added to Arguseye, including a baseline you can compare after an edit.

I’m the maker of Arguseye. This draft was prepared with AI from the project’s implementation and test records; it is not a report of production adoption.

Release status: use the feat/template-previews source branch for this walkthrough. The published 0.0.15 npm and VS Code packages do not contain this work yet.

1. Use a real Python environment

Your project needs its own Django installation. Arguseye uses .venv/bin/python on Linux/macOS or .venv/Scripts/python.exe on Windows when that environment exists. Another interpreter can be selected in project configuration.

The template project does not need React or a package.json. The Arguseye CLI itself still requires Node.js 22+ and Chromium or Chrome.

Build the development branch in a separate directory:

git clone --branch feat/template-previews https://github.com/DarkWorldCoder/arguseye.git
cd arguseye
npm ci
npm run build

In the following commands, replace /path/to/arguseye and /path/to/python-app with your actual directories. No app server is started.

2. Make a small template with an include

templates/card.html:

<article>
  <h1>Hello {{ name }}</h1>
  {% include "items.html" %}
</article>

templates/items.html:

<ul>
  {% for item in items %}
    <li>{{ item }}</li>
  {% endfor %}
</ul>

At the Python project root, create arguseye.templates.json:

{
  "version": 1,
  "mappings": [{"pattern": "templates/**/*.html", "engine": "django"}],
  "roots": ["templates"],
  "profiles": {"example": {"name": "Ada", "items": ["Tea", "Coffee"]}}
}

A path mapping matters because .html can also be ordinary HTML. Template delimiters alone are not proof that Django is the correct engine.

3. Save a baseline

node /path/to/arguseye/dist/cli.mjs shot templates/card.html \
  --root /path/to/python-app \
  --engine django --profile example \
  --capture-dir /tmp/card-baseline --json --output summary

The result includes accessibility text, errors, warnings, resolved inputs and native-engine metadata. The baseline directory preserves the screenshot and comparison inputs even though this command only prints a summary.

Check errors and warnings before treating the result as complete. Missing context is useful evidence for the next edit.

4. Edit the partial and compare

Change the list text or styling in items.html, then run:

node /path/to/arguseye/dist/cli.mjs diff \
  --root /path/to/python-app \
  --baseline /tmp/card-baseline \
  --out /tmp/card-comparison --json

The comparison uses the baseline’s resolved data and viewport. It returns before/after evidence, highlighted changed pixels, accessibility changes, and new or resolved errors. Its status is unchanged, changed or incomplete.

A changed screenshot still needs a review. It does not establish that the edit is correct.

In VS Code

The matching extension build adds Preview Component to the editor, tab and Explorer context menus. Choose the engine and a data profile, then open Props to edit JSON. Unsaved template and partial edits use the same engine as CLI and MCP verification. Template updates replace the document and reset interactive state.

Where a full application test is still needed

This workflow renders Django’s native templates with supplied context. It does not automatically run views, middleware, context processors or database queries. Project tags and filters need explicit setup. Rendering trusted template code is not an OS security sandbox.

The native-template guide lists the installed engine fixtures, configuration and exact adapter boundaries. Reproducible examples that expose a wrong include, escaping difference or missing context are especially useful feedback.