Code Sources

Sync your code to automatically discover and import your components.
View as Markdown

Knapsack works by scanning your specified code locations and automatically discovering reusable components, making them instantly available in your design system. This is the primary way to get your code into Knapsack.

Why This Approach:

  • ⚡ Zero Manual Work - Knapsack finds and configures your components automatically
  • 🔄 Always Current - Your documentation stays in sync with code changes
  • 📚 Universal Compatibility - Works with any component library or framework
  • 🎯 Intelligent - Understands different export patterns and component structures
  • 🚀 Scale Effortlessly - Handle hundreds of components without individual setup

Getting Started

Configure Knapsack to discover your code by setting up renderers in your knapsack.config.js file. This tells Knapsack where to find your components and how to process them:

Angular
Handlebars
React
Twig
Vue
Web Components

Framework Support

RendererFile TypesDiscovery Method
Angular.component.tsAngular components
Handlebars.hbsHandlebars templates
React.tsx, .jsx, .ts, .jsNamed and default exports
Twig.twigTwig templates
Vue.vueVue single-file components
Web Components.js, .tsCustom element definitions

FAQ

Q: Does Knapsack work with TypeScript?

A: Yes! Knapsack has excellent TypeScript support and can discover type information for enhanced documentation.

Q: What happens when I update my components?

A: Knapsack automatically detects code changes and updates your design system in real-time.

Q: Can I control which components are discovered?

A: Absolutely! Use the filter function to precisely control which components are included.

Q: Does this work with monorepos?

A: Yes! Knapsack can discover components across multiple packages in your monorepo.

Q: What package managers are supported?

A: Knapsack works seamlessly with npm, yarn, and pnpm.