A Tale of Two Tools: How Knapsack and Storybook Stack up
Knapsack for Engineers: Spend less time maintaining and more time coding
Patterns: An event for design, engineering, and product leaders. Apply now!

Plans

Everything your design system needs - all in one place

Basic

Design, code, document, and ship better apps in half the time, together.
5+ users
50 viewers included
Contact Sales
Basic includes:

End-to-end design system platform

Comprehensive, collaborative tooling and services to manage and operate around your design system at scale.

Support for code framework [1 Included]

Knapsack can render multiple code frameworks in a single workspace. Choose from React, Vue, Web Components, Angular, Twig, or Handelbars renderers. Custom renderers are priced separately.

Dynamic documentation site + hosting

Cloud documentation that connects directly to design and engineering infrastructure and updates automatically.

Design token manager

Import, edit, manage and transform design tokens to deliver production-ready token-based web and mobile styling.

Real-time code rendering + playgrounds

Live development playgrounds for developers; code prototyping and assembly experiences for everyone.

Figma integration (tokens and embeds)

Pull live updates to artboards, assets, and design tokens directly from Figma using native features and popular plug-ins.

Git-backed version control

Collaborate on branches, track commits and PRs, and manage versions using best-in-class trusted tooling and services.

CI/CD integration

Reduce engineering overhead by connecting with and enhancing existing workflows for releasing and leveraging your coded system.

User management & permissions

Sophisticated permission controls ensure your workflows are streamlined and your work is protected.

Dedicated implementation resources

Hands-on support from experienced design system practitioners to help you get up and running quickly.

Access to design system experts & services

Professional services for system strategy, rollout and change management through Knapsack and our partners.

Minimum of 5 users

Contributors include Admin and Editor roles, used for making changes to the workspace, including documentation and tokens.

50 viewers included, up to 199 viewers available

Viewers are able to access and view the workspace via login.

Core

For teams with advanced technical, support, or security needs.
10+ users
200 viewers included
Contact Sales
Basic plan features, plus:

Custom domain configuration

Implement a custom domain or subdomain for accessing your Knapsack workspace.

Support for multiple code frameworks [1 Included]

Knapsack can render multiple code frameworks in a single workspace. Choose from React, Vue, Web Components, Angular, Twig, or Handelbars renderers. Custom renderers are priced separately.

SSO and advanced security [1 provider]

Supports both SAML and OIDC providers for single sign-on, allowing you to choose how your users securely log in.

Standard SLA Support included; Premium SLA Support available

Enhanced service level commitments for technical support, user training, and platform availability.

Prototyping & Composition

Assemble, configure, and share interfaces using production coded components and token-based styling.

Workspace analytics included w/ premium support

Upgrade to receive regular reports on workspace usage metrics.

≤ 4 Modes / Collections

Unlock advanced theming capabilities and sync styling from Figma to code implementation.

Negotiable services agreement

Tailored legal terms of services, support, and privacy to meet the exact needs of your enterprise organization.

Minimum of 10 users

Contributors include Admin and Editor roles, used for making changes to the workspace, including documentation and tokens.

200 viewers included, up to 1999 viewers available

Viewers are able to access and view the workspace via login or publicly for free.

Pro

For teams with powerful digital ambitions at scale.
20+ users
Unlimited free viewers
Contact Sales
Basic & Core plan features, plus:

Support for multiple workspaces

Power multiple system or a nested hierarchy of systems to meet the needs of your complex product organization.

Support for multiple code frameworks [3 Included]

Knapsack can render multiple code frameworks in a single workspace. Choose from React, Vue, Web Components, Angular, Twig, or Handelbars renderers. Custom renderers are priced separately.

SSO and advanced security [≤3 providers]

Supports both SAML and OIDC providers for single sign-on, allowing you to choose how your users securely log in.

Premium SLA Support included

Our highest level commitments for technical support, user training, and platform availability.

Public Workspace Included

Make your workspace available to the world via public URL (view-only access). Additional Public Workspaces Available.

Workspace analytics included

Receive regular reports on workspace usage metrics.

≤ 12 Modes / Collections

Unlock advanced theming capabilities and sync styling from Figma to code implementation.

Minimum of 20 users

Viewers are able to access and view the workspace via login or publicly for free.

Unlimited viewers

Viewers are able to access and view the workspace via login or publicly for free.

Which plan is right for your team?

Get a breakdown of how Knapsack’s user roles, permissions, and plans help teams manage, scale, and streamline their digital production operations.

User Roles & Permissions

Understand access levels of Admins, Editors, Consumers, and Viewers.

Plan Breakdown

Compare Base, Core, and Pro to find the right fit so your team can get the most out of Knapsack.

Feature Access

Explore what’s included, from prototyping to workspace analytics and SSO connections.

Have more questions?

Frequently asked questions

Send any questions to hello@knapsack.cloud

What counts as a paid user?

A Knapsack user account is tied to a single email address and can be used across multiple workspaces. A paid user seat is required for Admin and Editor roles, used for making changes to the workspace, including documentation and tokens. Viewers are able to access the workspace (via login or publicly) for free.  Learn more about user roles and permissions in our Knowledge Base.

Can I use Knapsack for free?

Knapsack does not currently offer a free trial period. As an enterprise platform, we help customers get to ROI within the first few days or weeks. So spending valuable cycles 'kicking the tires' doesn't make sense when we could be making serious progress towards your system goals. We do offer technical sessions, public demo workspaces, and workshops to help teams understand the ins and outs of the platform before diving in. Contact us today to get started.

What types of payment do you accept?

Knapsack is purchased on an annual subscription cycle, and is most often paid for via ACH / banking transfer. We can accept all major credit cards, as well, upon request.

How does billing work?

Plans are billed annually and support a variety of payment methods. Quarterly true-ups are performed based on actual usage following review with your dedicated account team.

Learn more, build faster.

Be the first to know about product updates, new episodes of the Design System Podcast, events, and more.

Request pricing

Contact our sales team to see a live demo and get started today.

Live design and code connection
Token management
Live code rendering
CI/CD integration