Help Center

Menu

Preview HTML files

HTML files used in a preview can use any HTML syntax you need to provide context to preview your component. Each preview can have a different preview file if required.

You can configure components to load static files, which will be loaded in the rendering layer of your website in the Squiz Digital Experience Platform (DXP). You can use preview files to simulate this in your local development server.

Example preview HTML file
<html>
   <head>
      <link rel="stylesheet"
            href="https://www.example.com/css/styles.css"> (1)
        [component://static-header]                        (2)
   </head>
   <body>
      <p>Component Preview</p>
      <div>
        [component://output]                               (3)
      </div>
        [component://static-footer]
      <script type="text/javascript"
          src="https://www.example.com/js/global.js"></script>  (4)
   </body>
</html>
1 The link tag shows an example of hard coding a reference to an external CSS file. This could be from a popular library through a CDN, or it could be a reference to your live website.
It is essential to use a fully qualified URL here. For example, use a URL starting with https://, as relative paths will only be relative to your component.
2 The [component://static-header] and [component://static-footer] lines are special syntax that the Component Service runtime uses to render any dynamic references to the static files configured in your component.
3 The [component://output] line is a special syntax that the Component Service runtime uses to render the actual component HTML.
The static files that are provided through the special syntax additions are defined in the output of the component function in the manifest.json file.
4 The script tag shows an example of hard coding a reference to an external JavaScript file. Again, it is essential to use a fully qualified URL here.