Previewing content is a key part of a solid workflow for writing content for the Internet. As you edit, you want to see how the content will look like in your website. Our recommended way to preview content involves:
Configuring Preview in the BaseHub dashboard.
Supporting “draft mode” or similar in your website.
Configure Preview
When editing a document, you’ll see a “Preview” link top-right. The Preview link is available in documents, instances, components, and collections (learn more about these blocks here). We’ve ommitted primitive blocks, as they don’t often refer to a website.
By clicking it, you’ll open a popover which will help you configure Preview for that block. You’ll see an input in which you’ll add your Preview URL. Here, you’d typically link your staging URL, or a route that enables “draft mode” within your site.
You can also use variables to configure dynamic links.
Variables
By using curly braces, we can use variables that are inferred from your content. You can use current block’s metadata, or use a nested block’s value.
Variable | Description |
|---|---|
| The ID of the block. |
| The Title of the block. |
| The Slug of the block. |
| The API Name of the block. |
| Use the value of a text block inside the current doc. |
For example, inputting https://example.com/blog/{_slug} will resolve to using the current block’s _slug. Like this:
Support Draft Mode
Depending on the framework you’re using, “Draft Mode”, or “Preview Mode” will be called and configured differently. If you’re using Next.js, you can refer to their official guide. If deploying to Vercel, we highly recommend you use the Vercel Toolbar which configures Draft Mode automatically.
The ideal workflow is one where you are on the dashboard → click on “Preview” → see edits in real time. This workflow is possible for frameworks that support React Server Components by using our <Pump /> Component.