Main Concepts
In This Article:
- Introduction to Knapsack Workspaces
- Access and User Licenses
- Permissions
- Creating Documentation
- Coding Patterns
- Managing Patterns
- Organizing Content
- Publishing Changes to the System
Introduction to Knapsack Workspaces
Your Knapsack workspace is where your design system assets (code, data, documentation) are connected to the Knapsack interface, allowing you to build a scalable, sustainable design system with our out-of-the-box platform. With a Knapsack workspace, your live components and all system documentation are presented in a centralized location alongside helpful tools that enable both designers and developers to document, interact with, and collaborate around system elements.
Your workspace is customizable. You can add new pages, integrate new components, and easily rearrange the structure of the workspace. On each page, modular content blocks provide a simple solution for managing documentation and cross-referencing other content blocks in your workspace.
Knapsack supports a wide range of templating languages, allowing you to take advantage of existing components and assets, and use the libraries you prefer. You can configure your workspace to work with one or several template renderers, including:
- React
- Web Components
- Twig
- Vue
- Angular
Learn More About Setting Up Your Workspace
Access and User Licenses
Access to any Knapsack workspaces requires a Knapsack user account and an invitation to the specific workspace. Once authenticated, the Knapsack UI displays certain controls based on the specific permissions (Admin, Editor, Viewer) of the user and environment (Cloud, Local) in which the user is operating. For more information on licensing, please see User Accounts, Plans and Pricing or reach out to hello@knapsack.cloud.
Permissions
Knapsack currently offers two levels of permissions that are set for users at the workspace level, meaning an individual user account can have different permissions in different workspaces.
| Action | Admin | Editor | Viewer |
| Invite and remove users from Workspace | X | |
|
| Invite users as "View Only" to Workspace | X | X | |
| Make edits and propose changes | X | X | |
| Make edits and publish changes | X | ||
| Create and Share Pattern Examples | X | X | X |
| |
Creating Documentation
Content documentation is created using Knapsack's system of Blocks. Blocks allow you to add various types of content on a page. This includes rich text of course, but also external embeds from various popular online tools, and automatically generated docs from your design system code.
Writing content in the same environment that patterns are coded in provides you some unique superpowers! For example, want to display every size variation of buttons but not have to worry about keeping it up to date when new sizes are introduced? Use the Pattern Variation block!
Coding Patterns
When developing a pattern, Knapsack provides a live updating stage and hooks into the schema of the pattern to automatically document mutable properties and surface controls for editing them when creating examples.
Managing Patterns
Keeping track of the current state of a particular pattern in a system can be challenging. Knapsack provides a flexible system of statuses to help your team track when a component is ready, needs updating, needs review, etc.
Organizing Content
The main utilities available for organizing your documentation and patterns in Knapsack include...
- Navigation: Flexible and searchable. Here you can use Pages (purely documentation), Pattern Pages (comes with tabs for displaying docs and coded components), and Groups (used to group nav items together) to organize top-level content. The navigation structure is decoupled from your design systems folder structure.
- Pattern Page Tabs: A pattern page can have one or more templates or content tabs. You could group multiple button templates under one "Buttons" pattern page, along with an overview tab, etc.
Publishing Changes into the System
Knapsack runs along-side your coded design system and stores all documentation in a JSON based database that's generated and stored in your design system's code repository.
If you're not a developer, this means changes you make to the system are happening in your browser only. To save your changes into the system, you need to follow our Git-backed publishing Workflow.
If you are a developer, you'll see all content saved as JSON or YAML data in a designated folder of your design system repository. This gives you the ability to edit the content directly in the data file, interact with it via the API, and of course securely store it with your versioned, coded patterns.