Open Source · MIT-Lizenz

EineWeb-Components-UI-BibliothekundtypisierteUtilities

ranui liefert 40 frameworkunabhängige r--Elemente, ranuts über 90 tree-shaking-fähige TypeScript-Helfer. Nutzbar in Vue, in React oder in reinem HTML — ganz ohne Build-Schritt.

npm i ranui ranuts

Komponenten ansehen Auf GitHub mit Stern versehen

Live

Echte ranui-Komponenten, die direkt auf dieser Seite laufen.

40Komponenten

90+Utilities

8Sprachen

MITLizenz

ranui

Eine frameworkunabhängige Web-Components-Bibliothek. 40 fertig gestaltete r--Elemente für jeden Stack: Vue, React oder reines HTML.

Komponenten durchsehen

ranuts

Über 90 typisierte Helfer für Zeichenketten, Objekte, Farben, Zeit, Dateien und das DOM. Tree-shaking-fähig, ohne Abhängigkeiten.

Dokumentation lesen

Artikel

Längere Texte über Rendering-Engines, funktionale Programmierung, Sortieralgorithmen und die Web-Plattform.

Zu lesen beginnen

Fähigkeiten

Was die meisten Bibliotheken weglassen

Fünf in ranuts, fünf in ranui.

ranutsUtilities

Bridge PostMessageBridgePromise-basiertes RPC über postMessage — über iframes, Worker und Tabs hinweg, mit Structured-Clone-Transport und getrennten Kanälen.
Visual ApplicationEin Szenengraph im Stil von PixiJS, mit austauschbarem Renderer-Backend: WebGPU, WebGL oder Canvas.
Virtuelles DOM h() · init()Ein vDOM im Stil von snabbdom: Hyperscript, patch, austauschbare Module und Lifecycle-Hooks.
TOTP TOTPEinmalpasswörter nach RFC-6238, von SHA-1 bis SHA3-512, ohne jede Krypto-Abhängigkeit.
MIME-Registry getMime()Eine bidirektionale Zuordnung MIME ⇄ Dateiendung mit rund 1000 Einträgen.

ranuiKomponenten

Player <r-player>Ein Videoplayer für adaptives HLS-Streaming mit modularem Controller-Kern.
Farbwähler <r-colorpicker>Ein vollständiger HSV-Wähler mit Farbton- und Alpha-Reglern und HEX-/RGBA-Ausgabe in Echtzeit.
Netzdiagramm <r-radar>Ein auf Canvas gezeichnetes Netzdiagramm mit Beschriftung und Beschriftungsstil je Achse.
Formeln <r-math>Rendert LaTeX über ein einziges Attribut zu nativem MathML — mit nachgeladenem Temml.
Rubbelkarte <r-scratch>Interaktives Freirubbeln auf Canvas, mit Schwelle für „fertig“.

Schnellstart

Installieren und verwenden

Beide Pakete installieren, die Elemente einmal registrieren, überall verwenden. Kein Build-Schritt, kein Framework nötig.

Installieren & registrieren

$ npm i ranui ranuts

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

Überall verwenden

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

Läuft überall

Standardbasierte Custom Elements laufen in jedem Framework — oder ganz ohne.

Vollständig typisiert

In TypeScript geschrieben und samt Typdeklarationen ausgeliefert.

Installierbar & offline

Die Dokumentation ist eine PWA mit eigenem Service Worker.

Acht Sprachen

Die Referenz zu ranui und ranuts wird in acht Sprachen gepflegt.