Connecting Code Templates to a Pattern Page

When you have a coded template started and you're ready, connect it to a Pattern Page so it displays on the Template Stage. Click the Add Tab button for the pattern, select “Template”, then select the template renderer associated with your coded template from the dropdown.

Add Template Tab Popover

You then need to provide a path to the file. Knapsack provides a couple methods for doing so.

One way is to simply copy the path to file from your editor:

Copying a path from VS Code

The path will look something like /Users/yourname/documents/knapsack-example/assets/patterns/button.tsx. The path you provide can be relative to your system's root directory or the current working directory of your instance (the same directory containing your package.json file).

For certain templating languages, you can also provide any path you would use in an import statement (e.g. @knapsack/design-system).

The "Named Export" field is not often required, especially in cases like React where you may have a single default export.

Once you submit the form, the list of tabs will be updated with the newly added Template Tab.