dotCMS's Universal Visual Editor (UVE) allows full in-context editing for headless websites, single-page applications, and other remote web apps built using dotCMS as their data source. UVE can edit pages in any external hosting service — including Vercel, AWS Amplify, etc.
Through the UVE, you can use the same tools on a remote site or app as on a native dotCMS page.
This feature both simplifies and improves upon its predecessor, Edit Mode Anywhere. It features fewer technical requirements and a more natural, library-based integration through dotCMS's new JavaScript SDK.
Configuration
To begin setting up the Universal Visual Editor:
- Browse to Settings -> Apps
- Select the built-in integration for UVE - Universal Visual Editor.
- Select the site that will be feeding the destination pages.
Under Configuration, add a JSON object with the property config, whose value is an array of JSON objects that specify the URLs and path patterns with which the UVE is intended to interact.
Below is a simplified version of the sample config provided in the menu:
{
"config":[
{
"pattern":"/blogs/(.*)",
"url":"https://myspa.blogs.com:3000"
},
{
"pattern":".*",
"url":"https://myspa.com:3000"
}
]
}
Each object in the array contains the following properties:
| Property | Description |
|---|---|
url | The URL of the website to interact with the UVE. |
pattern | A regular expression that specifies a site path pattern. This matches the addresses of all the pages you want to edit with UVE. |
The remote site must also be configured through the JavaScript SDK's client library, requiring, at the very least:
- The URL of the dotCMS instance
- A dotCMS API token
For more information, see the client library documentation.
Development
Once the client can successfully connect to dotCMS, you can continue to develop per your chosen framework — e.g., if you’re an Angular developer, you’re just writing Angular code, without any special conventions, required directory structures, etc.
The JavaScript SDK makes available rendering libraries, such as its React library, to simplify API calls and component construction. However, these are not necessary; you can also build your own rendering libraries, using only the dotCMS client library to return data.
The key data structures to get to know are the JSON response objects returned by the API calls:
- Page API: Returns information about the basic properties of a Page, its containers, content, template and layout, etc.
- Navigation API: returns information on the current host, folder, and child/grandchild folders
- Content API: returns content items
