Create beautiful Anki cards with ease

Neeraj Krishna

Follow

5 min read

·

8 hours ago

Listen

Share

Introduction

I love Anki. It has revolutionized how I learn and remember information. However, I’ve always found creating cards with Anki’s built-in editor to be a bit of a pain. Here are a few reasons why:

1. Anki’s editor primarily supports basic formatting like bold, italic, and underline. Features I frequently need, like code blocks and inline code, aren’t natively supported.
2. Anki often inserts &nbsp characters, which can unintentionally mess up card layouts.
3. Lack of WYSYWG: With Anki’s default editor, you don’t truly know how your card will look until you hit “Preview.”
4. Anki’s Math Editor appears as a small popup, making it cumbersome to input and preview larger or complex equations.

These are common frustrations. Over the years, many alternative flashcard applications have emerged, often because Anki, while incredibly powerful, isn’t always perceived as the most intuitive or aesthetically pleasing for card creation. Yet, I remain a dedicated Anki user. Its true strength lies in its unparalleled customizability, which means all the problems above can be fixed.

ankieditor.com is my attempt to address these issues and give back to the amazing Anki community.

Simply put, ankieditor.com is a text interface for Anki designed to replace its built-in editor, making card creation a more powerful and pleasant experience.

Key Features

Ease of Use

Getting started with ankieditor.com is straightforward. After a simple, one-time configuration change (which we’ll detail in the “Setting Up” section), you can head to the website and begin crafting cards immediately. You don’t need to import any cards or create new decks. ankieditor.com seamlessly integrates with your current Anki decks and note types. Just set it up with the provided CSS (again, more on this soon), and you’re ready to go.

Extensible Rich Text Editor with a Beautiful UI

ankieditor.com supports a much wider array of formatting options than Anki’s default editor, including code blocks and inline code.

Furthermore, ankieditor.com is built using Lexical, an open-source rich text editor framework developed by Meta. This powerful foundation means that many plugins developed for Lexical can be integrated into ankieditor.com with minimal adjustments. Check out the Lexical Playground to explore officially supported plugins like tables, Twitter embeds, and more — all of which could be extended by ankieditor.com’s.

Inspired by medium.com, the design and feel of ankieditor.com are minimal and elegant.

Open Source

ankieditor.com is open source. If you feel the need to tweak its design, modify its behavior, or add features specific to your workflow, you can simply clone the repository and start making changes.

Setting up

Step 1: Install AnkiConnect

Begin by installing the AnkiConnect add-on for Anki. You can find detailed installation instructions on this page.

Step 2: Configure AnkiConnect

To allow ankieditor.com to connect to your Anki collection, you’ll need to modify the AnkiConnect configuration.

1. In Anki, navigate to Tools > Add-ons.
2. Select AnkiConnect from the list of add-ons.
3. Click on Config.
4. In the configuration settings, add "https://ankieditor.com" to the "webCorsOriginList". It should look similar to this:

{
    "apiKey": null,
    "apiLogPath": null,
    "ignoreOriginList": [],
    "webBindAddress": "127.0.0.1",
    "webBindPort": 8765,
    "webCorsOriginList": [
        "https://ankieditor.com"
    ]
}

With these changes, you’re ready to use ankieditor.com! Simply visit the website and start adding cards.

Step 3: Apply Custom Styling

To ensure the design from ankieditor.com is reflected when reviewing cards in Anki, you’ll need to update your CSS and add custom fonts.

Steps for adding custom fonts:

1. Download all required fonts from here.
2. Locate your Anki collection.media folder. Please refer to the official Anki documentation to find the specific location of this folder on your operating system.
3. Important: Before copying the font files, you must add an underscore (_) prefix to each font filename (e.g., _MyCustomFont.ttf). This prefix prevents Anki from automatically deleting these files during media checks.
4. Copy the renamed font files directly into the root of your collection.media folder (not into any subfolders).

- collection.media
-- _FiraCode-Light.ttf
-- _FiraCode-Medium.ttf
-- _FiraCode-SemiBold.ttf
-- _Geist-Medium.ttf
-- _Geist-Regular.ttf
-- _Geist-SemiBold.ttf
-- Merriweather-Black.ttf
-- Merriweather-BlackItalic.ttf
-- Merriweather-Bold.ttf
-- Merriweather-BoldItalic.ttf
-- Merriweather-Light.ttf
-- Merriweather-LightItalic.ttf
-- Merriweather-Regular.ttf
-- MerriweatherSans-Bold.ttf
-- MerriweatherSans-BoldItalic.ttf
-- PlayfairDisplay-SemiBold.ttf

The next step is to add the CSS. Copy all the content from the ankieditor-styles.css file, which you can find here. Then, paste this copied CSS into the styling section of your Anki card templates.

With the CSS added, your cards will now reflect the ankieditor.com design.

Functionality and Limitations

ankieditor.com is specifically designed for adding and updating Anki notes.

You can only view notes within ankieditor.com that were originally added or subsequently managed by it. When you add a note using ankieditor.com, it automatically assigns a tag: ankieditor. Only notes possessing this specific tag will be visible and editable within the ankieditor.com interface. Therefore, please ensure this tag remains associated with notes you wish to manage through the editor.

You cannot create new decks, tags, or note types directly within ankieditor.com. These must be created in the Anki desktop or mobile application first, and they will then be reflected in ankieditor.com.

Currently, ankieditor.com supports the basic note type. Support for other note types, such as Cloze deletion and Image Occlusion, is planned for future updates.

Examples

In this section, we give a few examples of the cards created with ankieditor.com

This is how the cards would look in a mobile

Conclusion

This is an initial beta release of ankieditor.com. If you encounter any bugs or issues, please raise an issue on the GitHub repository. I hope you enjoy creating cards with ankieditor.com!

If you like the project, please star it on GitHub. Give me a follow for more such projects.