This repo is dead since I discovered https://marketplace.visualstudio.com/items?itemName=pedro-bronsveld.anki-editor

anki-card-prototyping

A simple web app template so you can iterate on your Anki card styling faster.

Quickly prototype your Anki card styles with this simple web app template. This project uses Vite to hot-reload your changes in real-time, and SCSS to make styling your cards easier.

Installation

To get started with this project, clone the repository.

Then, install the dependencies:

git clone https://github.com/lstrobel/anki-card-prototyping.git
cd anki-card-prototyping
npm install

Usage

In src/user/card.html, paste the contents of the front or back of your card template, whichever you want to work on. Use src/user/style.scss to write your styles. If you import any fonts, also place them in the src/user directory.

To fill out the card template with the content of fields like in Anki, write examples in src/user/test_fields.yaml. An example of a basic card template and content is provided in the directory already.

To start the development server and begin iterating on your Anki card styles, run:

npm run dev

This will launch the app in your default web browser. The displayed webpage should look just like the card would in Anki. You can then edit the styles and see the changes in real-time.

To compile the css into something you can paste into Anki, run:

npm run build

This will compile the SCSS into a CSS file at dist/style.css. You can copy this and paste it into your Anki to achieve the same styling.

Features and Limitations

Right now, you can use the buttons at the bottom to toggle night mode, mobile view, and to switch between test fields.

However, the cards are currently hard-coded to appear like they do in the Mac version of Anki. This might cause some issues if you write platform-specific CSS in your Anki card templates.

Audio field templates (like [sound: audio.mp3]) correctly convert to the audio icon, but you cannot play the audio at the moment. Images have not been tested and are probably broken. Please feel free to contribute to fix any of these limitations.

Contributing

If you would like to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Make your changes and commit them with clear messages.
4. Push your changes to your fork.
5. Open a pull request with a description of your changes.

We welcome all contributions and appreciate your help in improving this project.