LRU cache

No. 05 · SVG · Bookcase

Click a bookA–J

A low bookcase. Four books stand on top between bookends, most recently used at the left; a miss sends the right-hand book back to its slot below.

Prompt

/anatomy explain how an LRU cache evicts entries, interactive

npm install anatomy-figures

page.tsx

import { LruCache } from "anatomy-figures";

<LruCache theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import LruCache from "anatomy-figures/lru-cache";

Five themes (dark, light, paper, blueprint, sepia), or your own colours through tokens. Every token.

page.tsx

<LruCache
  theme="light"
  tokens={{
    "--anatomy-card": "#ffffff",
    "--anatomy-lit": "#e5484d",
  }}
/>

index.html

import { define } from "anatomy-figures/element/lru-cache";

define();

<anatomy-lru-cache theme="light"></anatomy-lru-cache>