Manage and preview content in live preview

Samina Minda Hossain

8 minutes

Preview

With live preview, you can seamlessly link, edit, and preview your content in real-time, ensuring that your content is both engaging and optimized for various devices.

Add content directly to the live preview

To insert a content item or a component to a specific place on your preview:

In Content & assets > Content, go to your root content item.
Click to reveal the live preview panel.
Select > Show editable elements.
(Optional) Select > Autorefresh to get the preview refreshed automatically as you edit.
Find the place where you want to add content to the page.
Click and then select one of the options.
- This opens the in-context editor with a content item that will hold the new content.
- The options can differ depending on whether you're adding content to a rich text element or a linked items element.
After you make the change, wait for the preview to refresh automatically or click and then Refresh manually.

The new component or a linked item will be added to a specific element within the content item, depending on where the

button is located.

Preview doesn't refresh automatically?If your preview doesn't refresh automatically after you make a change, first make sure the Autorefresh option under

Actions is selected. If this option is disabled for you, ask your developers to set up automatic refresh in live preview

Preview and edit content

In Content & assets > Content, select the content item you want to view.
Click to open the live preview panel.
In the top left, select > Show editable elements.
(Optional) Select > Autorefresh to get the preview refreshed automatically as you edit.
Find editable parts (with the pencil icon ).
Click the part of the page you want to change.
- This opens the in-context editor. It doesn’t support certain actions, like adding a note. To open the full editor in a new tab, click .
After you make the change, wait for the preview to refresh automatically or click and then Refresh manually.

Missing edit icons?If you don't see any editable elements, your developers first need to set up your website's preview so that it tells Kontent.ai what's on the displayed page.