Skip to content
开源 · MIT 协议
Web Components 组件库与 TypeScript 工具集
ranui 提供 28+ 个框架无关的 r- 元素，ranuts 收录 90+ 个可 Tree-shaking 的类型化工具函数 —— 在 Vue、React 或纯 HTML 中直接使用，无需构建步骤。
npm i ranui ranuts实时
真实的 ranui 组件，就运行在这个页面上。
28+组件
90+工具函数
2语言
MIT协议
ranui
框架无关的 Web Components 组件库。28+ 个开箱即用的 r- 元素，可放进 Vue、React 或纯 HTML 的任意技术栈。
查看组件ranuts
90+ 个带类型的工具函数，覆盖字符串、对象、颜色、时间、文件与 DOM。支持 Tree-shaking，零依赖。
阅读文档文章
一路记录的技术笔记与深度剖析 —— 渲染引擎、函数式编程、排序算法与 Web 平台。
开始阅读特色能力
不只是又一个工具库
一些在多数库里找不到的能力。
ranuts工具函数
- Bridge 通信桥
PostMessageBridge基于 postMessage 的 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>通过懒加载的 KaTeX，用一个属性渲染 LaTeX 公式。 - 刮刮卡
<r-scratch>可交互的 Canvas 刮开揭晓，带完成度阈值。
快速开始
几秒钟即可上手
安装两个包，注册一次元素，即可在任意地方使用 —— 无需构建步骤，也不依赖任何框架。
安装并注册
$ 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。
双语维护
每一页都同时维护英文与简体中文。