Homepage

Basalt

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

Images

Knapsack