Knack Tip: Navigating the Page Preview

Hey everyone, it’s Danielle from Knack with a quick Knack tip. Today I want to talk about navigating the page preview in the Pages section of your builder. When you’re building out your app—here I’m using a project management app—you can come to the Pages section to see all your pages listed in the page tree, and view the page preview for the currently selected page.

Understanding the Page Tree

Before diving into the page preview, let’s talk a little about the page tree. As you click around in the tree to view individual pages, you’ll see that page reflected in the preview pane.

When you add a new page—using the button in the upper left—it appears as a starting page. That means it’s a top-level page with no parent.

You’ll also hear the terms parent and child pages. For example, this Projects page has a child page that is a Details view. I’m currently viewing the Projects page, which contains a link to “View More Details.” That link takes users to the child page—Project Details.

A single page can be both a parent and a child. The Project Details page is a child of Projects, but it’s also a parent to the Edit Project page.

As you build more pages, you’ll see menu views that link to other child pages. These links are represented with orange arrows in the builder. They won’t appear in the live app—they’re just a tool to help you navigate. Clicking one will take you directly to that child page in the tree.

Navigating the Page Preview

Now let’s go back to the Project Details page and look more closely at the page preview.

You have a few options up top. By default, you’re using Live Data. This shows real data stored in the app. For example, I can select a specific project like “Market Development,” and see what the Details view looks like with real content.

You might still see “Sample” placeholders for some fields—like Task Name or Employee—because those are connected fields, and the sample doesn’t automatically pull in related data.

You can switch to Sample Data, which just populates the view with random filler text. It’s not tied to your actual records and is only meant to show layout.

I’ll switch back to Live Data now.

Using View Names and Preview Controls

You can toggle View Names on and off using the label icon. These are for internal use only. If you’re collaborating with teammates, view names help everyone understand what each section is for. They don’t appear in the live app.

Another icon lets you expand or collapse sections in the page preview. This is especially useful for large pages or views that display many records. It helps you clean up the preview and focus on one section at a time.

Editing Views and Seeing Instant Feedback

Let’s edit the Active Projects table to see how changes affect the page preview.

I’ll remove keyword search and exporting options. You’ll see those elements disappear in real time. If I change the summary to “Total Sum,” that also updates instantly.

Note that these changes only affect the preview until you hit Save. Once saved, they’ll be applied to the live app.

Let’s update a Display Rule. I’ll expand the editing space—especially helpful when working with rules—and change the color from green to red-orange. It shows up immediately in the preview. I like how it looks, so I’ll save it.

Editing and Arranging Views

This also applies to Details and Form views. I’ll edit the Project Details view, add a few more fields—Budget and Final Status—and see what it looks like in the preview before saving. Once I save, the preview reflects the final layout.

You can also rearrange views directly in the builder. For example, I’ll move a table next to a form, then shift a menu view to the top of the page.

Let’s switch to the live app to see how it looks.

Preview vs. Live App Display

After refreshing the live app, I can see the changes: the project view has moved, new fields have appeared, and the menu view is at the top.

There may be some extra spacing in the live app compared to the preview. That’s because Knack apps are responsive—they adjust based on screen size. The preview is constrained to a smaller window, while my monitor displays the live version with more space. If I resize the window, those gaps close up a bit.

Final Thoughts

I hope this helps you better understand how to use the Page Preview in the Pages section of the Knack builder. It’s a powerful tool for seeing changes in real time and managing layout before publishing updates.

Until next time, happy building.