Now, when we’re designing new views like this trip details view, often what we’re doing is jumping back and forth between preview mode in Bubble Go or in our web browser, and the editor.

We change things in the editor, then open preview again to see how it looks. This back-and-forth is always part of the process to some degree.

But we can help ourselves out quite a bit by using a little feature called the canvas placeholder.

The canvas placeholder lets you add some static text or sample data that will render directly on the canvas in the editor.

This means that as you make adjustments to your design, you don’t have to jump into Bubble Go or web preview every time to see what it looks like — you get immediate visual feedback right inside the editor.

Not every element has this feature — for example, the app bar title doesn’t have it — but many visual elements do.

To use it, just add some dynamic data that your element would normally display.

For example, if you have a text element showing the trip’s start date, you can set its dynamic expression to something like:

This trip’s start date:formatted as abbreviated month

Once you do this, you’ll see a canvas placeholder value appear right on the editor canvas.

Now you can spot any layout or design issues immediately without previewing the app.

I’m going to use the canvas placeholder here to clean up the trip details view design a bit.

First, I hold down Shift and select both the summary text and the date text elements, then right-click and group them in a column group.

This becomes our group body or group main.

On this group, I add a standard padding of 16 pixels around all the elements.

Since the group now has padding, I remove the padding from the individual summary text element to avoid double padding.

Next, I want to recreate this date area, which consists of a date icon and some text side by side.

To achieve that layout, I put the date text inside a row container and add the calendar icon next to it in the same row.

I change the icon to a calendar icon and adjust its color.

The icon is a bit too high, so I align it vertically within the row.

I add a small column gap between the icon and the text to space them nicely.

Thanks to the canvas placeholder, I can immediately see how this looks right here in the editor.

One thing I notice is that the edge of the icon is not aligned with the edges of the other elements (summary text and app bar title).

To fix this, I remove the default padding on the icon element.

If that doesn’t fully solve it, I adjust the icon’s width while keeping its height fixed, which effectively brings the icon’s edges closer in without resizing the icon itself.

I also remove the minimum height restriction from the group and the text element to allow them to shrink as needed for tighter spacing.

Finally, I reduce the icon’s fixed height a bit to better align it vertically with the text.

I add some row gap between the date area and the summary text — starting with 8 pixels and possibly increasing it to 16 pixels for better spacing.

I also increase the column gap slightly between the icon and the date text to improve the look.

Next, I duplicate this group (the date row) to create a new section for displaying the trip cost.

I swap out the calendar icon for a coin or currency icon.

In the canvas placeholder for the cost text, I try adding large numbers (like $2000) to make sure the design can handle bigger values gracefully.

For the cost field, which is a number field, I format it as currency.

This formatting option lets me add thousand separators and a currency prefix (like $).

Even with canvas placeholders, it’s still a good idea to preview your app in Bubble Go or web preview with real test data.

If your test data is poor or missing, create a new test trip with values filled in.

For example, I add a summary by recording my voice describing a trip to Madrid.

Then I preview it and verify how the view looks with real data.

That’s a solid starting point for designing detailed views with live previews right in the editor using canvas placeholders!

In the next lesson, we’ll learn about some simple operators you can use to manipulate data, like subtracting dates and performing basic math operations.