Toolbox Web

June 6, 2026 · View on GitHub

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

Package	Description	Docs
`@toolbox-web/grid`	High-performance data grid with virtualization, plugins, and theming	README
`@toolbox-web/grid-angular`	Angular adapter with directives for template-driven renderers/editors	README
`@toolbox-web/grid-react`	React adapter	README
`@toolbox-web/grid-vue`	Vue 3 adapter	README

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

Create library: bun nx g @nx/js:lib libs/<name> --publishable --importPath=@toolbox/<name>
Add Vite config following libs/grid/vite.config.ts pattern
Add path mappings to tsconfig.base.json
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