Skip to content
オープンソース · MIT ライセンス
Web Components の UI ライブラリと型付きユーティリティ
ranui はフレームワークに依存しない r- 要素を 40 個、ranuts は tree-shaking 可能な型付きユーティリティを 90 以上そろえています。Vue でも React でも素の HTML でも、ビルド工程なしでそのまま使えます。
npm i ranui ranutsライブ
本物の ranui コンポーネントが、このページ上で動いています。
40コンポーネント
90+ユーティリティ
8言語
MITライセンス
ranui
フレームワーク非依存の Web Components ライブラリ。スタイル済みの r- 要素 40 個を Vue・React・素の HTML のどこにでも置けます。
コンポーネント一覧ranuts
文字列・オブジェクト・色・時間・ファイル・DOM を扱う型付きユーティリティが 90 以上。tree-shaking 対応、依存ゼロ。
ドキュメントを読む記事
レンダリングエンジン、関数型プログラミング、ソートアルゴリズム、Web プラットフォームについての長文。
読みはじめる特色ある機能
多くのライブラリが用意していないもの
ranuts から 5 つ、ranui から 5 つ。
ranutsユーティリティ
- Bridge
PostMessageBridgepostMessage 上の Promise ベース RPC。iframe・Worker・タブをまたぎ、構造化クローン転送とチャネル分離に対応します。 - Visual
ApplicationPixiJS 風のシーングラフ。WebGPU / WebGL / Canvas のレンダラーを差し替えられます。 - 仮想 DOM
h() · init()snabbdom 風の vDOM。hyperscript、patch、差し替え可能なモジュールとライフサイクルフック。 - TOTP
TOTPRFC-6238 のワンタイムパスワード。SHA-1 から SHA3-512 まで、暗号ライブラリへの依存はゼロ。 - MIME レジストリ
getMime()約 1000 件の MIME ⇄ 拡張子の双方向検索。
ranuiコンポーネント
- プレーヤー
<r-player>モジュール化されたコントローラーを核とする HLS アダプティブ配信の動画プレーヤー。 - カラーピッカー
<r-colorpicker>色相とアルファのスライダーを備えた HSV ピッカー。HEX / RGBA をリアルタイムに出力します。 - レーダーチャート
<r-radar>Canvas 描画のレーダーチャート。軸ごとのラベルとその個別スタイルに対応。 - 数式
<r-math>遅延読み込みの Temml で、属性ひとつから LaTeX をネイティブ MathML に描画します。 - スクラッチカード
<r-scratch>完了しきい値つきの、削って表示する Canvas インタラクション。
クイックスタート
インストールして使う
2 つのパッケージを入れ、要素を一度登録すれば、どこでも使えます。ビルド工程もフレームワークも必要ありません。
インストールと登録
$ npm i ranui ranuts // register the <r-*> elements once import 'ranui' import { debounce } from 'ranuts'
どこでも使う
<!-- Vue, React, or plain HTML --> <r-button type="primary">Save</r-button> <r-progress percent="66"></r-progress>
どこでも動く
標準準拠のカスタム要素なので、どのフレームワークでも、フレームワークなしでも動きます。
完全な型定義
TypeScript で書かれ、型宣言まで含めて配布しています。
インストール可能・オフライン対応
ドキュメント自体が PWA で、専用の Service Worker を持ちます。
8 言語
ranui と ranuts のリファレンスは 8 言語で維持されています。