Getting started with Fonto Review

This is a step-by-step guide to integrate Fonto Review in your editor. After you have completed this guide, you will have an editor set up with our reference configuration. You can then delve into the configuration APIs and tweak and tune it to your own needs.


Step 1: Integrate the fontoxml-feedback add-on

Yes, you are correct. The product is called Fonto Review, but the add-on is called fontoxml-feedback. That is because our legacy review functionality already possesses the technical package name "fontoxml-review". The new Fonto Review app uses the add-on fontoxml-feedback.

  • Run fdt editor add-ons to install the "Fonto Review [fontoxml-feedback]" add-on. Remove the old "Comments [fontoxml-annotations]" add-on.

Step 2: Checkout the Fonto Review reference configuration

This is our recommended configuration for Fonto Review. However, you are free to change this configuration to suit your needs.

  • Download the version of the reference configuration matching to your version of Fonto. For all releases, see

    If you checkout a tag of this repository, you can easily upgrade later.

  • Add the package to your config/fonto-manifest.json file.


    "fontoxml-review-reference-configuration": "packages/fontoxml-review-reference-configuration"
  • Add the following lines to your dev-cms/configureDevCms.js file (create the file if it doesn't exist):


    'use strict';
    const matchAnnotationToCurrentFilter = require('../packages/fontoxml-review-reference-configuration/src/matchAnnotationToCurrentFilter');
    module.exports = (router, config) => {
        return {
            reviewAnnotationFilter: matchAnnotationToCurrentFilter
            // This key could also be here to customize the dev-cms routes.
            // routes: myCustomRoutes
  • Add the proxy configuration and enable alwaysRegenerateSessionToken in the config.json or config.js file in your editor. Adapt your config file. Don't copy this example.


        "scope": {
            // Omitted for clarity
        "alwaysRegenerateSessionToken": true,
        "proxy": {
            "review": "http://localhost:6020/"

Step 3: Initialize and configure the Dynamic Position Recovery

Fonto Review requires a back-end to be present. This back-end service runs a position recovery algorithm that recovers positions when they are lost (e.g. because the document was edited outside Fonto).

  • Create a review folder in the root of your editor application. Run the following command in that folder. The <version> should be filled in with the current version of Fonto Editor, e.g. 7.15.0.


    fdt review init --version <version>

    Make sure to edit the generated .env file to remove the # sign before the Cms__ApiBaseUrl configuration setting. Adjust the port if your development server runs on another than 8080. If you are on a Linux machine, set the hostname to the IP address of your Docker network adapter. You will also need to configure some schema specific configuration for the Fonto Review back-end. This configuration and other important configuration has been described here.

Step 4: Run Fonto Editor and the back-end

As of now you should have everything configured to get Review running. Let's start the editor and the back-end to take a look around.

  • Run the following command from the root of your editor:


    fdt editor run
  • Run this command from the folder you initialized the Dynamic Position Recovery in (Step 3)


    fdt review run

Congratulations! You are done!

You should now have a running instance of the Fonto Editor with Fonto Review integrated. You can verify this by opening the editor in your browser (http://localhost:8080) and see that it has a sidebar called "Comments". You should also be able to navigate to the review route by copying the URL and replacing "#/editor" with "#/review" and pasting the URL in a new window or tab. Comments that you make while running with the development server are stored in the review-annotations-database.json which you can find in dev-cms/uploads/review-annotations-database.json.

The "#/editor" route should look something like this:

And the "#/review" route should look something like this:

The instance you're looking at right now is based on the review reference configuration. You can now customize the review configuration to fit your needs. Take a look at the documentation to learn more about the available configuration options.