> 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.

# Template Playground

## Overview

The Template Playground content block is a versatile tool that enables you to explore and customize pattern variations within your Knapsack workspace. By selecting a pattern and its associated renderer (e.g. React, Vue, etc.), you can view and interact with specific demos. This content block is ideal for showcasing components in different configurations, testing responsive behavior, and exploring the impact of different props and slots.

### Key configuration options include:

* **Seamless Display**: Hide background and extra UI to embed your components in isolation.
* **Allow Resizing**: Enable resize handles to observe responsive behavior in real-time.
* **Show Schema Form**: Display an editable form to modify props and slots on the fly.
* **Show Code Snippet**: View the code associated with the displayed component variation.
* **Layout Options**: Choose between Landscape or Portrait mode for optimal presentation.

**Please note that changes made inline using the schema editor form will not be saved.** To make persistent changes, you must edit the specific demo directly.

The Template Playground offers flexibility for presenting components in a clean, customizable layout, perfect for documentation and testing purposes.

![Screenshot 2024-09-10 at 10.56.05 AM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/32d343f6323dd3435102b0d876088505f54f96a4585bfc6f65bb2f3e2f73a0ff/docs/assets/images/f3921ab5-screenshot-2024-09-10-at-105605-am-i2buye7leypng.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=20260724T211435Z&X-Amz-Expires=604800&X-Amz-Signature=ba7dc9ad65600a040000e0bf8317dc6285381c9e71a4d7b599708cbcc7c23748&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

### Example screenshot

The example below shows a React button component, the schema form, and the code snippet:

![Screenshot 2024-09-10 at 11.21.11 AM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/ea840f70020d1b67254540b17644ebdec911104951e9b7fc08fa4880b186d38d/docs/assets/images/a85ff09e-screenshot-2024-09-10-at-112111-am-xkhgnsr7uwpng.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=20260724T211435Z&X-Amz-Expires=604800&X-Amz-Signature=966abf23239a7f6271ec0a8457fb19076ba2383e1dfc648b2345a6fdcfe448e2&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)