Designmethoden, Komponenten und Werkzeuge

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

Beispiel

Teammitglied einladen

Leser

Bearbeiter

Admin

Fehlgeschlagene Anfrage simulieren

Einladung senden

Abschnitte des Leitfadens, denen dieses Beispiel folgtInteraction Words

Echte ranui-Komponenten. Lass die E-Mail leer oder simuliere einen Fehler, um jeden Zustand zu sehen.

Hochladen

quarterly-report.pdf64%

Abbrechen

Agent-Lauf

Laden

Glas

<r-glass>

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

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

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

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“.

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.

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

npm i ranui ranuts

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>