Template Editor - Live Preview and Safe File Sync

AnkiWeb addon 2053098767

Edits card template HTML and shared CSS with live desktop/mobile previews, mirrors them to files for external tools, detects independent changes, and applies only after explicit confirmation.
AI-generated summary; may contain mistakes.

card-templates

Open on AnkiWeb GitHub Find alternatives

AnkiWeb

Votes: 0 (👍 0 · 👎 0)
Updated: 2026-08-10
Anki versions: 26.08~
License: ISC (from the license file in the package)
Virus scan: No ClamAV match A match does not prove malware. No match does not prove that the code is safe.
Languages: JavaScript, Python, CSS, HTML, JSON
Description language: en

Maintenance

active

Last update or commit: 2026-08-10 (83 days before the snapshot).
Test files: 6.
GitHub Actions workflows: 1.
Commits in the last year: 4.
Issues: 0 open, 0 closed.
Pull requests: 0 open, 0 merged.

GitHub

Repository: karasunokami/anki-template-editor · more by karasunokami
Stars: ⭐ 0 · forks 0 · open issues 0
Last commit: 2026-08-10
License: A license file that GitHub does not recognize
Languages: TypeScript, Python, CSS, JavaScript, HTML
Tests: 6

Will it work on my Anki?

Version branches

Min Anki	Max Anki	Updated
25.07	26.08+	2026-08-10

History across monthly snapshots

Loading…

Similar addons

External Code Editor

Copies card template code to an editable HTML file in collection.media, lets you edit externally, and syncs changes back during review or preview, reloading the card.

card-templates developer-tools

Anki Prettify - Beautiful Custom Card Templates

Applies professionally designed, light/dark-aware card templates to any note type, with drag-and-drop field mapping, per-field styling, audio support, live preview, and automatic template backup and restore.

formatting appearance card-templates mobile-compatible

Export to Html 2025

Exports Anki decks to standalone HTML files with customizable templates and CSS, embedded images, Anki search filtering, and live preview before saving.

export formatting shortcuts fork-or-reupload

extended html editor for fields and card templates (with some versioning) has 1 fork →

Provides a CodeMirror-based HTML/CSS source editor for note fields and card templates, with syntax highlighting, search and replace, external editor support, and saved version comparison.

formatting card-templates obsolete

Anki-Coder

Adds a CodeMirror code editor to Anki flashcards with syntax highlighting, themes, live preview, double-click editing, configurable languages and note types, and mobile and cloze-card support.

formatting appearance mobile-compatible

🟨 Sticky Notes for Anki - Create Beautiful Stickies in Anki Reviews

Adds customizable Markdown sticky notes to card review screens with live preview, images/GIFs, presets, templates, image/JSON export, and automatic grid layout.

export review-flow formatting shortcuts appearance

Description

Edit card template HTML and shared CSS in a native Anki window with live desktop/mobile previews and safe file-based workflows.

Anki Template Editor adds Tools → Template Editor. It mirrors each selected note type to readable HTML, CSS, and preview-field files, then watches those files while the editor is open. Use the built-in CodeMirror editor or edit the mirror with another tool.

Changes never reach Anki until you review and confirm Apply to Anki. Three-way merge detects independent edits in Anki and on disk. Pre-apply history keeps ten source snapshots per card type.

Features:

Front, back, and shared CSS editing
Live desktop/mobile and light/dark previews
Regular and cloze note types
Note search for realistic preview values
Collection media preview
External file-change detection
Explicit conflict handling and apply confirmation
No AnkiConnect or Node.js runtime dependency

Requirements: Anki 25.07 or newer, Qt 6.

Install, restart Anki, then open Tools → Template Editor. Mirror data defaults to ~/.AnkiTemplateEditor; change it through add-on configuration.

Source, documentation, and issue tracker: https://github.com/karasunokami/anki-template-editor

License: 0BSD. Use, modify, distribute, or relicense for any purpose; attribution is not required.

Release notes — 0.1.0

Initial public release.

README

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.

Anki Template Editor showing template source beside mobile question and answer previews

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

Open card type in Template Editor once. Mirror files are created.
Choose Open folder or Copy dir path above source editor.
Let external tool edit files.
Keep Template Editor open. Preview refreshes after stable disk change is detected.
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.