Future support for external templates (HTML/Text/JavaScript), in addition to CSS, in Anki?

Anki Suggestions
1

Future support for external templates (HTML/Text/JavaScript), in addition to CSS, in Anki?

Currently, it’s already possible to use external files for styling cards by importing CSS like this:

@import url("_0ankiflashcards.css");

.card {
  background: #FFFFFF;
}

This makes visual editing much easier, especially when using a proper IDE or code editor instead of relying only on Anki’s internal editor.

My question is:
Would it be possible in the future to have a similar approach for the front and back templates (HTML, text, or even JavaScript), making them external and editable directly via an IDE?

This is not something I expect right now, but I’m thinking long-term, in case Anki ever migrates to a more external/template-based model.
Some of the benefits would include:

  • Easier and more professional editing of card layouts.
  • Better version control (Git) and easier sharing of templates.
  • Improved organization, especially for users who create more complex decks.
  • More control over the code, beyond the limitations of the internal editor.

I came across a forum post that suggests something very similar, but it seems nobody has commented on it:
Store card template files as HTML and CSS in external folder

"I would like to suggest that card templates and the styling info be stored as .html and .css in a folder in the user profile directory that is accessible from the file system.
Reasons why this is a good idea:
• Making complex card types with lots of JavaScript will be much easier
• Easy to access and backup
• Easy editing with external editors, without needing add-ons or AnkiConnect
• Version control with Git
Maybe something else that would need to be added is a ‘refresh’ button in the card template editor, for if you have made external changes to the files and want to see them immediately in the card template editor preview pane. This would make debugging a little easier (especially when combined with the add-on that gives access to Chrome developer tools in Anki)."

I also found another related discussion:
Putting Anki code in an external file

The user there expresses a similar need — the desire to avoid repeating the same block of HTML/CSS/field references on multiple cards, and instead reference an external file. They mention:

“Sometimes this ‘code’ needs to be changed or expanded. I can do that using a mass replace for all cards containing it, but that’s a bit dangerous. What if I get it wrong? I could create quite a mess. So, what I would prefer to do is to be able to refer in each card of this type to an external file containing the ‘code’, which is the same for each card of the type, and then modify the ‘code’ in that file as needed.”

It was clarified there that while CSS and JavaScript can be placed in an external file, field references still need to be placed directly in the template.

Still, I wonder if there is any plan, discussion, or technical feasibility for expanding external file support to include not only CSS/JS but also the card templates themselves (HTML with field references).

Thanks in advance for any insights or thoughts on this topic!

2 Likes
2

There are a couple of add-ons that allow the saving of these details externally, more for back-up or external editing, rather than the use you suggest. But they are one small step in that direction.

Because the field is important to the card’s (or note’s) information, how would you propose using an external file that is card-specific or note-specific? It seems like there could potentially be as many of these external files as there are cards in a deck.

3

Currently, it’s already possible to use external files for styling cards by importing CSS like this:

It’s worth noting that when changing external css files like this, you need to restart Anki any time you make changes to them, which means tweaking these files are extremely painful, so they are only really useful for styles that are already very well established in your deck and generally don’t need to be changed much.

There’s also a VSCode extension that uses Anki-connect to allow you to edit templates in real time in VSCode. It works really well but still isn’t nearly as good as having external files that allow users to use whichever editor they want, as well as easily backup files (using Github for example).

Because the field is important to the card’s (or note’s) information, how would you propose using an external file that is card-specific or note-specific? It seems like there could potentially be as many of these external files as there are cards in a deck.

This doesn’t seem like a big problem to me, in fact it seems like a positive as it would allow users quite a lot of control over editing and versioning. Maybe a separate folder for each note type with that note’s files inside would be ideal. Surely Anki’s internal structure of storing note types already has things separated in a similar way (although I guess it’s stored in the database right now)

I imagine the directory structure could look something like this:

-Note Types (dir)
–css (dir)
–js (dir)
script.js
style.css
–Note Type 1 (dir)
—style.css
—script.js
—card-1-template-back.html
—card-1-template-front-html
—card-1-font.css
—card-1-styles.css
—card-1-script.js
—card-2-template-back.html
—card-2-template-front-html
—card-2-styles.css
—card-2-script.js
—card-2-front-script.js
—card-2-back-script.js
–Note Type 2 (dir)
—card-1-template-back.html
—card-1-template-front-html
—card-1-styles.css
—card-1-script.js

I would image that something like above could be implemented.

  • script.js and style.css files in the root notes folder will be loaded in ALL templates in all note types.
  • script.js and style.css files in a note type folder will be loaded for all sides of all cards for that note type
  • specifically named script and style files will be loaded for what they have been specified for, eg:
    ** card-2-script.js will be loaded for both sides of card 2
    ** card-2-front-script.js will only be loaded for the font side of card 2
  • Users can load css and js located in the “css” and “js” directories in the root folder with <link> tags (the idea that these are mostly for external libraries etc, while the user puts their own code in the more specific default files)

This is probably a little convoluted and could be trimmed down a bit, but I personally would be very happy with something like this.

1 Like
4

I would like to suggest that card templates and the styling info be stored as .html and .css in a folder in the user profile directory that is accessible from the file system.

Reasons why this is a good idea:

  • Making complex card types with lots of javascript will be much easier
  • Easy to access and backup
  • Easy editing with external editors, without needing add-ons or AnkiConnect
  • Version control with git

Maybe something else that would need to be added is a “refresh” button in the card template editor, for if you have made external changes to the files and want to see them immediately in the card template editor preview pane. This would make debugging a little easier (especially when combined with the add-on that gives access to Chrome developer tools in Anki)

5 Likes
5

There is an add-on that Saves Deck Settings to disk and also another one that Saves Note Type Settings to disk.
These at least allow you to save the HTML, CSS, JavaScript, etc. externally. The add-ons, though, do not provide a method to load that data back into the Note or Card.

2 Likes