index.html

<!DOCTYPE html>
<html>

  <head>

    <!-- d3.js dependency script -->
    <script src="https://cdn.jsdelivr.net/npm/d3@5.9.2"></script>
    
    <!-- PDB Topology Viewer JS -->
    <script type="text/javascript" src="build/pdb-topology-viewer-plugin-2.0.0.js" defer></script>

    <style>
        #pdb-topology-viewer {
            position: relative;
            width: 500px;
            height: 500px;
        }
    </style>

  </head>

  <body>
    <h4>PDB Topology Viewer Plugin Demo</h4>
    
    <!-- PDB Topology Viewer container -->
    <div id="pdb-topology-viewer"></div>
    
    <script>
      document.addEventListener('DOMContentLoaded', () => {

        //Create plugin instance
        const pluginInstance = new PdbTopologyViewerPlugin();

        //Get element from HTML/Template to place the view
        const viewContainer = document.getElementById('pdb-topology-viewer');

        const options = {
          entryId: '1cbs',
          entityId: '1'
        } 
    
        //Call render method to display the 2D view
        pluginInstance.render(viewContainer, options);
      
      });
      
    </script>
  </body>

</html>