> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Code Sources

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](/code-sources/asset-sets/frameworks-angular)

#### [Handlebars](/code-sources/asset-sets/frameworks-handlebars)

#### [React](/code-sources/asset-sets/frameworks-react)

#### [Twig](/code-sources/asset-sets/frameworks-twig)

#### [Vue](/code-sources/asset-sets/frameworks-vue)

#### [Web Components](/code-sources/asset-sets/frameworks-web-components)

### Framework Support

| Renderer       | File Types                   | Discovery Method           |
| -------------- | ---------------------------- | -------------------------- |
| Angular        | `.component.ts`              | Angular components         |
| Handlebars     | `.hbs`                       | Handlebars templates       |
| React          | `.tsx`, `.jsx`, `.ts`, `.js` | Named and default exports  |
| Twig           | `.twig`                      | Twig templates             |
| Vue            | `.vue`                       | Vue single-file components |
| Web Components | `.js`, `.ts`                 | Custom 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.