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:
The Live Preview Editor consists of three main sections:
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.
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.
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.
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.
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.
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.
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.
In the pop-up menu, you must specify the template name obtained from Step 1 and provide a name for your new content.
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.
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.
Once everything is done and you satisfy with the content created, you can start to publish your content.
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.
Once your content has been published, you will receive a notification indicating that your content has been published.
Congratulations! You have finished this part of the guide. Keep exploring below: