> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server. # Embed Blocks ![embed block url form](/_fern-img/4cab372712fd714553b53907331f6945e393260af32ca283a95444c11bac3d26.webp) ## Getting Started Embed blocks provide a platform for incorporating third-party content into your documentation. They support a variety of formats, ranging from standard iFrames to embedded designs and code. Our embed blocks serve as a versatile tool for efficiently organizing your third party design system artifacts within Knapsack. To get started, add a new block to your page and navigate to the "Embeds" section in the popover menu. Select the desired embed type from the list. ![block-dropdown.png](/_fern-img/787de2b78d59a5443be1bda457af09087ad84578872a24c9f5ebf9844330bdd6.webp) --- ## Embed Block Options With our embed now rendering, we can use the block settings to update the embed. `Url` - Edit the current URL of the embed. `Click to Interact` - This will require a user to click on the iFrame before it is interactive. This is helpful for preventing scrolling or hover effects, etc, from occurring in the embedded content until a click event is received. `Embed Height` - Set a height using px, em, vh units, etc. Defaults to px. ![embed-settings.png](/_fern-img/d59842d2533954babf9d4b6af77c5159d9237cd852d6374abfb0f16180e0fc3d.webp) --- ## Using Specific Embed Types Below you can more information for each of these embed block types ### iFrame Block The iFrame block allows you to embed anything that has permission to be rendered in an iFrame. This gives you the flexibility to add a wide range of resources from your third party providers. **Setup:** Use a URL for any domains that are embeddable within an iframe. ### Abstract Block The Abstract Block enables you to embed designs and assets from Abstract. This block is perfect for showcasing design files and collaborative workspaces directly within your documentation. **Setup:** Create a share link in Abstract and enter the URL in the prompt. ### Adobe XD Block The Adobe XD Block lets you embed Adobe XD designs and prototypes. This block is ideal for showcasing interactive design work and prototypes created in Adobe XD, allowing for seamless collaboration and presentation within your documentation. **Setup:** Create a [share link](https://helpx.adobe.com/xd/help/share-designs-prototypes.html) and enter the URL into the prompt ### Airtable Block The Airtable Block allows you to embed Airtable bases and views. This block is useful for integrating and displaying structured data and project management tools from Airtable. **Setup:** Create a [share link](https://support.airtable.com/docs/creating-airtable-base-share-links#embedding-bases) and enter URL in the prompt ### Figma Block The Figma Block lets you embed Figma files, prototypes, and components. This block is ideal for displaying design work and interactive prototypes, making it easy to collaborate on design projects. **Setup:** Use the URL for the Figma file or prototype you want to embed ### Framer Block The Framer Block enables you to embed Framer content, providing a way to showcase interactive prototypes and design assets. **Note:** Use the share URL for the Framer content you want to embed and enter into the prompt ### Lucidchart Block The Lucidchart Block allows you to embed Lucidchart diagrams and flowcharts. This block is useful for displaying visual representations of processes, workflows, and organizational structures. **Note:** Create a [share link](https://help.lucid.co/hc/en-us/articles/4642423138196-Share-with-collaborators-in-Lucid#create-shareable-link) and enter the URL into the prompt ### Vimeo Block The Vimeo Block lets you embed Vimeo videos. This block is perfect for adding visual and multimedia content to your documentation, enhancing engagement and information delivery. **Setup:** Create a [share link](https://help.vimeo.com/hc/en-us/articles/12426502519313-How-to-share-a-video) from the video to embed and enter the URL into the prompt ### Youtube Block The YouTube Block enables you to embed YouTube videos. This block allows you to incorporate instructional videos, presentations, and other visual content from YouTube. **Setup:** Create a [share link](https://support.google.com/youtube/answer/57741?hl=en\&ref_topic=9257102\&sjid=11153742616067652454-NC) from the video to embed and enter the URL into the prompt ### Whimsical Block The Whimsical Block allows you to embed Whimsical wireframes, mind maps, and diagrams. This block is useful for displaying visual planning and brainstorming tools directly within your documentation. **Setup:** Create a [share link](https://help.whimsical.com/article/573-managing-access-permissions-to-files-and-folders#heading1) and enter the URL into the prompt > Documentation for Knapsack, the design system platform that unifies design tokens, components, and docs so teams design, build, and ship consistent products. ## Docs - [Attachments Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/attachments-block.md): Add file attachments to your docs that users can download. Once you've added the Attachments Block, you can upload a file or add a URL link to a file hosted elsewhere. - [Code Snippet Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/code-snippet-block.md): The Code Snippet Block provides syntax highlighting for a variety of programming languages. This block is perfect for displaying code examples with proper formatting and readability, making it easier for users to understand and utilize the provided code. - [Image Gallery Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/image-block.md): Add and manage images for your documentation. This block is ideal for showcasing visual content and illustrations that complement your documentation. - [Video Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/video-block.md): Seamlessly integrate videos into your documentation - [Patterns Grid Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/patterns-grid-block.md): Display a grid of the patterns in your design system. This block arranges your design patterns in a visually appealing grid format, allowing users to quickly browse and identify different components. - [Patterns Status Table Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/patterns-status-table-block.md): Display a table of the patterns in your design system. This block organizes your design patterns in a tabular format, providing a clear and structured overview of each pattern's status, making it easier to track and manage the components within your system. - [Template Playground](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/template-playground.md): A Powerful Tool for Customizing and Displaying Pattern Variations. - [Template Variants](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/template-variants.md): Automatically Document and Display Component Variations as They Evolve. - [Template Spec](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/pattern-spec.md): Display Component Specifications Anywhere in Your Documentation. - [Markdown Block](https://docs.knapsack.cloud/documentation/blocks-overview/embed-blocks/markdown-block.md): The Markdown Block allows you to add custom content using Markdown syntax. This block supports a wide range of formatting options, enabling you to create rich text content, lists, links, images, and more. It offers a versatile way to incorporate customized and detailed information into your documentation.