Anki Card Template Editor in VS Code using AnkiConnect

I have created a VS Code extension to edit and update multiple card type in a notetype.

Edit and update Anki deck’s card templates in VS Code using AnkiConnect

Requirements

Features

  • Select notetype from drop down to create html and styling of card template
  • Edit and update front, back and styling of card template
  • Option to update single card type or deck notetype
  • Backup directory created with original html and css

Usage

It is recommended to create backup of Anki decks before using this extension.

Create Card Template Directory

  1. Install anki-card-template-editor extension
  2. Create html files for front, back and styling using commands provided in the extension, use Ctrl + Shift + P to open command window and type create
  3. Select Create Anki Card Template Directory
  4. Select notetype listed in menu
  5. Enter directory name to store files in it
  6. It will create html files for each card in a notetype

Update Current File to Card

  1. Open file to edit
  2. Click send icon button to update current file to card in notetype

Update full notetype

  1. Edit multiple files
  2. Click sync icon button to update full notetype with each card

More Info

Image

6 Likes

This is…really cool. Much faster than going through multiple windows/tabs in Anki itself. (Not to mention how much prettier the editor itself is) I have next to zero coding skills, so if any of my terminology here is wrong, I apologize. :slight_smile:

Unless I’m doing something wrong (which is highly likely), the backup folder gets wonky if you open more than one Note Type at a time. Like if you finish with one and want to move on to the next, or if you want to copy parts of one and put it on another. The message is: “Backup folder already exists at …” I guess the solution for that is to open a different parent folder first, but that makes the “Create Anki Card Template Directory” button a little confusing. This might be something with VS Code that I am unfamiliar with because I don’t know my way around it at all.

This extension seems like it would be an awesome way to backup your Note Types. Usually if I am working on editing one, I’ll make a clone backup in Anki, or I will manually copy/paste front, back, and styling into a single text file. I used to have a deck just for note type saves/exports but that gets confusing fast. Having the different folders that this extension creates would streamline this.

It would be nice if at the “Enter card template folder name:” part, it would auto-fill the name of your Note Type. It might just be me, but my note type names are long so that they can be descriptive.

Thanks for making this! Time for me to find some HTML/CSS extensions for VS Code. Just the fact that I can use a nicer editor makes this awesome.