Anki Card Dev Tool

A local web tool to develop and preview Anki card templates.

Live Demo

Visit: https://myztyn.github.io/anki-card-devtool/

What it does

• Edit front.html, back.html, style.css, and data.json
• Simulate Anki field rendering ({{field}}, {{type:reading}}, conditionals)
• Flip card in preview
• Save and load multiple named projects in browser storage
• Export individual template files
• Export optimized bundle containing only:
  • front.html
  • back.html
  • style.css

Run locally

npm install
npm run serve

Open: http://localhost:5173/index.html

Shortcuts

• Cmd/Ctrl + S: Save project
• Cmd/Ctrl + Shift + F: Format active editor

Project structure

• index.html — app shell and UI layout
• app.css — application styles
• app.js — editor logic, simulation engine, storage, exports
• package.json — local dev scripts