How to Use ankieditor, Step by Step with Screenshots

How to Use ankieditor, Step by Step with Screenshots

From copying your template out of Anki, through styling it in ankieditor, to pasting it back โ€” here is the whole flow, one screenshot at a time. A text-only summary lives on the Guide page.

1. Copy your template from Anki

In Anki, open Tools โ†’ Manage Note Types.

Selecting Manage Note Types from Anki's Tools menu

When the note types window appears, click [Cards...].

Clicking the Cards... button in the note types window

On the card types screen that opens, copy the code from all three panes: Front Template, Back Template, and Styling.

Anki's card types screen โ€” copying the code from the Front Template, Back Template, and Styling panes

2. Paste it into the editor

Click [Import] at the bottom of ankieditor's left panel.

The Import button at the bottom of ankieditor's left panel

Paste the code you copied into the matching fields of the import dialog, then click [Load]. The [๐Ÿ“‹ Paste] button next to each field fills it in automatically from your clipboard.

The Anki template import dialog โ€” paste buttons next to each field and the Load button

3. Click to style

Click whatever you want to change in the card on the right to select it, then use the left panel to adjust the font, size, color, alignment, and line spacing. Click an empty area to target the whole card instead. The {{FieldName}} pills are Anki placeholders โ€” their contents are never altered, so feel free to click them too.

The ankieditor editing screen โ€” selecting an element in the card and changing its style in the left panel

4. Copy the code back into Anki

Click [Copy Code] to open a menu where you can copy the Front Template, Back Template, and Styling separately.

The menu that opens from the Copy Code button, with Front Template, Back Template, and Styling entries

Copy each one, paste it into the matching pane on Anki's card types screen, and save โ€” that's it. The editor preserves your original template's line breaks and formatting as closely as possible.

Anki's card types screen โ€” pasting the copied code back into the same panes