Toolbox Web

A monorepo for framework-agnostic web component libraries built with pure TypeScript. Components work natively in vanilla JS, React, Vue, Angular, Svelte, and any other framework.

Libraries

Quick Start

# Install dependencies
bun install

# Start docs site (development)
bun start

# Build all libraries
bun run build

# Run all tests
bun run test

Development

Project Structure

libs/
  grid/           # @toolbox-web/grid - Data grid component
  grid-angular/   # @toolbox-web/grid-angular - Angular adapter
  grid-react/     # @toolbox-web/grid-react - React adapter
  grid-vue/       # @toolbox-web/grid-vue - Vue 3 adapter
  themes/         # Shared theme system
demos/
  employee-management/   # Full-featured demo applications
    shared/              # Shared types and data generators
    vanilla/             # Pure TypeScript/Vite demo
    angular/             # Angular 21 demo
    react/               # React 19 demo
    vue/                 # Vue 3 demo
apps/
  docs/           # Astro/Starlight documentation site

Commands

# Development
bun start                    # Start docs site
bun nx build <lib>           # Build a library
bun nx test <lib>            # Run tests for a library

# CI
bun run build                # Build all libraries
bun run test                 # Test all libraries

AI/LLM Integration

This project publishes llms.txt and llms-full.txt files following the llms.txt specification to help AI assistants understand and work with the codebase:

• llms.txt - Concise overview with links to documentation
• llms-full.txt - Comprehensive implementation guide with code examples, plugin configuration, and framework recipes

Both are generated from the documentation site on every build, so they always reflect the current docs.

Architecture

Design Philosophy

• Zero framework lock-in: Pure web components using standard APIs
• Light DOM + CSS Nesting: Render directly to element with scoped styles
• Plugin system: Extend functionality without bloating core
• Virtualization: Handle large datasets efficiently
• Theming: CSS custom properties for easy customization

Adding a New Library

1. Create library: bun nx g @nx/js:lib libs/<name> --publishable --importPath=@toolbox/<name>
2. Add Vite config following libs/grid/vite.config.ts pattern
3. Add path mappings to tsconfig.base.json
4. Create stories in apps/docs/src/components/demos/

Tech Stack

• Bun - Package manager and runtime
• Vite - Build tool
• Vitest - Test runner
• Astro/Starlight - Documentation site
• Nx - Monorepo orchestration
• TypeScript - Type safety

Support

Built and maintained by a solo developer. Sponsorship keeps this project alive:

License

MIT