ran
Deutsch
Open Source · MIT-Lizenz

Designmethoden,KomponentenundWerkzeuge

Produkte mit Ran Design, ranui und ranuts entwickeln. Unabhängig nutzbar, mit Anleitungen für Entwickler und Agenten.

npm i ranui ranuts
Mit Agenten entwickelnAuf 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

Ran Design

Bibliotheksunabhängige Methoden für Layout, Interaktion, Bewegung und Prüfung anhand konkreter Ergebnisse.

Design erkunden
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.