index.html

<html>
    <head>
        <link href="/lib/msa/msa.css" rel="stylesheet">
        <link href="/lib/pv-msa/pv-msa.css" rel="stylesheet">
    </head>

    <body>

        <div id="viewer"></div>

        <script src="/lib/pv/bio-pv.min.js"></script>
        <script src="/lib/msa/msa.min.js"></script>
        <script src="/lib/pv-msa/pv-msa.js"></script>

        <script>

            var viewer = new PV("viewer");
            viewer.render();

            var seq1 = new Structure("target001",
                "target001",
                "VLSPADKTNVKAAWGKVGAHAG--EYGAEALERMFLSFPTTKTYFP---HFDLSHGSAQVKGHGKKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTPAVHASLDKFLASVSTVLTSKYR",
                "/lib/data/target001.pdb",
                "red",
                1,
                false
            )

            var seq2 = new Structure("4hhb",
                "4hhb",
                "VLSPADKTNVK-----AAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVKGHGKKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTPAVHASLDKFLASVSTVLTSKYR",
                "/lib/data/4hhb.pdb",
                "blue",
                1,
                false
            )

	        viewer.addStructure(seq1, true);
	        viewer.addStructure(seq2, true);

        </script>

    </body>
</html>