Integrations and Embeds

Unify, consolidate, and contextualize your sources of truth within a centralized workspace designed for connection and collaboration, ensuring that your entire team stays aligned throughout the digital production process.

Figma

Use our native plug-in or REST API to bring Variables, Collections, and Modes from Figma into Knapsack. Keep them current through a dynamic connection.

GitHub

Leverage GitHub’s robust CI/CD, advanced code review tools, and repository management to streamline your workflows and maintain code quality.

iFrame

Enhance your documentation by embedding content via iFrames, like videos, code snippets, Google Docs, and forms, to create a more dynamic and engaging experience for users.

React

Embed React components to create interactive and dynamic UI elements directly within your documentation.

Design

Leverage Knapsack’s integrations to import design components, assets, and variables, and dynamically link them to production-ready code, maintaining consistency from design to deployment.

Abstract

Use Abstract to embed design components and track changes directly with Knapsack.

Adobe XD

Easily incorporate Adobe XD components and design assets into your documentation.

Figma

Import Variables, Collections, and Modes from Figma using a dynamic connection.

Style Dictionary

Use Style Dictionary to import and compile design tokens into formats like CSS or SCSS.

Tokens Studio

With Tokens Studio, import design tokens into Knapsack for consistent style and branding.

Development

Work with the tools you're already using. Knapsack’s flexible deployment architecture is designed to integrate seamlessly with your existing tech stack—no need to switch frameworks, change repository hosts, or alter how you develop.

Git Connectors

With support for multiple Git platforms, Knapsack helps you maintain a smooth and efficient workflow that fits your team's needs.

Azure

Optimize development with Azure’s automated testing and CI/CD integration.

Bitbucket

Manage your digital assets and workflows with Bitbucket’s pull requests and CI/CD.

GitHub

Use GitHub’s CI/CD and code review tools to enhance workflow efficiency.

Gitlab

Leverage GitLab’s CI/CD pipeline to automate builds and manage repositories.

Framework Renderers

Work in the templating language of your choice. Knapsack’s flexible structure and multi-language support ensure compatibility with your existing development stack.

Angular

Visualize scalable UI elements with built-in functionality in your documentation.

Handlebars

Include Handlebars templates to display dynamic content and simple logic.

HTML

Use HTML blocks to embed static or dynamic content, including layouts and code.

React

Embed React components to create dynamic UI elements in your documentation.

Twig

Embed dynamic content and render server-side logic using Twig templates.

Vue

Integrate Vue components to highlight reactive and flexible design elements.

Web Components

Showcase reusable UI elements built with standard web technologies.

CI/CD Tools & Integrations

Simplify your CI/CD pipeline using Knapsack’s component demos or flexible integrations with a variety of tools, enabling automated functionality checks, visual consistency validation, and performance testing to ensure your components are always production-ready.

Cypress

Component and End-to-End testing of your design system's components.

Diffy

Visual regression tests to compare design changes and detect visual differences.

Jest

Conduct unit tests and snapshots to ensure functionality and save QA time.

Percy

Perform visual tests to track UI changes and maintain design system consistency.

Documentation

Create robust documentation to contextualize your design assets using interactive and visual elements from various third-party platforms.

Abstract

Use Abstract designs and assets to showcase your designs in the documentation.

Adobe XD

Embed Adobe XD designs and prototypes to highlight interactive design work.

Airtable

Use Airtable bases and views to display structured data and project management.

Figma Embed

Embed Figma files, prototypes, and components to document design work.

Framer

Showcase interactive prototypes and design assets directly in your documentation.

iFrame

Embed any content that can render in an iFrame to enhance your documentation.

Lucidchart

Display visual representations of workflows, processes, and organizational charts.

Vimeo

Include videos to add multimedia content and enhance engagement in your document.

Whimsical

Add wireframes, mind maps, and diagrams to showcase visual planning tools.

YouTube

Embed YouTube videos to incorporate instructional content, presentations.