# Anki Card Template Editor in VS Code using AnkiConnect

**URL:** <https://forums.ankiweb.net/t/anki-card-template-editor-in-vs-code-using-ankiconnect/28522>\
**Category:** Add-ons\
**Created:** [March 16, 2023, 6:15pm UTC](https://forums.ankiweb.net/t/anki-card-template-editor-in-vs-code-using-ankiconnect/28522 "2023-03-16T18:15:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![krmanik](https://avatars.discourse-cdn.com/v4/letter/k/d6d6ee/32.png) [@krmanik](https://forums.ankiweb.net/u/krmanik)\
**Post date:** [March 16, 2023, 6:15pm UTC](https://forums.ankiweb.net/t/anki-card-template-editor-in-vs-code-using-ankiconnect/28522/1 "2023-03-16T18:15:26Z")

</div>

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](https://code.visualstudio.com/) using [AnkiConnect](https://github.com/FooSoft/anki-connect)

## Requirements

- [AnkiConnect](https://github.com/FooSoft/anki-connect)
- [VS Code](https://code.visualstudio.com/)

## 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](https://marketplace.visualstudio.com/items?itemName=krmani.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

- [Anki Card Template Editor - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=krmani.anki-card-template-editor)
- [GitHub - krmanik/anki-card-template-editor](https://github.com/krmanik/anki-card-template-editor)

## Image

 ![image.png](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/c16c45574f9155fbd761f39a4b9cef3749363bde.png)

---

<div class="post-metadata">

**Author:** ![jojo55](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jojo55/32/13703_2.png) [@jojo55](https://forums.ankiweb.net/u/jojo55)\
**Post date:** [March 22, 2023, 4:06am UTC](https://forums.ankiweb.net/t/anki-card-template-editor-in-vs-code-using-ankiconnect/28522/2 "2023-03-22T04:06:37Z")

</div>

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. 🙂

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.

---

<div class="post-metadata">

**Author:** ![snowrain](https://avatars.discourse-cdn.com/v4/letter/s/0ea827/32.png) [@snowrain](https://forums.ankiweb.net/u/snowrain)\
**Post date:** [September 27, 2024, 4:16pm UTC](https://forums.ankiweb.net/t/anki-card-template-editor-in-vs-code-using-ankiconnect/28522/3 "2024-09-27T16:16:46Z")

</div>

Hey! I’m sorry for redundancy but I’ve just created a first issue in your github repo.  
I’m thrilled to start using it as I’m so tired jumping through different windows and menus while crafting my perfect template.  
Thank you
