anki-renderer

Anki card template renderer compiled to WebAssembly

Live Demo

Edit the templates and fields below to see the rendered card in real-time.

Preview

Examples

Basic Card

Simple question and answer with field substitution.

Cloze Deletion

Fill-in-the-blank style cards with hidden text.

Hints

Clickable hint reveals hidden content.

Furigana (Japanese)

Ruby annotations for Japanese readings.

Custom Styling

Cards with custom CSS styling.

Filters

Text processing with filters like text: and type:.

API Reference

Installation

npm install anki-renderer

Basic Usage

import { renderCard, initWasm } from 'anki-renderer';

// Initialize WASM (optional - auto-initializes on first render)
await initWasm();

// Render a card
const result = await renderCard({
  front: "{{Front}}",
  back: "{{FrontSide}}<hr>{{Back}}",
  fields: { Front: "Question", Back: "Answer" },
});

console.log(result.question); // "Question"
console.log(result.answer);   // "Question<hr>Answer"

Cloze Deletions

const result = await renderCard({
  front: "{{cloze:Text}}",
  back: "{{cloze:Text}}",
  fields: { Text: "{{c1::Paris}} is the capital of {{c2::France}}" },
  cardOrdinal: 1,
});

// Card 1: "[...]" is visible, "France" is visible
// Card 2: "Paris" is visible, "[...]" is visible

Styled Cards

import { renderStyledCard, DEFAULT_ANKI_CSS } from 'anki-renderer';

const result = await renderStyledCard({
  front: "{{Front}}",
  back: "{{Back}}",
  fields: { Front: "Question", Back: "Answer" },
  style: {
    css: ".card { background: navy; color: white; }",
    includeDefaultStyles: true,
    nightMode: false,
  },
});

// result.styledQuestion includes <style> tag and .card wrapper

Web Component

<script type="module">
  import 'anki-renderer/component';
</script>

<anki-card-preview
  template-front="{{Word}}"
  template-back="{{Word}}<br>{{Definition}}"
  fields='{"Word": "hello", "Definition": "greeting"}'
  side="question"
  default-styles
  night-mode>
</anki-card-preview>

Available Filters

Filter Description Example
text Strip HTML tags {{text:Field}}
hint Clickable reveal {{hint:Extra}}
type Answer input field {{type:Answer}}
furigana Ruby annotations {{furigana:Reading}}
kanji Extract base text {{kanji:Reading}}
kana Extract readings {{kana:Reading}}
cloze Cloze deletions {{cloze:Text}}