Anki Template Editor

Native Anki add-on for editing card template HTML and shared CSS with live mobile/desktop previews. Every selected note type is mirrored to readable files, so ChatGPT, editors, and other tools can modify templates without touching Anki's database.

What it does

• Adds Tools → Template Editor
• Opens React + CodeMirror inside Anki
• Mirrors front.html, back.html, styles.css, and preview-only fields.json
• Detects external file changes while editor is open
• Saves editor changes to disk after five seconds, on blur, and on tab switch
• Applies to Anki only after explicit confirmation
• Detects independent disk/Anki edits with three-way merge
• Saves ten pre-apply source snapshots per card type
• Resolves card media directly from active Anki collection
• Searches notes from first character and previews selected note without modifying mirror or collection
• Uses standard editing controls by default; Vim mode remains optional

AnkiConnect and Node are not runtime dependencies. Node is needed only to build package.

Requirements

• Anki 25.07 or newer, Qt 6 build
• Node.js 22.13+ and npm for development/package creation

Mirror layout

Default root: ~/.AnkiTemplateEditor. Configure different absolute path through Tools → Add-ons → Anki Template Editor → Config. Open or copy selected mirror path from controls above editor.

~/.AnkiTemplateEditor/<profile>/
└── model-<id>--<name>/
    ├── styles.css
    ├── fields.json
    ├── cards/
    │   └── card-<ordinal>--<name>/
    │       ├── front.html
    │       └── back.html
    ├── .anki-template-editor.json
    └── .state/
        ├── base/
        └── history/

styles.css belongs to whole note type. Changing it affects every card type. fields.json changes preview only; it never modifies notes or field schema.

Build and install

AnkiWeb add-on code: 2053098767. In Anki, open Tools → Add-ons → Get Add-ons, enter code, install, then restart Anki.

npm ci
npm test
npm run test:python
npm run lint
npm run package

Generated package: release/anki-template-editor-<version>.ankiaddon.

npm run package builds a flat, reproducible archive, syncs human_version from package.json, and rejects missing runtime files, invalid JSON/Python, source maps, bytecode, cache folders, symlinks, and unsafe archive paths.

Install through Tools → Add-ons → Install from file, select package, restart Anki, then use Tools → Template Editor.

Editing with ChatGPT or another tool

1. Open card type in Template Editor once. Mirror files are created.
2. Choose Open folder or Copy dir path above source editor.
3. Let external tool edit files.
4. Keep Template Editor open. Preview refreshes after stable disk change is detected.
5. Review output and choose Apply to Anki.

Invalid UTF-8, missing files, malformed fields.json, and files over size limit never apply to Anki. Template JavaScript runs inside sandboxed preview iframe.

Development

npm run dev

Browser development shows bridge-unavailable message because collection operations exist only inside Anki. Pure merge/storage/service behavior is covered by Python tests; renderer and bridge behavior by Vitest.

See release checklist and AnkiWeb listing copy before upload.

License

0BSD. Use, copy, modify, distribute, or relicense for any purpose, with or without fee. No attribution required.