diff --git a/fern/products/docs/docs.yml b/fern/products/docs/docs.yml
index eac98df90..d183e245f 100644
--- a/fern/products/docs/docs.yml
+++ b/fern/products/docs/docs.yml
@@ -111,6 +111,10 @@ navigation:
- page: Conditionally rendered content
hidden: true
path: ./pages/component-library/custom-components/conditional-rendering.mdx
+ - page: Component demos
+ hidden: true
+ path: ./pages/component-library/demo.mdx
+ slug: demo
- section: AI features
contents:
- link: Ask Fern
diff --git a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx
index 8e38c1b95..90efb4d18 100644
--- a/fern/products/docs/pages/component-library/default-components/code-blocks.mdx
+++ b/fern/products/docs/pages/component-library/default-components/code-blocks.mdx
@@ -1,6 +1,7 @@
---
title: 'Code Blocks'
description: 'Learn how to enhance your documentation with customizable code blocks featuring syntax highlighting, line highlighting, focusing, and more.'
+max-toc-depth: 2
---
Fern uses [Shiki](https://shiki.matsu.io/) for syntax highlighting in code blocks.
@@ -303,15 +304,107 @@ To disable scrolling and wrap overflow onto the next line, use the `wordWrap` pr
+## Deep linking
+
+You can make specific text within code blocks clickable by defining a `links` map. This is useful for linking to documentation, API references, or related resources directly from your code examples.
+
+The `links` property accepts a map where keys are matching patterns (exact strings or regex) and values are the URLs to link to.
+
+### Exact string matching
+
+
+
+
+ ```typescript
+ import { PlantClient } from "@plantstore/sdk";
+
+ const client = new PlantClient({ apiKey: "YOUR_API_KEY" });
+ const plant = await client.createPlant({
+ name: "Monstera",
+ species: "Monstera deliciosa"
+ });
+ ```
+
+
+
+ ````markdown
+
+ ```typescript
+ import { PlantClient } from "@plantstore/sdk";
+
+ const client = new PlantClient({ apiKey: "YOUR_API_KEY" });
+ const plant = await client.createPlant({
+ name: "Monstera",
+ species: "Monstera deliciosa"
+ });
+ ```
+
+ ````
+
+
+
+
+ The `links` property uses JSON format. Each key in the map is matched exactly against text in the Code Block, and matching text becomes a clickable link to the corresponding URL.
+
+
+### Regex pattern matching
+
+You can use regex patterns for more flexible matching. This is useful when you want to link multiple variations or patterns of text.
+
+In the example below, the pattern `/get\\w+/` matches both `getPlant` and `getGarden`, while `/Plant(Store|Client)/` matches both `PlantStore` and `PlantClient`.
+
+
+
+
+ ```python
+ from plantstore import PlantStore, PlantClient
+
+ store = PlantStore(api_key="YOUR_API_KEY")
+ client = PlantClient(store)
+
+ plant = store.getPlant(plant_id="123")
+ garden = store.getGarden(garden_id="456")
+ ```
+
+
+
+ ````markdown
+
+ ```python
+ from plantstore import PlantStore, PlantClient
+
+ store = PlantStore(api_key="YOUR_API_KEY")
+ client = PlantClient(store)
+
+ plant = store.getPlant(plant_id="123")
+ garden = store.getGarden(garden_id="456")
+ ```
+
+ ````
+
+
+
+
+ When using regex patterns, remember to escape special characters with double backslashes (e.g., `\\w+`, `\\d+`) in the JSON string.
+
+
## Combining props
-You can combine the `title`, `highlight`, `focus`, `startLine`, `maxLines`, and `wordWrap`
+You can combine the `title`, `highlight`, `focus`, `startLine`, `maxLines`, `wordWrap`, and `links`
props to create a code block with a title, highlighted lines, specific starting line,
-and a maximum height.
+a maximum height, and clickable links.
- ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4}
+ ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}}
console.log("Line 1");
console.log("Line 2");
console.log("Line 3");
@@ -325,8 +418,8 @@ and a maximum height.
```
- ````markdown maxLines=5
- ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4}
+ ````markdown
+ ```javascript title="Hello, World!" {6-8} maxLines=5 startLine={4} links={{"console": "/learn/docs/writing-content/demo"}}
console.log("Line 1");
console.log("Line 2");
console.log("Line 3");
diff --git a/fern/products/docs/pages/component-library/demo.mdx b/fern/products/docs/pages/component-library/demo.mdx
new file mode 100644
index 000000000..95749f4c1
--- /dev/null
+++ b/fern/products/docs/pages/component-library/demo.mdx
@@ -0,0 +1,118 @@
+---
+title: Component demos
+hidden: true
+---
+
+This page contains demo content for testing and showcasing various documentation components. It's hidden from navigation but can be linked to from examples.
+
+## API client examples
+
+### PlantClient
+
+The `PlantClient` class is the main entry point for interacting with the Plant Store API. It handles authentication, request management, and provides access to all API endpoints.
+
+**Constructor parameters:**
+- `apiKey` (string, required): Your API authentication key
+- `baseUrl` (string, optional): Custom API base URL for testing
+- `timeout` (number, optional): Request timeout in milliseconds
+
+**Example usage:**
+```typescript
+import { PlantClient } from "@plantstore/sdk";
+
+const client = new PlantClient({
+ apiKey: "your-api-key-here"
+});
+```
+
+### PlantConfig
+
+Configuration object for customizing the Plant Store SDK behavior.
+
+**Properties:**
+- `retryAttempts` (number): Number of retry attempts for failed requests
+- `cacheEnabled` (boolean): Enable response caching
+- `logLevel` (string): Logging verbosity level
+
+### createPlant
+
+Creates a new plant entry in the database.
+
+**Parameters:**
+- `name` (string, required): Common name of the plant
+- `species` (string, required): Scientific species name
+- `description` (string, optional): Plant description
+- `careLevel` (string, optional): Care difficulty level
+
+**Returns:** Promise resolving to the created plant object
+
+**Example:**
+```typescript
+const plant = await client.createPlant({
+ name: "Monstera",
+ species: "Monstera deliciosa",
+ careLevel: "easy"
+});
+```
+
+## API method examples
+
+### create_plant
+
+Python method for creating a new plant entry.
+
+**Signature:**
+```python
+def create_plant(
+ name: str,
+ species: str,
+ description: Optional[str] = None,
+ care_level: Optional[str] = None
+) -> Plant
+```
+
+### fetchPlants
+
+Retrieves a list of plants from the API with optional filtering.
+
+**Parameters:**
+- `filters` (object, optional): Filter criteria
+- `limit` (number, optional): Maximum number of results
+- `offset` (number, optional): Pagination offset
+
+**Returns:** Promise resolving to an array of plant objects
+
+## Type definitions
+
+### PlantStore
+
+The `PlantStore` class manages plant data storage and retrieval operations.
+
+**Constructor parameters:**
+- `apiKey` (string, required): Your API authentication key
+- `config` (PlantConfig, optional): Configuration options
+
+### PlantClient
+
+The `PlantClient` class provides a client interface for interacting with PlantStore.
+
+**Constructor parameters:**
+- `store` (PlantStore, required): PlantStore instance to use
+
+### PlantResponse
+
+Response object returned from plant-related API calls.
+
+**Properties:**
+- `plants` (Array): List of plant objects
+- `total` (number): Total count of plants
+- `hasMore` (boolean): Whether more results are available
+
+## Get methods
+
+Common retrieval methods for accessing plant store resources.
+
+| Method | Description | Parameters | Returns |
+|--------|-------------|------------|---------|
+| `getPlant` | Retrieves a single plant by its ID | `plant_id` (string, required): The unique identifier of the plant | Plant object |
+| `getGarden` | Retrieves a single garden by its ID | `garden_id` (string, required): The unique identifier of the garden | Garden object |