> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/code-sources/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.

> Documentation for Knapsack, the design system platform that unifies design tokens, components, and docs so teams design, build, and ship consistent products.

## Docs

- [Asset Sets](https://docs.knapsack.cloud/code-sources/asset-sets.md): Asset sets provide a method of managing theme or style variations for your patterns in Knapsack and in your production applications.
- [Angular](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-angular.md): Knapsack for Angular lets you develop and test components in isolation.
- [Handlebars](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-handlebars.md): Knapsack for Handlebars lets you develop and test components in isolation.
- [React](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-react.md): Knapsack for React lets you develop and test components in isolation.
- [Twig](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-twig.md): Knapsack for Twig lets you develop and test components in isolation.
- [Vue](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-vue.md): Knapsack for Vue lets you develop and test components in isolation.
- [Web Components](https://docs.knapsack.cloud/code-sources/asset-sets/frameworks-web-components.md): Knapsack for Web Components lets you develop and test components in isolation.
- [Advanced Prop Configurations](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations.md): Learn how to apply advanced prop configurations within JSON Schema.
- [Using Arrays of Objects](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-arrays-of-objects.md): Learn how to configure and utilize arrays of objects within your components.
- [Using Components as Props](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-components-as-props.md): Discover the power of using components as props to create more modular and reusable code.
- [Using Functions as Props](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-functions-as-props.md): Explore the benefits of passing functions as props to enhance the interactivity and behavior of your components.
- [Using Image Property Detection](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-image-property-detection.md): Automatically identify properties related to images and enable asset uploads
- [Using Multiple Prop Types](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-multiple-prop-types.md): Understand how to configure props that can accept multiple types, increasing the versatility of your components.
- [Using Objects as Props](https://docs.knapsack.cloud/code-sources/advanced-prop-configurations/using-objects-as-props.md): Master the technique of passing objects as props to encapsulate related data and functionality.