Open source · MIT Licensed

AWebComponentsUIlibrary&typedutilitybelt

ranui ships 28+ framework-agnostic r- elements; ranuts packs 90+ tree-shakeable TypeScript helpers. Use them in Vue, React, or plain HTML — no build step required.

npm i ranui ranuts

Explore Components Star on GitHub

Live

Real ranui components, running right on this page.

28+Components

90+Utilities

2Languages

MITLicensed

ranui

A framework-agnostic Web Components library. Drop 28+ styled r- elements into any stack — Vue, React, or plain HTML.

Browse components

ranuts

A utility belt of 90+ typed helpers for strings, objects, color, time, files and the DOM. Tree-shakeable, zero-dependency.

Read the docs

Articles

Field notes and deep dives — rendering engines, functional programming, sorting algorithms and the web platform, written along the way.

Start reading

Capabilities

Not just another toolkit

A handful of things you won't find in most libraries.

ranutsutilities

Bridge PostMessageBridgePromise-based RPC over postMessage across iframes, workers & tabs — structured-clone transport, channel isolation.
Visual ApplicationA PixiJS-style scene graph with a pluggable WebGPU / WebGL / Canvas renderer backend.
Virtual DOM h() · init()A snabbdom-style vDOM — hyperscript, patch, pluggable modules and lifecycle hooks.
TOTP TOTPRFC-6238 one-time passwords, SHA-1 through SHA3-512, with zero crypto dependencies.
MIME registry getMime()A ~1000-entry bidirectional MIME ⇄ file-extension lookup.

ranuicomponents

Player <r-player>An HLS adaptive-streaming video player with a modular controller core.
Color picker <r-colorpicker>A full HSV picker with hue + alpha sliders and live HEX / RGBA output.
Radar chart <r-radar>A canvas-drawn radar / ability chart — real data-viz, not a generic widget.
Math <r-math>Renders LaTeX via lazily-loaded KaTeX from a single attribute.
Scratch card <r-scratch>An interactive canvas scratch-to-reveal with a completion threshold.

Quick start

Get started in seconds

Install both packages, register the elements once, and use them anywhere — no build step or framework required.

Install & register

$ npm i ranui ranuts

// register the <r-*> elements once
import 'ranui'
import { debounce } from 'ranuts'

Use anywhere

<!-- Vue, React, or plain HTML -->
<r-button type="primary">Save</r-button>
<r-progress percent="66"></r-progress>

Works everywhere

Standards-based custom elements run in any framework, or none at all.

Fully typed

Written in TypeScript, shipped with declarations end to end.

Installable & offline

The docs themselves are a PWA with a hand-rolled service worker.

Bilingual

Every page maintained in English and 简体中文.