Help Center

Menu

Set up your local preview

A local preview system is available for Content Service, which allows you to test your components without deploying them to Squiz DXP. Local testing provides a much faster feedback loop than requiring a component to be deployed and used through Squiz DXP. In this local preview system, you can mock data and the outer HTML to provide context to your component.

Add preview code to your component

Add the following code to your manifest.json file.

The code must be added to your manifest file as a field at the top level of the object after the functions field. 
"previews": {                       (1)
    "firstPreview": {               (2)
      "functionData": {
        "main": {                   (3)
          "inputData": {            (4)
            "type": "inline",       (5)
            "value": {
              "text": "Text supplied to previews function."
            }
          },
          "wrapper": {              (6)
            "path": "preview-wrapper.html"
          }
        }
      }
    }
  }
1 previews is an object that can contain multiple named previews for your functions. This preview array contains one named preview called firstpreview.
2 firstpreview is the name of the preview. This name is displayed on the details screen of the component in the DXP Console as tabs, allowing users to browse the different named previews.
3 main is the name of the function - and corresponds to the function in your functions field. You can provide mock data here for multiple functions in your component preview.
4 inputData is the object that will match the input in your function. Use inputData to provide example values for any inputs to the function.
5 type is the type of input. This can be inline or file.

inline uses the value field to provide the mocked data directly.

file receives input from an external JSON file.
6 wrapper is the HTML wrapper used to wrap the component when displayed. It can be used to add necessary HTML context or global CSS and JavaScript includes.

You can see the complete manifest.json file, including the preview configuration in Test using the local development server.

Preview wrapper

The preview wrapper is referred to in the manifest.json file preview object. It allows you to add context and formatting to your component. The preview wrapper is used for the preview only.

  1. Create a new file called preview-wrapper.html.

    The preview-wrapper.html file must be in the same directory as your manifest.json file, or a sub-directory of it.

  2. Add the following code to your preview-wrapper.html file:

    <html>
  <head></head>
  <body>
    [component://output] (1)
  </body>
</html>
    1 This tag is used by the local server to render the component.
    You can add any relevant HTML here for previewing the component. For example, you could save a page from your website as HTML and replace the contents with the component tag.