Smart Card State for Templates

AnkiWeb addon 383260719

Wraps card HTML in a state class container so CSS can switch layouts between new, learn, review, and relearn states.
AI-generated summary; may contain mistakes.

appearance card-templates

Open on AnkiWeb Ask about alternatives

AnkiWeb

Rating: 1 (👍 1 · 👎 0)
Updated: 2026-08-15
Anki versions: 2.1.66~
Description language: en

Maintenance

active

Last update or commit was 47 days before the snapshot (2026-08-15).

GitHub

No GitHub repository linked.

Will it work on my Anki?

Version branches

Min Anki	Max Anki	Updated
2.1.20	2.1.66+	2026-08-15

History across monthly snapshots

Loading…

Adds editor buttons, shortcuts, and menus to apply font/background colors, font sizes, custom classes, styles, and text wrappers in Anki.

formatting shortcuts appearance card-templates cloze mobile-compatible

Better Markdown Anki

Renders flashcards with advanced markdown, LaTeX math, syntax highlighting, theme-aware styling, tag badges, and interactive cloze toggles via React components.

formatting appearance card-templates cloze

CSS classes around fields

Modifies selected notes' card types to wrap each field in CSS classes, with a menu option to remove those styles.

formatting card-templates

Clippy: 1-Click Text Copy

Enables one-click copying of card text by wrapping it in <clip> tags, showing a faint border and clipboard icon, with optional CSS styling.

formatting card-templates dictionary

syntax highlighting FORK (css only, night-mode)

Provides CSS-only night-mode syntax highlighting for code in Anki, requiring template import setup and manual CSS Injector modification for Anki 2.1.50–2.1.54.

formatting appearance card-templates obsolete fork-or-reupload

Export to Html 2025

Exports Anki decks to standalone HTML files with custom templates, CSS, queries, embedded images, and live preview.

export fork-or-reupload

Description

⚡ Smart Card State Automatically switch your card layout between New (Learn) and Review (Recall) modes based on the card's current learning state. What It Does New Cards → Flashcard mode: show the definition and hints. Review Cards → Quiz mode: fill-in-the-blank, hide hints. Learn / Relearn Cards → Intermediate states for short-term learning steps. The add-on wraps your card HTML inside a container with a state class, so you can style each state differently using plain CSS — no JavaScript required. 🚀 Quick 1-Step Setup Paste this into your card template Styling (CSS) tab: /* Hide fill-in box on NEW cards */ .state-new .fill-in-box { display: none; } /* Hide hints on REVIEW cards */ .state-review .hint-box { display: none; } Available States .state-new → First time learning a card .state-learn → Card currently in learning steps .state-review → Graduated card in review cycle .state-relearn → Card in relearning / lapse state Data Attributes In addition to the CSS classes, the wrapper exposes data attributes for advanced styling or scripting: data-state → Current state: new , learn , review , relearn data-reps → Number of times the card has been reviewed data-card-id → The card's unique ID Requirements Supported: Anki 2.1.20+ to 26.x+ (Light & Dark mode). License: MIT License.