Understanding the Preview Panel

You'll use the Preview Panel of the Render Document brick to style the sidebar or modal for your mod.

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

Don't see it? You might need to click the << arrays to open it up!

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

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:

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

Types of elements

Inside a column, click the three dots, and you'll see a different menu of options appear:

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.

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

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!

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!

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!