ran
Deutsch
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 ansehenAuf GitHub mit Stern versehen
Livehtml
<r-button type="primary">Primär</r-button>
<r-button>Standard</r-button>
<r-button type="warning">Warnung</r-button>

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

<r-loading name="circle-line"></r-loading>
<r-checkbox checked>Abonnieren</r-checkbox>
PrimärStandardWarnung
Abonnieren
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.