https://github.com/oysteinamundsen/toolbox
A no-dependency component library for the web
https://github.com/oysteinamundsen/toolbox
data-grid datagrid framework-agnostic no-dependencies table typescript vanilla-js virtualization web-components
Last synced: 1 day ago
JSON representation
A no-dependency component library for the web
- Host: GitHub
- URL: https://github.com/oysteinamundsen/toolbox
- Owner: OysteinAmundsen
- License: mit
- Created: 2025-12-22T11:29:12.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-02-15T14:46:17.000Z (13 days ago)
- Last Synced: 2026-02-15T21:35:13.187Z (13 days ago)
- Topics: data-grid, datagrid, framework-agnostic, no-dependencies, table, typescript, vanilla-js, virtualization, web-components
- Language: TypeScript
- Size: 5.32 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Toolbox Web
[](https://github.com/OysteinAmundsen/toolbox/actions/workflows/ci.yml)
[](LICENSE)
[](https://github.com/sponsors/OysteinAmundsen)
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`](https://www.npmjs.com/package/@toolbox-web/grid) | High-performance data grid with virtualization, plugins, and theming | [README](libs/grid/README.md) |
| [`@toolbox-web/grid-angular`](https://www.npmjs.com/package/@toolbox-web/grid-angular) | Angular adapter with directives for template-driven renderers/editors | [README](libs/grid-angular/README.md) |
| [`@toolbox-web/grid-react`](https://www.npmjs.com/package/@toolbox-web/grid-react) | React adapter | [README](libs/grid-react/README.md) |
| [`@toolbox-web/grid-vue`](https://www.npmjs.com/package/@toolbox-web/grid-vue) | Vue 3 adapter | [README](libs/grid-vue/README.md) |
## Quick Start
```bash
# Install dependencies
bun install
# Start Storybook (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/ # Storybook documentation site
```
### Commands
```bash
# Development
bun start # Start Storybook
bun nx build # Build a library
bun nx test # Run tests for a library
# CI
bun run build # Build all libraries
bun run test # Test all libraries
```
## AI/LLM Integration
This project includes [`llms.txt`](llms.txt) and [`llms-full.txt`](llms-full.txt) files following the [llms.txt specification](https://llmstxt.org/) 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 migration patterns from AG Grid, TanStack Table, and ngx-datatable
## 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/ --publishable --importPath=@toolbox/`
2. Add Vite config following `libs/grid/vite.config.ts` pattern
3. Add path mappings to `tsconfig.base.json`
4. Create stories in `libs//stories/`
## Tech Stack
- **Bun** - Package manager and runtime
- **Vite** - Build tool
- **Vitest** - Test runner
- **Storybook** - Component development
- **Nx** - Monorepo orchestration
- **TypeScript** - Type safety
## Support
Built and maintained by a solo developer. Sponsorship keeps this project alive:
[](https://github.com/sponsors/OysteinAmundsen)
[](https://www.patreon.com/c/OysteinAmundsen)
## License
MIT