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 view, 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_db_similar_kanji_from_keisei.json.gz",
  "_kiku_db_similar_kanji_lookup.json.gz",
  "_kiku_db_similar_kanji_manual.json.gz",
  "_kiku_db_similar_kanji_old_script.json.gz",
  "_kiku_db_similar_kanji_stroke_edit_dist.json.gz",
  "_kiku_db_similar_kanji_wk_niai_noto.json.gz",
  "_kiku_db_similar_kanji_yl_radical.json.gz",
  "_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_notes_manifest.json",
  "_kiku_font_hina-mincho.woff2",
  "_kiku_font_ibm-plex-sans-jp.woff2",
  "_kiku_font_klee-one.woff2"
]

Some explanations about these files:

  • Your configuration is stored in the _kiku_config.json file.
  • _kiku_notes_1.json.gz, _kiku_notes_2.json.gz, _kiku_notes_*, etc. are generated by the Kiku Note Manager for the Kanji View feature. They store the same output as the notesInfo API from AnkiConnect for all notes with the modelName "Kiku" or "Lapis".
  • _kiku_db_similar_kanji_*.json.gz are the databases Kiku uses for the similar-kanji feature, provided by the Wanikani Userscript.
  • Some JavaScript modules (_kiku*.js), 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.
  • _kiku_font_*.woff2 are the custom fonts included by default.

Settings ​

Every settings 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 the Front Template, Back Template, and Styling of the "Kiku" note using _kiku_front.html, _kiku_back.html, and _kiku_style.css.
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 or font before JavaScript applies the correct ones (a FOUC). Storing key settings in the templates avoids this flicker.