# Understanding the Preview Panel

You'll use the Preview Panel of the [Render Document](https://www.pixiebrix.com/marketplace/49b356c6-5461-46b7-8089-0f84d03c3744/) brick to style the sidebar or modal for your mod.

Here's what the Panel looks like. It's on the far right side! 

![](https://files.cdn.thinkific.com/file_uploads/720267/images/91e/36a/a98/1690575817780.jpg)

{% hint style="info" %}
*Don't see it? You might need to click the **<<** arrays to open it up!*
{% endhint %}

The Preview Panel shows you how your modal or sidebar will look, and this is where you configure the elements you want to add.&#x20;

### **What are elements?**

If you're familiar with CSS, you might recognize some of these concepts. If you're unfamiliar with CSS, look at the series of divs called Containers, Rows, and Columns. Think of them as boxes into which we fit our content. We use boxes because they're helpful for organizing and aligning nicely together.

Click the three dots on any of the squares to see what elements you can add. Useful elements, like buttons, text, headings, etc., must be inside a column or a list. So, if you click the three dots on the top right of an element, you might see:&#x20;

![](https://files.cdn.thinkific.com/file_uploads/720267/images/518/a34/cc7/1690576036885.jpg)

Columns are how you organize the content on the page. Think of them as wrappers for each element you want to add.&#x20;

### **Types of elements**

Inside a column, click the three dots, and you'll see a different menu of options appear: ![](https://files.cdn.thinkific.com/file_uploads/720267/images/ec9/269/e43/1690576135074.jpg)

These elements are used inside **Columns** and are useful for styling your sidebar panel or modal to look how you'd like. Each element has different settings, depending on the type of element.&#x20;

For instance, if you select a **Header** element, you'll be able to set the text and choose the header size.&#x20;

![](https://files.cdn.thinkific.com/file_uploads/720267/images/459/a8b/6ad/1690576209544.jpg)

You'll often want to use the **Text** element, which accepts Markdown formatting, so you can customize the format to look however you'd like!

![](https://files.cdn.thinkific.com/file_uploads/720267/images/bf5/f19/55e/1690576243871.jpg)

You can add other elements, like Bricks, Buttons, and Forms, but we'll cover those in a later lesson.

### **You don't have to add elements!**

By default, the Render Document brick already has a header and a text element. If you want to display some quick text, you don't have to add any new elements; **just** edit the text values by clicking on the text in the Preview Panel, then adjust the text in the configuration to the left, like this!

![](https://files.cdn.thinkific.com/file_uploads/720267/images/999/007/b31/1690576457644.jpg)

You can update the text with static values or **dynamic text** (*variables,* items that start with *@*) to reference output from other bricks, like the response from an API request, a user's input, or a ChatGPT response!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pixiebrix.com/developing-mods/developer-concepts/building-interfaces/understanding-the-preview-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.