Knapsack - Design System Management Tool
Knapskack is an open source tool for managing, documenting, and developing component libraries and design systems. It includes a single-page React app GUI, Express/GraphQL backend, and command line tools. I played a central role both the planning and development. We are currently using this to support a design system rebuild at a major health care provider (MSK).
Deliverables
- live pattern rendering, including support for multiple templating languages (both PHP and Javascript based)
- dynamically generated documentation including prop tables, schema variations, and code samples
- GUI interface for adding documentation and editing site settings
- flexible organization of patterns, components, design tokens and documentation
Tech
- React
- Typescript
- JSON Schema
- GraphQL
- Express
- Node
- PHP
- Twig
- Web Components
- Theo
- Style Dictionary