When exploring your component's possibilities through it's props and variations on our Pattern Stage it is much easier to work with the sub-components present with our new release! Imagine you are editing the look and feel of a Card component and want to adjust how the Button compnent in the Card's footer appears: simply click edit on the Button and then it's edit form slides in from the side. Here's a video showing what that experience is like:

(Here's a link to the video if you have any issues viewing the embed above)

You can even go multiple levels deep, so you're not limited to just Card > Button: you can dive as deep in as you want. This opens up so many exciting possibilities in composing experiences from your carefully crafted components! Being able to construct full page prototypes is now possible. The current stage area is a little tight in screen real estate for that right now, which is exactly why our next up and coming feature is a dedicated Prototyping section that allows for the space to create these experiences. You can expect the Prototyping section very soon; in the mean time take a look at the video below for an example of what can be done:

(Here's a link to the video if you have any issues viewing the embed above)

Knapsack is excited to announce a powerful new integration with Figma! This integration allows you to connect your Figma design files directly to your Knapsack workspace, enabling a link between your design file and documentation in Knapsack.

Features

1. Connect Multiple Design Sources: Link as many Figma design files as you need to your Knapsack workspace for a centralized hub.

   

2. Browse Designs in Context: Easily navigate and explore Figma components, frames, and instances while editing your documentation.

   

3. Embed Figma Assets: Directly embed and configure Figma Components, Variants, Instances, and Property Specs throughout your documentation.

   

4. Build Powerful Handoff Tools: Leverage design data to create robust handoff and comparison tools, streamlining collaboration.

5. Sync Updates from Figma: Keep your documentation up-to-date by syncing changes from Figma with a single click.

Getting Started:

To start using the Figma Design Source integration, simply navigate to your workspace settings and connect your Figma account. From there, you can select the design files you want to link and start embedding assets throughout your documentation.

You can find more info on how to begin using Figma in your workspace using our documentation

We're thrilled to bring you this new integration and can't wait to see how you leverage it to improve your design and development workflow. As always, we welcome your feedback and suggestions for future improvements.

We are seeing more people using Knapsack’s Cloud Authoring tools than ever before and have released a number of updates to help provide a more stable editing experience. Our goal was to largely mitigate merge conflicts that can occur when users are simultaneously making changes to overlapping sections of content.

Merge conflicts often stem from the duration of time a content branch is open in the Knapsack UI before it’s published. Improvements have been made that will reduce the likelihood of merge conflicts upon hitting Request Review or Publish Changes for your branch.

There is now has a Fix Merge Conflicts button to automatically reconcile your changes with competing changes made by other content editors.

Another update is a new UI within the site’s Settings to identify and resolve issues with orphaned content elements, should they arise. Discover how to leverage this feature by visiting our Doctor Tool Documentation.

Our expectation that this should greatly reduce the number of merge conflicts you will experience, and make any you do experience much easier to resolve.

As a bonus, users will also notice a reduction in site load time.

Importing tokens into Knapsack from Style Dictionary now allows selecting multiple JSON files! Those JSON files can also be in JSON5 format as well.

Give examples of how particular components should be used and common mistakes to avoid. Our Guidelines block consists of do’s, don’ts, and cautions. Add as many as you need to help your users create their best work.

Learn how to manage your guidelines

Improve stuff

• Improve embed blocks loading experience

• Allow mailto links in Shortcut Tiles and Text blocks

Smooth out UX for adding components to Knapsack with autocomplete forms & suggestions. Adding components is easier than ever - Knapsack now analyzes what components you have that have yet to be added and provides auto complete suggestions. Works with all our renderers across all template languages we support. Be sure to update your Knapsack packages to at least 4.37.0 (run npx @knapsack/update@latest to update).

Infer Spec Improvements

Many improvements have been done to Infer Spec which helps by automatically pulling in prop info from your component code. Extra attention to users of Material UI has been given in this area as well. Be sure to update your Knapsack packages to at least 4.37.0 (run npx @knapsack/update@latest to update)

More improvements & fixes

• Children Slot Inference

• Docs: System Overview Block

• Asset Sets now load when above KS in dir structure

• Improve Component Overview Display

• Infer Spec no longer Generates Invalid Syntax on Importing MUI's DataGrid Component

• Editing token group title no longer destroys all subgroups and tokens

• Improve Component Overview Display

• Infer Spec improved by using "types" field in package.json for when types are in different directories (like when using "declarationsDir" in "tsconfig.json")

Adds the ability for content blocks to have a header (title and description) that flows with the block in the grid system.

• Existing blocks are not affected

• Toggle on a header through the Block Menu or go to your workspace settings to have all newly created blocks have the header on be default.

Learn how to manage your content blocks

Improve stuff

• Add focus ring to inline links

• Add open in new tab button to pattern embed block

• Replace text editor link input with link modal

New stuff

• Enable filtering of design token output asset files

We love that Knapsack stores it's content in git and all that it enables: change management, history, rollback, automation, and more! However we've recently heard from you that a spike in merge conflicts when editing content has been experienced and that is no fun! The updates we've put out today will really help this out!

It does require just a bit of action on your end though with running some update commands and committing the migration results. Here's what to do:

Simply run the command below to update past 4.30.0, follow the instructions, and commit the results.

npx @knapsack/update@latest

It's advised to not have ongoing branches that started before this update. Publish the branches before running the update. Once the changes have been pushed up and the App Client has deployed, then editing is safe to resume.

This change pulls all the blocks and demos out of the single db.yml file – each block and demo will be stored as a single JSON file in a dedicated "blocks" or "demos" subdirectory. Individual files are much easier for git to track versus different parts of the same file, so merge conflicts will happen much less often.

If you have any problems, please reach out to [email protected] and we'll be happy to help out!

Published PRs now show username

Improved

• Improved resilience in Blocks, enhancing performance and stability.

New Shortcut Tiles block

Page Hero Improvements

• Adds option to show Overlay to help text stand out against an image

• Adds controls for Contain Image to fit the image inside the hero instead of covering it

• Adds controls for Position to allow setting a contained images alignment to Left, Center, or Right

Adds search to add block menu

New

• Added ability to toggle Infer Spec when creating templates for more control and customization.

• Enhance stage to automatically adjust when components increase in size dynamically.

Improved

• Improved organization of table of contents settings for easier customization and navigation.

• Improved caching efficiency, reducing knapsack cache size use.

• Improved accessibility: Keyboard navigation now highlights anchor tags, making copy links visible when tabbing.

• Improved collapsible groups for secondary navigation in order to enhance user experience and navigation efficiency.

• Improved user experience for table blocks by resolving various issues and enhancing functionality.

• Improved accessibility by adding keyboard navigation to template thumbnails within iframes.

• Improvement: Fixed issues with clearing previous paths on incorrect routing

• Improved scrolling behavior to prevent links from cutting off main content in webpage.

Fixed

• Improved: Enhance detection of missing block IDs in appClientData.

• Fixed issue with markdown headings not appearing in table of contents when using links.

• Improved template spec tab by fixing toggle issue for "Infer Spec" functionality.

• Block moving feature not functioning properly when attempting to move to a different page.

Learn about the newest updates directly in your workspace with the inline changelog menu.

Text Block Image Toolbar

Upload images or add an image via URL and adjust it's alt text for accessibility.

• Improved accessibility enhancing keyboard navigation for better user experience.

• Error toasts now require user action for dismissal.

• Improved build performance.

Appearance Element Previews

Adds a live preview of the relevant theme-able components, giving users a way to view the effects of their changes.

Fixes & Improvements

• Improves user feedback for when settings cannot be edited

• Fixes font size field behavior

• Fixes color fields not updating when discarding changes

• Organizes related appearance items on single pages

• Adds ability to reset settings to default

Primary nav action menu

Added action menu to the the primary nav menu for easier management of the workspace nav

Convert to Pattern Menu Action

Adds action to convert a page to a pattern

Move to Page Menu Action

Adds action to move content type to a page or primary-nav

Quickly add child entities

• Adds ability to add a child page directly from a nav item

• Renames "Add Subpage" to "Add Page" in sidebar footer to differentiate the two actions