ranui / ranutsOpen source · MIT Licensed

Native Web Components. TypeScript utilities.

40 framework-agnostic components. 90+ typed utilities. Use them in Vue, React, or plain HTML; import only what you need.

Explore Components Read the docs

Install the packages

npm i ranui ranuts

Try the components

Live

Try the controls, then copy the HTML.

Buttons

Primary

Default

Warning

Disabled

Progress

Progress66%

Selection

Selected

View codeHTML

<r-button type="primary">Primary</r-button>
<r-button>Default</r-button>
<r-button type="warning">Warning</r-button>

<r-progress percent="66"></r-progress>

<r-checkbox checked>Subscribe</r-checkbox>

40Components

90+Utilities

8Languages

MITLicensed

ranui

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

Browse components

ranuts

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

Read the docs

Articles

Longer write-ups on rendering engines, functional programming, sorting algorithms and the web platform.

Start reading

Install and use

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

Install & register

import 'ranui/style'

// 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>

Explore the libraries

Five in ranuts, five in ranui.

ranutsutilities

Bridge PostMessageBridgePromise-based RPC over postMessage across iframes, workers and tabs, with structured-clone transport and 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 chart with per-axis labels and per-axis label styling.
Math <r-math>Renders LaTeX to native MathML with lazily-loaded Temml, from a single attribute.
Scratch card <r-scratch>An interactive canvas scratch-to-reveal with a completion threshold.

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 are a PWA, with their own service worker.

Eight languages

The ranui and ranuts reference is maintained in eight languages.