Rendering

RenderedCard

The output of the content pipeline — HTML strings for front and back.

interface RenderedCard {
    front: string;  // Rendered HTML for card front
    back: string;   // Rendered HTML for card back
}

RenderContext

Context passed to content transforms:

interface RenderContext {
    fields: Record<string, string>;  // Note field values by name
    cardState: CardState;            // Current card state
}

ContentTransform

A function that transforms HTML content. Transforms are applied sequentially in the pipeline.

type ContentTransform = (html: string, context: RenderContext) => string;

Example custom transform:

const emojiTransform: ContentTransform = (html) => {
    return html
        .replace(/:check:/g, '\u2705')
        .replace(/:cross:/g, '\u274C');
};

ContentPipeline

The complete rendering pipeline interface:

interface ContentPipeline {
    transforms: ContentTransform[];
    render(note: NoteBase, template: TemplateDef): RenderedCard;
}

The render method:

Extracts field values from the note
Interpolates the front template with {{FieldName}} replacements
Applies all transforms to the front HTML
Interpolates the back template (with {{FrontSide}} available)
Applies all transforms to the back HTML
Returns { front, back }

SRSState

Internal state used by the SRS algorithm:

interface SRSState {
    state: 'new' | 'learning' | 'review' | 'relearning';
    easeFactor: number;    // ≥ 1.3
    interval: number;      // Days
    dueDate: Date;
    currentStep: number;   // Index into learning/relearning steps
    lapseCount: number;
    reviewCount: number;
}

SRSAlgorithm

Interface for implementing custom spaced repetition algorithms:

interface SRSAlgorithm {
    calculateNextState(
        card: SRSState,
        grade: Grade,
        config: DeckConfig,
        now?: Date,
    ): SRSState;

    getInitialState(config: DeckConfig, now?: Date): SRSState;
}