Knapsack Code Sources Instantly Unlocks Component Access for Your Whole Team

We’re excited to share that Knapsack has taken a big step toward removing one of the most frustrating roadblocks in design system use—the lag between when components are built and when the team can actually use them. 

This upgrade to Knapsack Code Sources mirrors our workflow for Design Sources by providing a streamlined way to connect your code components to Knapsack. Just like Design Sources automatically ingests and centralizes design assets, Code Sources can now automatically ingest and centralize your code components for instant team access.

There’s no need for each team member to have a local development setup, and no more waiting on developer handoffs to be able to use code components in your docs or prototypes.

How It Works

Code Sources automatically scans configured code locations, discovers reusable components, and makes them instantly available in Knapsack’s “Add Template” dropdown for everyone on your team.

Have an engineer add a few lines of code to your knapsack.config.js
Now everyone on your team can instantly use these components in documentation and prototypes.

In the past, this required a local setup and developer support. 

Now, with just 5–10 minutes of one-time configuration by an engineer, components are automatically available going forward.

Benefits by Persona

Designer

Product designers and design system teams can start working with components the moment they’re available in Knapsack.

  • Quickly and easily create documentation directly in Knapsack
  • Work independently without waiting for engineer handoffs
  • Use the most recent components in prototyping

Engineer

Engineers configure once and then let the system handle the rest.

  • Simple 5–10 minute, one-time setup in knapsack.config.js
  • No ongoing maintenance or demo requests
  • Works seamlessly with existing development workflows

Product Teams

Product managers and cross-functional partners gain faster access to the system.

  • Democratizes access to components across the entire team
  • Reduces back-and-forth between technical and non-technical roles
  • Enables faster iteration and speed to market

Leadership

Leaders see immediate impact across productivity and collaboration.

  • One configuration change unlocks team-wide autonomy
  • No additional licensing or costs required
  • Clear ROI through reduced friction and increased velocity

Getting Started

Code Sources is available today for all Knapsack customers using v4.84.0+, and works with any JavaScript or TypeScript components, custom or third-party.

Have an engineer do a one-time configuration of your component paths, locally. Publish your sources, and components will begin appearing automatically in Knapsack for your entire team.

You can find step-by-step instructions in our Getting Started guide and full documentation in our changelog.

Want to see how Knapsack makes your whole team faster, more consistent, and more autonomous? Register to attend a live demo.

Get started

See how Knapsack helps you reach your design system goals.