ran

UI components and TypeScript tools for web applications.

Documentation · CI

English · 中文 · 日本語 · Español · Português · 한국어 · Deutsch · فارسی

ran is a collection of libraries for building web interfaces. Use ready-made HTML components for forms, dashboards and content pages, reuse browser and data-processing helpers, or build reactive DOM views directly in TypeScript.

Each package can be installed on its own. The documentation site and IM demo show the libraries working together in complete applications.

Choose a package

Package	What you can build
ranui@0.5.0	Interfaces made from custom elements: inputs, selects, dialogs, tables, Markdown and media players. Includes themes and server-rendering helpers.
ranuts@0.5.0	Browser and data workflows: color and binary conversions, storage helpers, SSE parsing and streamed-response state.
@alixex/ranview@0.2.0	DOM views composed with chainable builders and reactive signals; static HTML snapshots for server rendering.

Try ranui

Install it in a browser application that uses an ESM-compatible bundler:

npm install ranui@0.5.0

Add this to the application's JavaScript entry. It creates a button that responds to a click:

import 'ranui/button';
import 'ranui/style';

const button = document.createElement('r-button');
button.setAttribute('type', 'primary');
button.textContent = 'Save';
button.addEventListener('click', () => {
  button.textContent = 'Saved';
});
document.body.append(button);

Components use custom elements and standard browser events, so no React or Vue runtime is required. Import other components through their own entries, such as ranui/input. See the component examples for markup, events and customization, or a standalone script example for use without a bundler.

Use with an agent

The ranui skill guides UI implementation, visual review and browser acceptance. It reads the host's installed ranui references on demand; it does not install the library or add tools, hooks or external services.

Claude Code plugin — add this repository's marketplace, then install ranui:

claude plugin marketplace add chaxus/ran
claude plugin install ranui@ran

Invoke /ranui:ranui in a new session. The same marketplace also offers ranuts for utility work.

Codex skill — after cloning this repository, copy plugins/ranui/skills/ranui/ into your host project's .agents/skills/ranui/. Start a new task and invoke $ranui. This uses the same skill body; the .claude-plugin manifest is the Claude installation route. See Codex skill discovery.

Example task: “Use ranui to polish this settings pane: keep related text together, align control labels, and verify actual screenshots in light/dark at narrow/wide widths.” The UI task lookup maps these requests to canonical rules and an evidence brief. Source contributors start with AGENTS.md.

Work on the repository

Use Node 24+ and pnpm 11.6.0.

pnpm install --frozen-lockfile
pnpm build
pnpm test
pnpm -F docs dev

Package directories contain their own guides and examples. See repository guidelines before contributing, and release instructions when preparing packages.

License

MIT