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.

Preview HTML files can include external CSS and JavaScript through fully qualified URLs (for example from your site or a CDN).

Example preview HTML file
<html>
   <head>
      <link rel="stylesheet"
            href="https://www.example.com/css/styles.css"> (1)
   </head>
   <body>
      <p>Component Preview</p>
      <div>
        [component://output] (2)
      </div>
      <script type="text/javascript"
          src="https://www.example.com/js/global.js"></script>  (3)
   </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://output] line is a special syntax that the Component Service runtime uses to render the actual component HTML.
3 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.