A framework-agnostic Web Components UI library built on native custom elements (ranui) and a tree-shakeable TypeScript utility library (ranuts) — plus the tooling and bilingual docs around them.
Features • Packages • Quick Start • Documentation • Contributing
English · 中文
- 🎨 UI Libraries: web components
- 🛠️ Utility Libraries: TypeScript utilities
- 🤖 Machine Learning: Basic ML tools and experiments
- 📱 Web Applications: IM chat app (prototype)
- 🔧 Development Tools: Build tools and debug utilities
- 🌐 Web3: Smart contract experiments
- 🎯 Visual Tools: Data visualization experiments
This monorepo contains various experimental packages:
| Package | Version | Downloads | Description |
|---|---|---|---|
| ranui |  |
 |
web component library |
| ranuts |  |
 |
Utility library |
| Package | Description |
|---|---|
| im | Chat application prototype |
| visual | Data visualization experiments |
| ranite | Development tooling experiments |
| debug | Debug utilities |
| image-process | Image processing experiments |
| cpro | C/C++ learning & experiments |
| rust | Rust learning & experiments |
# Clone the repository
git clone https://github.com/chaxus/ran.git
cd ran
# Install dependencies
pnpm install
# Build all packages
pnpm build# Install ranui (web components)
npm install ranui
# Install utilities
npm install ranuts# Start development server
pnpm dev
# Run tests
pnpm test
# Build specific package
pnpm --filter ranui build- 📖 Blog & Articles: Design Patterns & More
- 🎨 RanUI Documentation: UI Library Guide
- 🛠️ RanUTS Documentation: Utility Library Guide
- 📝 Project Documentation: docs
This repo ships a Claude Code plugin marketplace so AI assistants can read and use the libraries without spelunking the source. Add the marketplace, then install whichever library you use:
/plugin marketplace add chaxus/ran
/plugin install ranui@ran # ranui — web components
/plugin install ranuts@ran # ranuts — utilitiesEach skill covers the import map, an inventory, usage examples, and conventions, and points to the API reference shipped in that package. See the per-library sections in ranui and ranuts.
This is a technology exploration and learning project in early development. Most packages are in alpha stage or experimental phase.
Key points:
- 🚧 Early Development: Most features are still being developed
- 🧪 Experimental: APIs may change frequently
- 📚 Learning Focus: Primarily for learning and experimentation
We welcome contributions from learners and developers! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style
- Add tests for new features when possible
- Update documentation as needed
- Be patient with experimental features
I believe in the power of open source to accelerate learning and innovation. Throughout my development journey, I've been greatly influenced by countless open-source projects. By open-sourcing this experimental code, I hope to:
- Share learning experiences with the community
- Enable others to learn from and experiment with this code
- Foster collaboration and knowledge sharing
- Create a platform for continuous learning and improvement
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by the Ran community
If this project helps you learn, please give it a ⭐️