# ran

> ran is an open-source front-end ecosystem by chaxus: **ranui**, a Web Components UI
> library, and **ranuts**, a utility library — plus low-level web-infrastructure
> experiments (a JS parser, a JSX compiler, a WASM/2D rendering engine). This site
> documents ranui and ranuts.

ranui is built on native Custom Elements (`<r-*>` tags), so it works in any framework
or plain HTML. It ships first-class TypeScript types, light/dark theming via Geist-based
CSS variables, Shadow DOM encapsulation, SSR/SSG support, and PWA. ranuts is a broad,
tree-shakeable collection: DOM/BOM and string/object/number/colour helpers, debounce and
throttle, storage (guarded localStorage, IndexedDB), a Web Worker client, a postMessage
bridge, ZIP read/write, prefetching, i18n, scoped event management, microphone audio
recording and Web Speech API speech-to-text, a 2D rendering engine (Canvas/WebGL/WebGPU),
a virtual DOM, and Node server tooling.

## Docs

- [ranui — Web Components UI library](https://ran.chaxus.com/src/ranui/): button, input, select, checkbox, radio, card, tabs, modal, popover, dropdown, progress, message, icon, and more `<r-*>` elements, with theming, i18n, routing and SSR
- [ranuts — utility library](https://ran.chaxus.com/src/ranuts/): functional (debounce, throttle, memoize, compose), string/object/number/colour utils, storage and IndexedDB, Web Worker request/response on both ends, Service Worker caching and precache, text pagination, postMessage bridge, ZIP, i18n, audio recording, speech-to-text, a 2D rendering engine, virtual DOM, TOTP
- [Articles](https://ran.chaxus.com/src/article/doc_preview): front-end engineering notes — web document preview, video encryption, a 2D/WebGL/WebGPU rendering engine, sorting algorithms, functional programming, AI agents, linear algebra

## Entry points

Both packages are multi-entry so consumers import only what they use:

- `ranui` (all components), `ranui/<component>`, `ranui/builder`, `ranui/theme`, `ranui/i18n`, `ranui/ssr`
- `ranuts` (root barrel), `ranuts/utils`, `ranuts/node` (Node only), `ranuts/visual` (browser only), `ranuts/vnode`, `ranuts/i18n`, `ranuts/sw` (service worker only)

## Reference

- [Full documentation corpus for LLMs](https://ran.chaxus.com/llms-full.txt): every doc page concatenated as plain text
- [Sitemap — all pages](https://ran.chaxus.com/sitemap.xml)
- [GitHub repository](https://github.com/chaxus/ran)
- [ranui on npm](https://www.npmjs.com/package/ranui)
- [ranuts on npm](https://www.npmjs.com/package/ranuts)

Both npm packages ship AI-facing files inside the tarball: `CLAUDE.md` (orientation —
entry points, runtime constraints, conventions) and, for ranuts, `docs/API.md` (every
exported symbol with its signature and description). An assistant with the package
installed can read them from `node_modules` without fetching anything.

## Optional

- [简体中文文档 (Simplified Chinese docs)](https://ran.chaxus.com/cn/)