Working with Live Preview Editor

Introducing the Nimvio Live Preview Editor

The lack of visual feedback during page/content creation is a well-known challenge with headless CMS. This is natural due to the architectural design approach chosen, as explained in our Headless CMS Overview. However, we believe that this shouldn't be the case with Nimvio. At Nimvio, we want users to experience the best of both worlds - the flexibility and agility of headless CMS, as well as the user-friendliness of traditional CMS. To address this challenge, we have developed the Live Preview Editor.

With the Live Preview Editor, users can create and edit content while previewing it in context and even click on website components. This feature is available by default for Nimvio projects using themes. For projects created from scratch, developers can install the Nimvio open-source SDK to enable this feature for websites that pull content from Nimvio. You can find a guide on how to implement the SDK here.

Things to note on Nimvio Live Preview Editor are:

It will not alter the structure of your HTML or rearrange the DOM.
It will not affect your production sites as it can be enabled only when inside the Nimvio app.
It will not allow inline editing; changing content will always be done in the content editor and the normal form inputs and custom fields you have defined for your content.

Anatomy of the Live Preview Editor

The Live Preview Editor consists of three main sections:

On the left-hand side of the Live Preview Editor, you will find the content tree editor, which is also available on the Content module.
On the right-hand side, you can see the content editor, where any changes made to the content will be reflected visually on the preview website. Additionally, this section includes supplementary details like the content name, the content template being utilized, and the publishing status of the content.
The middle section of the Live Preview Editor displays an iframe of your website, which is called the Preview. We do not render the preview ourselves or inside the Nimvio app. If you are using Nimvio themes, you can select the option to Build for the Website Preview (Step 5 in the Quick Start Guide), and the preview will be hosted on Nimvio infrastructure while still being completely decoupled from the Nimvio app.

Another option is to create your own implementation and host it on your own infrastructure. This implementation will also be completely decoupled from Nimvio. For more information on this, please refer to the section on How to Embed Website in Live Preview Editor.

Editing Page Content

Let's begin by exploring how the Live Preview Editor works. To do so, I will be using a project created from a theme. Please refer to and follow the Quick Start Guide before continuing.

Step 1: Toggle Editable Elements

To show which parts of the page are editable, you should toggle the "Show Editable Elements" option located on the top toolbar of the Live Preview Editor. This will reveal interactive elements on the preview website.

Step 2: Click on the Pencil icon

When you hover over an editable element on a page, a pencil icon will appear. Click on this icon to edit the element, which will cause the view and content on the right-hand side to change based on the element being edited.

Step 3: Update the Content

Now, let's start editing some content!

Try to make some modifications to the Title field and observe how it is immediately reflected on the preview. You can experiment with making changes to various fields beyond just plain text, such as rich text editor, media, or linked content fields. Try it out for yourself to see how these changes are directly reflected in the preview.

Adding a New Page

Building on the previous step, it's simple to add a new page and edit it directly on the Live Preview Editor without having to rebuild the website, which is unlike other headless CMS platforms.

Step 1: Find the Content Template name

Suppose you wish to create a new page resembling the About page, you must determine which Content Template is used for that page. This information can be found at the top of the content form on the right-hand side.

Step 2: Create a new Content Item

To add a new content item, hover over the "Contents" item on the left-hand side (content tree), and click the kebab menu to reveal the Add Content button. Click on this button and a pop-up will appear where you can select the content template to use and give a name for the new content item.

Step 3: Define Template and Content Name

In the pop-up menu, you must specify the template name obtained from Step 1 and provide a name for your new content.

Step 4: Populate the Content Fields

Once you have created your new content, you will see it listed as a sub-content of the Contents item. Follow the instructions on the Preview and you will see your new page taking shape.

Step 5: Fill out those Missing Fields

You may notice that your new page is not yet similar to the About page, as it might be lacking certain elements such as a website header, breadcrumbs, and so on. This is likely because there are other fields that you may have missed. To address this, you can open the About page content and identify any fields that you may have overlooked.

Edit and Publish Content

Once everything is done and you satisfy with the content created, you can start to publish your content.

Step 1: Click on the Publish button

Publishing your content from here is easy. Just click on the Publish button and ensure that your content and workflow are aligned to avoid any issues later.

Step 2: Receive notification about published content.

Once your content has been published, you will receive a notification indicating that your content has been published.

What's Next?

Congratulations! You have finished this part of the guide. Keep exploring below:

Author