Kiku

Appearance

How Things Work ​

Unlike most traditional note types, Kiku is entirely written in TypeScript using the JavaScript UI library SolidJS, which makes highly interactive UI possible.

It also uses SolidJS’s SSR/hydration features, making the initial page load instant. Components such as the header, definition, and others are lazy-loaded.

Kiku files ​

Kiku stores certain files in your Anki collection.media directory. All of these filenames are prefixed with _kiku.

json
[
  "_kiku_style.css",
  "_kiku.css",
  "_kiku_plugin.css",
  "_kiku_notes_0.json.gz",
  "_kiku_notes_1.json.gz",
  "_kiku_notes_2.json.gz",
  "_kiku_notes_3.json.gz",
  "_kiku_notes_4.json.gz",
  "_kiku_notes_5.json.gz",
  "_kiku_notes_6.json.gz",
  "_kiku_notes_7.json.gz",
  "_kiku_notes_8.json.gz",
  "_kiku_notes_9.json.gz",
  "_kiku_back.html",
  "_kiku_front.html",
  "_kiku_lazy.js",
  "_kiku_libs.js",
  "_kiku_plugin.js",
  "_kiku_shared.js",
  "_kiku_worker.js",
  "_kiku.js",
  "_kiku_config.json",
  "_kiku_db_main_manifest.json",
  "_kiku_notes_manifest.json",
  "_kiku_db_main.tar"
]

Some explanations about these files:

  • Your configuration is stored in the _kiku_config.json.
  • _kiku_notes_1.json.gz, _kiku_notes_2.json.gz, _kiku_notes_*, etc. are generated by the Kiku Note Manager for the Kanji Web feature. They store the same output as the notesInfo API from AnkiConnect for all notes with the modelName "Kiku" or "Lapis".
  • _kiku_db_main.tar and _kiku_db_main_manifest.json are the databases Kiku uses for the Kanji Web feature.
  • _kiku.js is the entry point of the JavaScript module. Some JavaScript modules such as _kiku_lazy.js, are lazy-loaded after the initial page render. _kiku_worker.js is used for multithreading JavaScript operations via Web Workers.
  • _kiku.css contains all styles for Kiku.
  • _kiku_front.html, _kiku_back.html, and _kiku_style.css are the templates used to update the Front Template, Back Template, and Styling of the note when saving in the settings.

Settings ​

Every setting change is applied immediately, and the changes are saved to sessionStorage. The settings stored in sessionStorage are cleared when you exit the review screen.

To make the settings persistent, AnkiConnect is required. When AnkiConnect is running, you can click the "Save" button on the Settings page. This will:

  • Save the settings to _kiku_config.json.
  • Update some settings stored in the Front Template, Back Template, and Styling of the "Kiku" note using _kiku_front.html, _kiku_back.html, and _kiku_style.css.

Default Config ​

ts
import type { KikuConfig } from "./config";

// oxfmt-ignore
export const defaultConfig: KikuConfig = {
  theme: "light",
  themeDark: "dark",
  systemFontPrimary: "'Inter', 'SF Pro Display', 'Liberation Sans', 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Noto Sans CJK JP', 'Noto Sans JP', 'Meiryo', 'HanaMinA', 'HanaMinB', sans-serif",
  systemFontSecondary: "'Hiragino Mincho ProN', 'Noto Serif CJK JP', 'Noto Serif JP', 'Yu Mincho', 'HanaMinA', 'HanaMinB', serif",
  blurNsfw: true,
  muteNsfw: false,
  pictureOnFront: false,
  showTheme: true,
  showStartupTime: true,
  ankiConnectAddress: "http://127.0.0.1:8765",
  ankiDroidEnableIntegration: true,
  ankiDroidReverseSwipeDirection: false,
  swapSentenceAndDefinitionOnMobile: true,
  preferAnkiConnect: false,
  modHidden: false,
  modHiddenDuration: 2000,
  modVertical: false,
  definitionStyle: "normal",
  definitionPictureFromGlossary: false,
  fontSizeBaseExpression: "5xl",
  fontSizeBasePitch: "xl",
  fontSizeBaseSentence: "2xl",
  fontSizeBaseMiscInfo: "sm",
  fontSizeBaseHint: "lg",
  fontSizeSmExpression: "6xl",
  fontSizeSmPitch: "2xl",
  fontSizeSmSentence: "4xl",
  fontSizeSmMiscInfo: "sm",
  fontSizeSmHint: "2xl",
  layoutMaxWidth: "4xl",
  keybindDefinitionPrev: "ArrowLeft",
  keybindDefinitionNext: "ArrowRight",
  keybindFieldGroupPrev: "h",
  keybindFieldGroupNext: "l",
};

Settings Stored in the Front/Back/Styling Templates ​

Why are some settings stored in the Front/Back/Styling templates?

CSS loads instantly, but JavaScript runs only after the initial render. If we relied only on the JSON settings, the card would briefly show the wrong theme before JavaScript applies the correct one (a FOUC). Storing key settings in the templates avoids this flicker.

js
[
  "theme",
  "themeDark",
  "systemFontPrimary",
  "systemFontSecondary",
  "blurNsfw",
  "pictureOnFront",
  "modVertical",
  "fontSizeBaseExpression",
  "fontSizeBasePitch",
  "fontSizeBaseSentence",
  "fontSizeBaseMiscInfo",
  "fontSizeBaseHint",
  "fontSizeSmExpression",
  "fontSizeSmPitch",
  "fontSizeSmSentence",
  "fontSizeSmMiscInfo",
  "fontSizeSmHint",
];