> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Prototyping

Please note that Prototyping is not available on all plans. For more details or to explore upgrade options, contact your sales representative.

## Requirements

1. Knapsack workspace must be on at least version 4.53.0. If you're unsure of your current version, [update your workspace](/get-started/updating-knapsack) to ensure compatibility.
2. A supported [renderer installed](/code-sources)

***

## Initial Setup

Prototyping can only be enabled by developers while working in a [local environment](/get-started/running-knapsack-locally).

To get started, navigate to the Prototyping settings page, enable prototyping for each renderer you want to use, and be sure to save and publish your changes through Git to enable prototyping for all users.

![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/b9de0d2c67d3a8e57225d3d8718c96a61032eb3f9fb2f7b5bb1af2f00ab2f829/docs/assets/images/6c3fa769-settings--VRWsFm4F2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T210940Z&X-Amz-Expires=604800&X-Amz-Signature=aeed355856d783883a9e957c83a967009ec6ee042f969eafff4f39e62fc39888&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

***

## Creating Prototypes

Go to the Prototype section in the main app navigation bar. If you've enabled multiple renderers, choose the one you want to use, then click "New Prototype." This will add a new item to the page, which you can click to open and edit.

Once you're in the prototype, managing it is the same as with other pattern demos, where you use [Slots and Sub Components](/composition-and-prototyping/slots-and-sub-components).

***

### Available Customizations

The **Prototype interface** in Knapsack allows you to adjust how content is arranged, aligned, and styled. Each prototype has its own **layout configuration**, giving you full control over spacing, padding, alignment, and theme variables to ensure prototypes match your intended design.

#### [View Available Customizations](/composition-and-prototyping/slots-and-sub-components#layout-options)

Configure how components and content are displayed within a prototype

***

### How to customize the layout

To customize the layout you are currently editing click the gear icon within the prototype content panel.

![Screenshot 2025-09-16 at 10.33.52 AM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/37d9431185ca5e08fc6e5268843552f7415ee6ce751b965b82518d306a6d33b2/docs/assets/images/3d7f73b1-screenshot-2025-09-16-at-103352-am--UlXc1kKmGR.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T210940Z&X-Amz-Expires=604800&X-Amz-Signature=843112fa2800fe8a3b2d2ee3ae8ab3b7a6f0e1baf8794d7d1f37049f91409868&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

#### Important Note

After making changes to any layout customizations:

1. Click the **top "Close" button** to exit the configuration panel.
2. Then click the **blue "Save Changes" button** to confirm and persist your updates.