diff --git a/examples/circular-view.html b/examples/circular-view.html
index 3126d2641..45c18b5dd 100644
--- a/examples/circular-view.html
+++ b/examples/circular-view.html
@@ -4,9 +4,6 @@
     <meta charset="UTF-8">
     <title>Circular Genome View</title>
 
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
-
     <!-- React (required for circular view)  -->
     <script src="https://unpkg.com/react@16.14.0/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js"></script>
@@ -43,7 +40,9 @@ <h2>Circular genome view</h2>
 </div>
 
 
-<script type="text/javascript">
+<script type="module">
+
+    import igv from "../dist/igv.esm.min.js"
 
 
     // Start igv.js and create regions
diff --git a/examples/copyNumber.html b/examples/copyNumber.html
index 669e962dd..2041beb83 100644
--- a/examples/copyNumber.html
+++ b/examples/copyNumber.html
@@ -6,9 +6,6 @@
     <link href=img/favicon.ico rel="shortcut icon">
     <title>igv.js</title>
 
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
-
 </head>
 
 <body>
@@ -19,7 +16,9 @@ <h1>Segmented Copy Number</h1>
 
     Segmented copy number ("seg" format) with
     <ul>
-        <li>Explicit sample list - TCGA-06-0168-01A-02D-0236-01,  TCGA-02-0115-01A-01D-0193-01,  TCGA-02-2485-01A-01D-0784-01,  TCGA-06-0151-01A-01D-0236-01</li>
+        <li>Explicit sample list - TCGA-06-0168-01A-02D-0236-01, TCGA-02-0115-01A-01D-0193-01,
+            TCGA-02-2485-01A-01D-0784-01, TCGA-06-0151-01A-01D-0236-01
+        </li>
         <li>No index</li>
         <li>Index with no visibiliy window (loads by whole chromosome)</li>
         <li>Index with visibility window of 100 MB</li>
@@ -30,63 +29,63 @@ <h1>Segmented Copy Number</h1>
 
 <div id="igv-div" style="padding-top: 10px;padding-bottom: 10px; border:1px solid lightgray"></div>
 
-<script type="text/javascript">
-
-    document.addEventListener("DOMContentLoaded", function () {
-
-        const version = igv.version()
-        console.log("Using IGV version: " + version)
-
-        const igvDiv = document.getElementById("igv-div")
-        const options =
-            {
-                genome: "hg19",
-                showSampleNames: true,
-                tracks: [
-                    {
-                        name: "Explicit Samples",
-                        type: "seg",
-                        format: "seg",
-                        samples: [
-                            "TCGA-06-0168-01A-02D-0236-01",
-                            "TCGA-02-0115-01A-01D-0193-01",
-                            "TCGA-02-2485-01A-01D-0784-01",
-                            "TCGA-06-0151-01A-01D-0236-01"],
-                        url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
-                        height: 100
-                    },
-                    {
-                        name: "Segmented Copy Number",
-                        type: "seg",
-                        format: "seg",
-                        url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
-                    },
-
-
-                    {
-                        name: "Indexed",
-                        type: "seg",
-                        format: "seg",
-                        url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
-                        indexURL: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz.tbi"
-                    },
-                    {
-                        name: "Indexed with visibility window",
-                        type: "seg",
-                        format: "seg",
-                        url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
-                        indexURL: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz.tbi",
-                        visibilityWindow: "100000000"
-                    },
-                ]
-            }
-
-
-        igv.createBrowser(igvDiv, options)
-            .then(function (browser) {
-                console.log("Created IGV browser")
-            })
-    })
+<script type="module">
+
+    import igv from "../dist/igv.esm.min.js"
+
+    const version = igv.version()
+    console.log("Using IGV version: " + version)
+
+    const igvDiv = document.getElementById("igv-div")
+    const options =
+        {
+            genome: "hg19",
+            showSampleNames: true,
+            tracks: [
+                {
+                    name: "Explicit Samples",
+                    type: "seg",
+                    format: "seg",
+                    samples: [
+                        "TCGA-06-0168-01A-02D-0236-01",
+                        "TCGA-02-0115-01A-01D-0193-01",
+                        "TCGA-02-2485-01A-01D-0784-01",
+                        "TCGA-06-0151-01A-01D-0236-01"],
+                    url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
+                    height: 100
+                },
+                {
+                    name: "Segmented Copy Number",
+                    type: "seg",
+                    format: "seg",
+                    url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
+                },
+
+
+                {
+                    name: "Indexed",
+                    type: "seg",
+                    format: "seg",
+                    url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
+                    indexURL: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz.tbi"
+                },
+                {
+                    name: "Indexed with visibility window",
+                    type: "seg",
+                    format: "seg",
+                    url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
+                    indexURL: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz.tbi",
+                    visibilityWindow: "100000000"
+                },
+            ]
+        }
+
+
+    igv.createBrowser(igvDiv, options)
+        .then(function (browser) {
+            console.log("Created IGV browser")
+        })
+
 
 </script>
 
diff --git a/examples/cram-vcf.html b/examples/cram-vcf.html
index 4feaa696d..d91c1ee09 100644
--- a/examples/cram-vcf.html
+++ b/examples/cram-vcf.html
@@ -6,8 +6,6 @@
     <link href=img/favicon.ico rel="shortcut icon">
     <title>igv.js</title>
 
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
 </head>
 
 <body>
@@ -16,65 +14,65 @@ <h1>VCF variants and CRAM alignments</h1>
 
 <div id="igvDiv" style="padding-top: 10px;padding-bottom: 10px; border:1px solid lightgray"></div>
 
-<script type="text/javascript">
+<script type="module">
 
-    document.addEventListener("DOMContentLoaded", function () {
+    import igv from "../dist/igv.esm.min.js"
 
-        var options =
-            {
-                // Example of fully specifying a reference .  We could alternatively use  "genome: 'hg19'"
-                reference:
+    const options =
+        {
+            // Example of fully specifying a reference .  We could alternatively use  "genome: 'hg19'"
+            reference:
+                {
+                    id: "hg19",
+                    fastaURL: "https://s3.amazonaws.com/igv.broadinstitute.org/genomes/seq/1kg_v37/human_g1k_v37_decoy.fasta",
+                    cytobandURL: "https://s3.amazonaws.com/igv.broadinstitute.org/genomes/seq/b37/b37_cytoband.txt"
+                },
+            locus: "8:128,750,948-128,751,025",
+            tracks:
+                [
                     {
-                        id: "hg19",
-                        fastaURL: "https://s3.amazonaws.com/igv.broadinstitute.org/genomes/seq/1kg_v37/human_g1k_v37_decoy.fasta",
-                        cytobandURL: "https://s3.amazonaws.com/igv.broadinstitute.org/genomes/seq/b37/b37_cytoband.txt"
+                        name: "Phase 3 WGS variants",
+                        type: "variant",
+                        format: "vcf",
+                        url: "https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz",
+                        indexURL: "https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz.tbi"
                     },
-                locus: "8:128,750,948-128,751,025",
-                tracks:
-                    [
-                        {
-                            name: "Phase 3 WGS variants",
-                            type: "variant",
-                            format: "vcf",
-                            url: "https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz",
-                            indexURL: "https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz.tbi"
-                        },
-                        {
-                            type: 'alignment',
-                            format: 'cram',
-                            url: 'https://s3.amazonaws.com/1000genomes/phase3/data/HG00096/exome_alignment/HG00096.mapped.ILLUMINA.bwa.GBR.exome.20120522.bam.cram',
-                            indexURL: 'https://s3.amazonaws.com/1000genomes/phase3/data/HG00096/exome_alignment/HG00096.mapped.ILLUMINA.bwa.GBR.exome.20120522.bam.cram.crai',
-                            name: 'HG00096',
-                            sort: {
-                                chr: "chr8",
-                                position: 128750986,
-                                option: "BASE",
-                                direction: "ASC"
-                            },
-                            height: 600
+                    {
+                        type: 'alignment',
+                        format: 'cram',
+                        url: 'https://s3.amazonaws.com/1000genomes/phase3/data/HG00096/exome_alignment/HG00096.mapped.ILLUMINA.bwa.GBR.exome.20120522.bam.cram',
+                        indexURL: 'https://s3.amazonaws.com/1000genomes/phase3/data/HG00096/exome_alignment/HG00096.mapped.ILLUMINA.bwa.GBR.exome.20120522.bam.cram.crai',
+                        name: 'HG00096',
+                        sort: {
+                            chr: "chr8",
+                            position: 128750986,
+                            option: "BASE",
+                            direction: "ASC"
                         },
+                        height: 600
+                    },
+
+                    {
+                        name: "Genes",
+                        type: "annotation",
+                        format: "bed",
+                        url: "https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/refGene.hg19.bed.gz",
+                        indexURL: "https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/refGene.hg19.bed.gz.tbi",
+                        order: Number.MAX_VALUE,
+                        visibilityWindow: 300000000,
+                        displayMode: "EXPANDED"
+                    }
+                ]
 
-                        {
-                            name: "Genes",
-                            type: "annotation",
-                            format: "bed",
-                            url: "https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/refGene.hg19.bed.gz",
-                            indexURL: "https://s3.amazonaws.com/igv.broadinstitute.org/annotations/hg19/genes/refGene.hg19.bed.gz.tbi",
-                            order: Number.MAX_VALUE,
-                            visibilityWindow: 300000000,
-                            displayMode: "EXPANDED"
-                        }
-                    ]
+        }
 
-            };
+    var igvDiv = document.getElementById("igvDiv")
 
-        var igvDiv = document.getElementById("igvDiv");
+    igv.createBrowser(igvDiv, options)
+        .then(function (browser) {
+            console.log("Created IGV browser")
+        })
 
-        igv.createBrowser(igvDiv, options)
-            .then(function (browser) {
-                console.log("Created IGV browser");
-            })
-    })
 </script>
 
 </body>
diff --git a/examples/custom-reader.html b/examples/custom-reader.html
index 6d1666c90..a859e552d 100644
--- a/examples/custom-reader.html
+++ b/examples/custom-reader.html
@@ -6,8 +6,6 @@
     <link href=img/favicon.ico rel="shortcut icon">
     <title>igv.js</title>
 
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
 </head>
 
 <body>
@@ -42,7 +40,9 @@ <h1>Custom Reader Example</h1>
 
 <div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
 
-<script type="text/javascript">
+<script type="module">
+
+    import igv from "../dist/igv.esm.min.js"
 
     document.addEventListener("DOMContentLoaded", function () {
 
diff --git a/examples/custom-webservice.html b/examples/custom-webservice.html
index cb299fbda..999528355 100644
--- a/examples/custom-webservice.html
+++ b/examples/custom-webservice.html
@@ -6,16 +6,14 @@
     <link href=img/favicon.ico rel="shortcut icon">
     <title>igv.js</title>
 
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
 </head>
 
 <body>
 
 <h1>Custom Web Service Examples</h1>
 <p>These examples illustrate configuring a custom web service to fetch features for a track.
-<p>(1) In the first example we configure a simple web service that fetches bed records defining cytobads.  This service
-requires no parameter manipulation or result mapping.  Track configuration:
+<p>(1) In the first example we configure a simple web service that fetches bed records defining cytobads. This service
+    requires no parameter manipulation or result mapping. Track configuration:
 <pre>
          {
             name: "Cytobands",
@@ -31,10 +29,11 @@ <h1>Custom Web Service Examples</h1>
 <div id="igvDiv1" style="padding-top: 50px;padding-bottom: 50px; height: auto; border:1px solid lightgray"></div>
 
 <hr/>
-<p>(2) In the second example we configure configure a  <a href="https://www.cbioportal.org/api/swagger-ui.html">cBio web service</a> to
-    fetch copy number segments.  This service uses a combination of query and POST parameters to specify the requested
-    segments.  The source url is a function which checks and modifies the input chr name to conform to the
-    webservice requirements.  The returned json properties must be mapped to conform to igv.js expectations.  This
+<p>(2) In the second example we configure configure a <a href="https://www.cbioportal.org/api/swagger-ui.html">cBio web
+    service</a> to
+    fetch copy number segments. This service uses a combination of query and POST parameters to specify the requested
+    segments. The source url is a function which checks and modifies the input chr name to conform to the
+    webservice requirements. The returned json properties must be mapped to conform to igv.js expectations. This
     is specified in the "mapping" object.
 
     Track configuration:
@@ -66,79 +65,77 @@ <h1>Custom Web Service Examples</h1>
 <div id="igvDiv2" style="padding-top: 50px;padding-bottom: 20px; height: auto; border:1px solid lightgray"></div>
 
 
-<script type="text/javascript">
+<script type="module">
 
-    document.addEventListener("DOMContentLoaded", function () {
+    import igv from "../dist/igv.esm.min.js"
 
-        // Simple wervice requiring no query parameter or result mappings.
-        const cytobands = {
-            name: "Cytobands",
-            type: "annotation",
-            sourceType: "custom",
-            displayMode: "COLLAPSED",
-            source: {
-                url: "https://lk85l6ycte.execute-api.us-east-1.amazonaws.com/dev/testservice/bands?chr=$CHR&start=$START&end=$END",
-                contentType: "application/json"
-            }
-        }
-
-        const options1 = {
-            genome: "hg38",
-            locus: "chr1",
-            tracks: [
-                cytobands
-            ]
+    // Simple wervice requiring no query parameter or result mappings.
+    const cytobands = {
+        name: "Cytobands",
+        type: "annotation",
+        sourceType: "custom",
+        displayMode: "COLLAPSED",
+        source: {
+            url: "https://lk85l6ycte.execute-api.us-east-1.amazonaws.com/dev/testservice/bands?chr=$CHR&start=$START&end=$END",
+            contentType: "application/json"
         }
-
-        igv.createBrowser(document.getElementById("igvDiv1"), options1)
-            .then(function (browser) {
-            })
-
-
-        // Example using cBio web service - https://www.cbioportal.org/api/swagger-ui.html
-        // * "function" option used for url -- transforms chr name if neccessary
-        // * "POST" used to send input parameters
-        // * cBio json objects transformed to igv requirements for seg track using simple mappings.
-
-        const cbio1 = {
-            name: "P101MF copy number",
-            type: "seg",
-            sourceType: "custom",
-            displayMode: "FILL",
-            source: {
-                url: function (options) {
-                    const chr = options.chr.startsWith("chr") ? options.chr.substring(3) : options.chr;
-                    return `https://www.cbioportal.org/api/copy-number-segments/fetch?chromosome=${chr}&projection=SUMMARY`;
-                },
-                method: "POST",
-                contentType: "application/json",
-                body: JSON.stringify([{
-                    sampleId: "PT101MF",
-                    studyId: "sarc_mskcc"
-                }]),
-                mappings: {
-                    chr: "chromosome",
-                    value: "segmentMean",
-                    sampleKey: "uniqueSampleKey",
-                    sample: "sampleId"
-                }
+    }
+
+    const options1 = {
+        genome: "hg38",
+        locus: "chr1",
+        tracks: [
+            cytobands
+        ]
+    }
+
+    igv.createBrowser(document.getElementById("igvDiv1"), options1)
+        .then(function (browser) {
+        })
+
+
+    // Example using cBio web service - https://www.cbioportal.org/api/swagger-ui.html
+    // * "function" option used for url -- transforms chr name if neccessary
+    // * "POST" used to send input parameters
+    // * cBio json objects transformed to igv requirements for seg track using simple mappings.
+
+    const cbio1 = {
+        name: "P101MF copy number",
+        type: "seg",
+        sourceType: "custom",
+        displayMode: "FILL",
+        source: {
+            url: function (options) {
+                const chr = options.chr.startsWith("chr") ? options.chr.substring(3) : options.chr
+                return `https://www.cbioportal.org/api/copy-number-segments/fetch?chromosome=${chr}&projection=SUMMARY`
+            },
+            method: "POST",
+            contentType: "application/json",
+            body: JSON.stringify([{
+                sampleId: "PT101MF",
+                studyId: "sarc_mskcc"
+            }]),
+            mappings: {
+                chr: "chromosome",
+                value: "segmentMean",
+                sampleKey: "uniqueSampleKey",
+                sample: "sampleId"
             }
         }
+    }
 
 
+    const options2 = {
+        genome: "hg38",
+        locus: "chr1",
+        tracks: [
+            cbio1
+        ]
+    }
 
-        const options2 = {
-            genome: "hg38",
-            locus: "chr1",
-            tracks: [
-                cbio1
-            ]
-        }
-
-        igv.createBrowser(document.getElementById("igvDiv2"), options2)
-            .then(function (browser) {
-            })
-    })
+    igv.createBrowser(document.getElementById("igvDiv2"), options2)
+        .then(function (browser) {
+        })
 
 </script>
 
diff --git a/examples/customSearchService.html b/examples/customSearchService.html
index ecf1d801d..d580542bd 100644
--- a/examples/customSearchService.html
+++ b/examples/customSearchService.html
@@ -6,8 +6,6 @@
     <link href=img/favicon.ico rel="shortcut icon">
     <title>igv.js</title>
 
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
 </head>
 
 <body>
@@ -15,7 +13,8 @@
 <h1>Custom search service example</h1>
 <h4>This example configures a search object as described
     <a href="https://github.com/igvteam/igv.js/wiki/Browser-Creation#search-object-details">here</a>
-    to use the Ensembl web service to provide annotation search capability for Macaca Fasciularis.  To test search for  'OLIG3'
+    to use the Ensembl web service to provide annotation search capability for Macaca Fasciularis. To test search for
+    'OLIG3'
 </h4>
 
 Configuration object:
@@ -29,40 +28,39 @@ <h4>This example configures a search object as described
 
 <div id="igv-div" style="margin-top: 50px;padding-top:10px; padding-bottom: 10px; border:1px solid lightgray"></div>
 
-<script type="text/javascript">
+<script type="module">
 
-    document.addEventListener("DOMContentLoaded", function () {
+    import igv from "../dist/igv.esm.min.js"
 
-        const igvDiv = document.getElementById("igv-div");
-        const options =
-            {
-                search: {
-                    url: 'https://rest.ensembl.org/lookup/symbol/macaca_fascicularis/$FEATURE$?content-type=application/json',
-                    chromosomeField: 'seq_region_name',
-                    displayName: 'display_name'
-                },
-                reference: {
-                    id: "Macaca_fascicularis_5.0",
-                    fastaURL: "https://s3.amazonaws.com/igv.org.genomes/Macaca_fascicularis_5.0/Macaca_fascicularis.Macaca_fascicularis_5.0.dna.toplevel.fa",
-                    indexURL: "https://s3.amazonaws.com/igv.org.genomes/Macaca_fascicularis_5.0/Macaca_fascicularis.Macaca_fascicularis_5.0.dna.toplevel.fa.fai"
-                },
-                tracks: [
-                    {
-                        name: "Annotations",
-                        type: "annotation",
-                        format: "gtf",
-                        url: 'https://s3.amazonaws.com/igv.org.genomes/Macaca_fascicularis_5.0/Macaca_fascicularis.Macaca_fascicularis_5.0.100.gtf.gz',
-                        indexURL: 'https://s3.amazonaws.com/igv.org.genomes/Macaca_fascicularis_5.0/Macaca_fascicularis.Macaca_fascicularis_5.0.100.gtf.gz.tbi',
-                    }
-                ]
-            };
+    const igvDiv = document.getElementById("igv-div")
+    const options =
+        {
+            search: {
+                url: 'https://rest.ensembl.org/lookup/symbol/macaca_fascicularis/$FEATURE$?content-type=application/json',
+                chromosomeField: 'seq_region_name',
+                displayName: 'display_name'
+            },
+            reference: {
+                id: "Macaca_fascicularis_5.0",
+                fastaURL: "https://s3.amazonaws.com/igv.org.genomes/Macaca_fascicularis_5.0/Macaca_fascicularis.Macaca_fascicularis_5.0.dna.toplevel.fa",
+                indexURL: "https://s3.amazonaws.com/igv.org.genomes/Macaca_fascicularis_5.0/Macaca_fascicularis.Macaca_fascicularis_5.0.dna.toplevel.fa.fai"
+            },
+            tracks: [
+                {
+                    name: "Annotations",
+                    type: "annotation",
+                    format: "gtf",
+                    url: 'https://s3.amazonaws.com/igv.org.genomes/Macaca_fascicularis_5.0/Macaca_fascicularis.Macaca_fascicularis_5.0.100.gtf.gz',
+                    indexURL: 'https://s3.amazonaws.com/igv.org.genomes/Macaca_fascicularis_5.0/Macaca_fascicularis.Macaca_fascicularis_5.0.100.gtf.gz.tbi',
+                }
+            ]
+        }
 
 
-        igv.createBrowser(igvDiv, options)
-            .then(function (browser) {
-                console.log("Created IGV browser");
-            })
-    })
+    igv.createBrowser(igvDiv, options)
+        .then(function (browser) {
+            console.log("Created IGV browser")
+        })
 
 </script>
 
diff --git a/examples/events/custom-track-click.html b/examples/events/custom-track-click.html
index a86086657..d8a981cae 100644
--- a/examples/events/custom-track-click.html
+++ b/examples/events/custom-track-click.html
@@ -31,9 +31,6 @@
             integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
             crossorigin="anonymous"></script>
 
-    <!-- IGV JS-->
-    <script src="../../dist/igv.min.js"></script>
-
 </head>
 
 <body>
@@ -67,44 +64,44 @@ <h4>Selected Genes</h4>
 
 </main>
 
-<script type="text/javascript">
+<script type="module">
 
-    $(document).ready(function () {
+    import igv from "../dist/igv.esm.min.js"
 
-       var options =
+    var options =
         {
             showNavigation: true,
             locus: "chr1:155,160,475-155,184,282",
             genome: "hg19",
 
-        };
+        }
+
+    var igv_custom_track_click = $('#igv-custom-track-click')
 
-        var igv_custom_track_click = $('#igv-custom-track-click');
+    igv.createBrowser(igv_custom_track_click.get(0), options)
 
-        igv.createBrowser(igv_custom_track_click.get(0), options)
+        .then(function (browser) {
 
-                .then(function (browser) {
+            var genesInList = {}
 
-                    var genesInList = {};
+            browser.on('trackclick', function (track, popoverData) {
+                var symbol = null
+                popoverData.forEach(function (nameValue) {
+                    if (nameValue.name && nameValue.name.toLowerCase() === 'name') {
+                        symbol = nameValue.value
+                    }
+                })
 
-                    browser.on('trackclick', function (track, popoverData) {
-                        var symbol = null;
-                        popoverData.forEach(function (nameValue) {
-                            if (nameValue.name && nameValue.name.toLowerCase() === 'name') {
-                                symbol = nameValue.value;
-                            }
-                        });
+                if (symbol && !genesInList[symbol]) {
+                    genesInList[symbol] = true
+                    $("#geneList").append('<li><a href="https://uswest.ensembl.org/Multi/Search/Results?q=' + symbol + '">' + symbol + '</a></li>')
+                }
 
-                        if (symbol && !genesInList[symbol]) {
-                            genesInList[symbol] = true;
-                            $("#geneList").append('<li><a href="https://uswest.ensembl.org/Multi/Search/Results?q=' + symbol + '">' + symbol + '</a></li>');
-                        }
+                // Prevent default pop-over behavior
+                return false
+            })
+        })
 
-                        // Prevent default pop-over behavior
-                        return false;
-                    });
-                });
-    });
 
 </script>
 
diff --git a/examples/functional-url.html b/examples/functional-url.html
index fd7b853a6..d89199fbe 100644
--- a/examples/functional-url.html
+++ b/examples/functional-url.html
@@ -6,8 +6,6 @@
     <link href=img/favicon.ico rel="shortcut icon">
     <title>igv.js</title>
 
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
 </head>
 
 <body>
@@ -16,77 +14,87 @@ <h1>Functional URLs</h1>
 
 This example illustrates various options for specifying a track url
 <ul>
-    <li>A string <pre>url: "https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig"</pre></li>
-    <li>A function<pre>url: function () {return "https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig"}</pre></li>
-    <li>A promise<pre>url: Promise.resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")</pre></li>
-    <li>A function that returns a promise <pre>url: function () {return Promise.resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")}</pre></li>
-    <li>A function that returns a thenable <pre>url: function () {return {then: function (resolve, reject) {
+    <li>A string
+        <pre>url: "https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig"</pre>
+    </li>
+    <li>A function
+        <pre>url: function () {return "https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig"}</pre>
+    </li>
+    <li>A promise
+        <pre>url: Promise.resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")</pre>
+    </li>
+    <li>A function that returns a promise
+        <pre>url: function () {return Promise.resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")}</pre>
+    </li>
+    <li>A function that returns a thenable
+        <pre>url: function () {return {then: function (resolve, reject) {
                                     resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")
                                 }
                             }
-                        }</pre></li>
+                        }</pre>
+    </li>
 </ul>
 
 <div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
 
-<script type="text/javascript">
+<script type="module">
 
-    document.addEventListener("DOMContentLoaded", function () {
+    import igv from "../dist/igv.esm.min.js"
 
-        const options =
-            {
-                genome: "hg19",
-                tracks: [
-                    {
-                        name: "CTCF - string url",
-                        type: "wig",
-                        format: "bigwig",
-                        url: "https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig"
-                    },
-                    {
-                        name: "CTCF - function url ",
-                        type: "wig",
-                        format: "bigwig",
-                        url: function () {
-                            return "https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig"
-                        }
-                    },
-                    {
-                        name: "CTCF - promise url",
-                        type: "wig",
-                        format: "bigwig",
-                        url: Promise.resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")
-                    },
-                    {
-                        name: "CTCF - function that returns promise url",
-                        type: "wig",
-                        format: "bigwig",
-                        url: function () {
-                            return Promise.resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")
-                        }
-                    },
-                    {
-                        name: "CTCF - function that returns thenable ",
-                        type: "wig",
-                        format: "bigwig",
-                        url: function () {
-                            return {
-                                then: function (resolve, reject) {
-                                    resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")
-                                }
+    const options =
+        {
+            genome: "hg19",
+            tracks: [
+                {
+                    name: "CTCF - string url",
+                    type: "wig",
+                    format: "bigwig",
+                    url: "https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig"
+                },
+                {
+                    name: "CTCF - function url ",
+                    type: "wig",
+                    format: "bigwig",
+                    url: function () {
+                        return "https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig"
+                    }
+                },
+                {
+                    name: "CTCF - promise url",
+                    type: "wig",
+                    format: "bigwig",
+                    url: Promise.resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")
+                },
+                {
+                    name: "CTCF - function that returns promise url",
+                    type: "wig",
+                    format: "bigwig",
+                    url: function () {
+                        return Promise.resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")
+                    }
+                },
+                {
+                    name: "CTCF - function that returns thenable ",
+                    type: "wig",
+                    format: "bigwig",
+                    url: function () {
+                        return {
+                            then: function (resolve, reject) {
+                                resolve("https://www.encodeproject.org/files/ENCFF563PAW/@@download/ENCFF563PAW.bigWig")
                             }
                         }
                     }
-                ]
-            }
+                }
+            ]
+        }
+
+    const igvDiv = document.getElementById("igvDiv")
 
-        const igvDiv = document.getElementById("igvDiv");
+    igv.createBrowser(igvDiv, options)
+        .then(function (browser) {
+            console.log("Created IGV browser")
+        })
 
-        igv.createBrowser(igvDiv, options)
-            .then(function (browser) {
-                console.log("Created IGV browser");
-            })
-    })
 
 </script>
 
diff --git a/examples/gff-colors.html b/examples/gff-colors.html
index c02f5041a..a820310ce 100644
--- a/examples/gff-colors.html
+++ b/examples/gff-colors.html
@@ -4,8 +4,6 @@
     <link href="https://igv.org/web/img/favicon.ico" rel="shortcut icon">
     <title>igv.js</title>
 
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
 
 </head>
 
@@ -16,17 +14,18 @@ <h4>
     <ol>
         <li>color by attribute (column 9)</li>
         <li>color by source (column 2)</li>
-        <li>color by source with color table </li>
+        <li>color by source with color table</li>
         <li>color by strand</li>
     </ol>
 </h4>
 
 <div id="igvDiv" style="padding-top: 10px;padding-bottom: 10px; border:1px solid lightgray"></div>
 
-<script>
+<script type="module">
 
+    import igv from "../dist/igv.esm.min.js"
 
-    var options =
+    const options =
         {
             genome: "hg38",
             locus: "chr22:21,913,513-22,216,565",
@@ -123,7 +122,7 @@ <h4>
                 ]
         }
 
-    var igvDiv = document.getElementById("igvDiv");
+    var igvDiv = document.getElementById("igvDiv")
 
     igv.createBrowser(igvDiv, options)
         .then(function (browser) {
@@ -132,7 +131,8 @@ <h4>
 
 </script>
 
-<p><pre>
+<p>
+<pre>
         var options =
         {
             genome: "hg38",
@@ -229,7 +229,8 @@ <h4>
                     }
                 ]
         }
-</pre></p>
+</pre>
+</p>
 
 </body>
 
diff --git a/examples/igvjs.html b/examples/igvjs.html
index cdcb5b1d3..a962ba4e6 100644
--- a/examples/igvjs.html
+++ b/examples/igvjs.html
@@ -10,34 +10,29 @@
 
     <title>IGV</title>
 
-    <!-- IGV JS-->
-    <script type="application/javascript" src="../dist/igv.min.js"></script>
 
 </head>
 
 <body>
 
 <div id="myDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto">
-    <h1>Blank browser to demonstrate loading igv sessions and files from html links.  See igv-links.html</h1>
+    <h1>Blank browser to demonstrate loading igv sessions and files from html links. See igv-links.html</h1>
 </div>
 
-<script type="text/javascript">
+<script type="module">
 
-    document.addEventListener("DOMContentLoaded", function () {
+    import igv from "../dist/igv.esm.min.js"
 
-        var div = document.getElementById("myDiv");
+    const div = document.getElementById("myDiv")
 
-        igv
-                .createBrowser(div, {
-                    genome: "hg19",
-                    queryParametersSupported: true
-                })
-                .then(function (browser) {
-                    console.log("Browser ready");
-                })
-
-
-    })
+    igv
+        .createBrowser(div, {
+            genome: "hg19",
+            queryParametersSupported: true
+        })
+        .then(function (browser) {
+            console.log("Browser ready")
+        })
 
 
 </script>
diff --git a/examples/interact.html b/examples/interact.html
index 2491af053..bfa363279 100644
--- a/examples/interact.html
+++ b/examples/interact.html
@@ -6,8 +6,6 @@
     <link href=img/favicon.ico rel="shortcut icon">
     <title>Interact</title>
 
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
 
 </head>
 
@@ -23,101 +21,101 @@ <h2>Interact tracks from UCSC interact and bigInteract files.</h2>
 
 <div id="igvDiv2" style="padding-top: 20px;padding-bottom: 20px; height: auto"></div>
 
-<script type="text/javascript">
-
-    document.addEventListener("DOMContentLoaded", function () {
-
-        // BEDPE examples
-        const options =
-            {
-                reference: {
-                    "id": "hg19",
-                    "name": "Human (CRCh37/hg19)",
-                    "fastaURL": "https://s3.dualstack.us-east-1.amazonaws.com/igv.broadinstitute.org/genomes/seq/hg19/hg19.fasta",
-                    "indexURL": "https://s3.dualstack.us-east-1.amazonaws.com/igv.broadinstitute.org/genomes/seq/hg19/hg19.fasta.fai",
-                    "cytobandURL": "https://s3.dualstack.us-east-1.amazonaws.com/igv.broadinstitute.org/genomes/seq/hg19/cytoBand.txt"
+<script type="module">
+
+    import igv from "../dist/igv.esm.min.js"
+
+    // BEDPE examples
+    const options =
+        {
+            reference: {
+                "id": "hg19",
+                "name": "Human (CRCh37/hg19)",
+                "fastaURL": "https://s3.dualstack.us-east-1.amazonaws.com/igv.broadinstitute.org/genomes/seq/hg19/hg19.fasta",
+                "indexURL": "https://s3.dualstack.us-east-1.amazonaws.com/igv.broadinstitute.org/genomes/seq/hg19/hg19.fasta.fai",
+                "cytobandURL": "https://s3.dualstack.us-east-1.amazonaws.com/igv.broadinstitute.org/genomes/seq/hg19/cytoBand.txt"
+            },
+            locus: "chr2:65,222,853-65,826,902",
+            tracks: [
+                {
+                    url: "https://s3.amazonaws.com/igv.org.demo/GSM1872886_GM12878_CTCF_PET.bedpe.txt",
+                    type: "interact",
+                    format: "bedpe",
+                    name: "bedpe - proportional",
+                    arcType: "proportional",
+                    color: "rgb(0,200,0)",
+                    alpha: "0.05",
+                    logScale: true,
+                    showBlocks: true,
+                    max: 80,
+                    visibilityWindow: 10000000,
+                    height: 100
+                },
+                {
+                    "name": "GM12878 CTCF ",
+                    "url": "https://www.encodeproject.org/files/ENCFF000ARJ/@@download/ENCFF000ARJ.bigWig",
+                    "format": "bigwig",
+                    "type": "wig",
+                    "color": "black",
+                    "height": 50,
                 },
-                locus: "chr2:65,222,853-65,826,902",
-                tracks: [
-                    {
-                        url: "https://s3.amazonaws.com/igv.org.demo/GSM1872886_GM12878_CTCF_PET.bedpe.txt",
-                        type: "interact",
-                        format: "bedpe",
-                        name: "bedpe - proportional",
-                        arcType: "proportional",
-                        color: "rgb(0,200,0)",
-                        alpha: "0.05",
-                        logScale: true,
-                        showBlocks: true,
-                        max: 80,
-                        visibilityWindow: 10000000,
-                        height: 100
-                    },
-                    {
-                        "name": "GM12878 CTCF ",
-                        "url": "https://www.encodeproject.org/files/ENCFF000ARJ/@@download/ENCFF000ARJ.bigWig",
-                        "format": "bigwig",
-                        "type": "wig",
-                        "color": "black",
-                        "height": 50,
-                    },
-                    {
-                        url: "https://s3.amazonaws.com/igv.org.demo/GSM1872886_GM12878_CTCF_PET.bedpe.txt",
-                        type: "interact",
-                        format: "bedpe",
-                        name: "bedpe - nested",
-                        arcType: "nested",
-                        arcOrientation: false,
-                        color: "blue",
-                        showBlocks: true,
-                        visibilityWindow: 10000000,
-                        height: 100
-                    }
-                ]
-            };
-
-        igv.createBrowser(document.getElementById("igvDiv"), options);
-
-        // UCSC interact format examples
-        const options2 =
-            {
-                genome: "hg19",
-                locus: "chr3:63,712,533-64,693,448",
-                tracks: [
-                    {
-                        url: "https://s3.amazonaws.com/igv.org.demo/interactExample2.txt",
-                        type: "interact",
-                        format: "interact",
-                        name: "UCSC Example 2 - nested arcs, useScore",
-                        arcType: "nested",
-                        useScore: true,
-                        showBlocks: true,
-                        height: 75
-                    },
-                    {
-                        url: "https://s3.amazonaws.com/igv.org.demo/interactExample2.txt",
-                        type: "interaction",
-                        format: "interact",
-                        name: "UCSC Example 2 - proportional arcs",
-                        arcType: "proportional",
-                        showBlocks: true,
-                        height: 75
-                    },
-                    {
-                        url: "https://s3.amazonaws.com/igv.org.demo/interactExample3.inter.bb",
-                        type: "interact",
-                        format: "bb",
-                        name: "UCSC Example 3 - bigInteract",
-                        arcType: "nested",
-                        useScore: true,
-                        showBlocks: true,
-                        height: 100
-                    }
-                ]
-            }
-
-        igv.createBrowser(document.getElementById("igvDiv2"), options2);
-    })
+                {
+                    url: "https://s3.amazonaws.com/igv.org.demo/GSM1872886_GM12878_CTCF_PET.bedpe.txt",
+                    type: "interact",
+                    format: "bedpe",
+                    name: "bedpe - nested",
+                    arcType: "nested",
+                    arcOrientation: false,
+                    color: "blue",
+                    showBlocks: true,
+                    visibilityWindow: 10000000,
+                    height: 100
+                }
+            ]
+        }
+
+    igv.createBrowser(document.getElementById("igvDiv"), options)
+
+    // UCSC interact format examples
+    const options2 =
+        {
+            genome: "hg19",
+            locus: "chr3:63,712,533-64,693,448",
+            tracks: [
+                {
+                    url: "https://s3.amazonaws.com/igv.org.demo/interactExample2.txt",
+                    type: "interact",
+                    format: "interact",
+                    name: "UCSC Example 2 - nested arcs, useScore",
+                    arcType: "nested",
+                    useScore: true,
+                    showBlocks: true,
+                    height: 75
+                },
+                {
+                    url: "https://s3.amazonaws.com/igv.org.demo/interactExample2.txt",
+                    type: "interaction",
+                    format: "interact",
+                    name: "UCSC Example 2 - proportional arcs",
+                    arcType: "proportional",
+                    showBlocks: true,
+                    height: 75
+                },
+                {
+                    url: "https://s3.amazonaws.com/igv.org.demo/interactExample3.inter.bb",
+                    type: "interact",
+                    format: "bb",
+                    name: "UCSC Example 3 - bigInteract",
+                    arcType: "nested",
+                    useScore: true,
+                    showBlocks: true,
+                    height: 100
+                }
+            ]
+        }
+
+    igv.createBrowser(document.getElementById("igvDiv2"), options2)
+
 
 </script>
 
diff --git a/examples/json-features.html b/examples/json-features.html
index 02cb3ab8e..61d14d562 100644
--- a/examples/json-features.html
+++ b/examples/json-features.html
@@ -5,9 +5,6 @@
     <meta content="Jim Robinson" name="author">
     <link href=img/favicon.ico rel="shortcut icon">
     <title>igv.js</title>
-
-    <!-- IGV JS-->
-    <script src="../dist/igv.min.js"></script>
 </head>
 
 <body>
@@ -90,90 +87,89 @@ <h4>Tracks configuration:</h4>
 
 </pre>
 
-<script type="text/javascript">
-
-
-    document.addEventListener("DOMContentLoaded", function () {
-
-        var igvDiv = document.getElementById("igvDiv");
-        var options =
-            {
-                genome: "hg19",
-                locus: 'chr1:629,422-16,522,294',
-                tracks:
-                    [
-                        {
-                            name: "Copy number",
-                            type: "seg",
-                            displayMode: "EXPANDED",
-                            features: [
-                                {
-                                    "chr": "1",
-                                    "start": 3218610,
-                                    "end": 4749076,
-                                    "value": -0.2239,
-                                    "sample": "TCGA-OR-A5J2-01"
-                                },
-                                {
-                                    "chr": "1",
-                                    "start": 4750119,
-                                    "end": 11347492,
-                                    "value": -0.8391,
-                                    "sample": "TCGA-OR-A5J2-01"
-                                }
-                            ]
-                        },
-                        {
-                            name: "Annotations",
-                            type: "annotation",
-                            displayMode: "EXPANDED",
-                            features: [
-                                {
-                                    "chr": "1",
-                                    "start": 3218610,
-                                    "end": 4749076,
-                                    "value": -0.2239,
-                                    "color": "blue",
-                                    "name": "Blue"
-                                },
-                                {
-                                    "chr": "1",
-                                    "start": 4750119,
-                                    "end": 11347492,
-                                    "value": -0.8391,
-                                    "color": "green",
-                                    "name": "Green"
-                                }
-                            ]
-                        },
-                        {
-                            name: "Wig",
-                            type: "wig",
-                            displayMode: "EXPANDED",
-                            features: [
-                                {
-                                    "chr": "1",
-                                    "start": 3218610,
-                                    "end": 4749076,
-                                    "value": -0.2239
-                                },
-                                {
-                                    "chr": "1",
-                                    "start": 4750119,
-                                    "end": 11347492,
-                                    "value": -0.8391
-                                }
-                            ]
-                        },
-                    ]
-            }
-
-
-        igv.createBrowser(igvDiv, options)
-            .then(function (browser) {
-                console.log("Created IGV browser");
-            })
-    })
+<script type="module">
+
+    import igv from "../dist/igv.esm.min.js"
+
+    var igvDiv = document.getElementById("igvDiv")
+    var options =
+        {
+            genome: "hg19",
+            locus: 'chr1:629,422-16,522,294',
+            tracks:
+                [
+                    {
+                        name: "Copy number",
+                        type: "seg",
+                        displayMode: "EXPANDED",
+                        features: [
+                            {
+                                "chr": "1",
+                                "start": 3218610,
+                                "end": 4749076,
+                                "value": -0.2239,
+                                "sample": "TCGA-OR-A5J2-01"
+                            },
+                            {
+                                "chr": "1",
+                                "start": 4750119,
+                                "end": 11347492,
+                                "value": -0.8391,
+                                "sample": "TCGA-OR-A5J2-01"
+                            }
+                        ]
+                    },
+                    {
+                        name: "Annotations",
+                        type: "annotation",
+                        displayMode: "EXPANDED",
+                        features: [
+                            {
+                                "chr": "1",
+                                "start": 3218610,
+                                "end": 4749076,
+                                "value": -0.2239,
+                                "color": "blue",
+                                "name": "Blue"
+                            },
+                            {
+                                "chr": "1",
+                                "start": 4750119,
+                                "end": 11347492,
+                                "value": -0.8391,
+                                "color": "green",
+                                "name": "Green"
+                            }
+                        ]
+                    },
+                    {
+                        name: "Wig",
+                        type: "wig",
+                        displayMode: "EXPANDED",
+                        features: [
+                            {
+                                "chr": "1",
+                                "start": 3218610,
+                                "end": 4749076,
+                                "value": -0.2239
+                            },
+                            {
+                                "chr": "1",
+                                "start": 4750119,
+                                "end": 11347492,
+                                "value": -0.8391
+                            }
+                        ]
+                    },
+                ]
+        }
+
+
+    igv.createBrowser(igvDiv, options)
+        .then(function (browser) {
+            console.log("Created IGV browser")
+        })
+
 
 </script>
 
diff --git a/examples/loadTracks.html b/examples/loadTracks.html
index 55a0bcdd1..fe274aaab 100755
--- a/examples/loadTracks.html
+++ b/examples/loadTracks.html
@@ -24,8 +24,6 @@
             integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
             crossorigin="anonymous"></script>
 
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
 
 </head>
 
@@ -95,16 +93,16 @@
 <main role="main" class="container-fluid">
     <div style="padding-top: 64px">
         This example illustrates use of the igv.js API to dynamically add tracks from a dropdown
-            menu. Selecting 'CopyNumber' in the menu above results in the following call.
-            <p>
-                <pre>
+        menu. Selecting 'CopyNumber' in the menu above results in the following call.
+        <p>
+        <pre>
                 igv.browser.loadTrack({
                     url: 'https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz',
                     name: 'GBM Copy # (TCGA Broad GDAC)'})
                 </pre>
-            </p>
-            See the
-            <a href="https://github.com/igvteam/igv.js/wiki">developer wiki for more details.</a>
+        </p>
+        See the
+        <a href="https://github.com/igvteam/igv.js/wiki">developer wiki for more details.</a>
 
     </div>
 
@@ -113,25 +111,24 @@
 
 </main>
 
-<script type="text/javascript">
+<script type="module">
 
-    document.addEventListener("DOMContentLoaded", function () {
+    import igv from "../dist/igv.esm.min.js"
 
-        const options =
-            {
-                locus: "chr1:155,160,475-155,184,282",
-                genome: "hg19"
-            };
+    const options =
+        {
+            locus: "chr1:155,160,475-155,184,282",
+            genome: "hg19"
+        }
 
-        const igvDiv = document.getElementById('igvDiv');
+    const igvDiv = document.getElementById('igvDiv')
 
-        igv.createBrowser(igvDiv, options)
-            .then(function (browser) {
-                igv.browser = browser;
-                console.log("Created IGV browser");
-            })
+    igv.createBrowser(igvDiv, options)
+        .then(function (browser) {
+            igv.browser = browser
+            console.log("Created IGV browser")
+        })
 
-    });
 
 </script>
 
diff --git a/examples/maf-tcga.html b/examples/maf-tcga.html
index 6f4b0c61e..255354628 100644
--- a/examples/maf-tcga.html
+++ b/examples/maf-tcga.html
@@ -19,7 +19,7 @@ <h1>MAF file example</h1>
 <script type="module">
 
     //import igv from "https://cdn.jsdelivr.net/npm/igv@2.8.0/dist/igv.esm.min.js";
-    import igv from "../dist/igv.esm.js";
+    import igv from "../dist/igv.esm.js"
 
     (async function () {
 
@@ -39,13 +39,13 @@ <h1>MAF file example</h1>
                 ]
             }
 
-        const igvDiv = document.getElementById("igvDiv");
+        const igvDiv = document.getElementById("igvDiv")
 
         igv.createBrowser(igvDiv, options)
             .then(function (browser) {
-                console.log("Created IGV browser");
+                console.log("Created IGV browser")
             })
-    })();
+    })()
 
 </script>
 
diff --git a/examples/multi-locus.html b/examples/multi-locus.html
index 8947cd85e..b0f1ec18b 100644
--- a/examples/multi-locus.html
+++ b/examples/multi-locus.html
@@ -35,10 +35,10 @@ <h1>Multiple Genome Regions</h1>
                     }
 
                 ]
-            };
+            }
 
         const browser = await igv.createBrowser(document.getElementById('igv-div'), options)
-        console.log(`${ browser.guid } is good to go`)
+        console.log(`${browser.guid} is good to go`)
 
     })()
 
diff --git a/examples/quick-start.html b/examples/quick-start.html
index 57248235e..065ebbbd9 100644
--- a/examples/quick-start.html
+++ b/examples/quick-start.html
@@ -9,7 +9,7 @@
 
 <script type="module">
 
-    import igv from "https://cdn.jsdelivr.net/npm/igv@2.13.7/dist/igv.esm.min.js"
+    import igv from "../dist/igv.esm.min.js"
 
     const config = {
         reference: "hg38",
diff --git a/examples/roi.html b/examples/roi.html
index 30153f55c..22b708ace 100644
--- a/examples/roi.html
+++ b/examples/roi.html
@@ -5,10 +5,6 @@
     <meta content="Jim Robinson" name="author">
     <link href=img/favicon.ico rel="shortcut icon">
     <title>igv.js</title>
-
-    <!-- IGV JS-->
-    <script src="../dist/igv.min.js"></script>
-
 </head>
 <body>
 
@@ -16,48 +12,47 @@
 
 </div>
 
-<script type="text/javascript">
-
-    document.addEventListener("DOMContentLoaded", function () {
-
-        var igvDiv = document.getElementById("myDiv");
-
-        var options = {
-
-            locus: '1:67,655,272-67,684,468',
-            flanking: 1000,
-            genome: "hg19",
-
-            // Define 2 "region of interest" sets, the first is global, the second specific to the track
-            roi: [
-                {
-                    name: 'ROI set 1',
-                    url: 'https://s3.amazonaws.com/igv.org.test/data/roi/roi_bed_1.bed',
-                    indexed: false,
-                    color: "rgba(68, 134, 247, 0.25)"
-                }
-            ],
-            tracks: [
-                {
-                    name: 'Some features',
-                    url: 'https://s3.amazonaws.com/igv.org.test/data/roi/some_features.bed',
+<script type="module">
+
+    import igv from "../dist/igv.esm.min.js"
+
+    const igvDiv = document.getElementById("myDiv")
+
+    const options = {
+
+        locus: '1:67,655,272-67,684,468',
+        flanking: 1000,
+        genome: "hg19",
+
+        // Define 2 "region of interest" sets, the first is global, the second specific to the track
+        roi: [
+            {
+                name: 'ROI set 1',
+                url: 'https://s3.amazonaws.com/igv.org.test/data/roi/roi_bed_1.bed',
+                indexed: false,
+                color: "rgba(68, 134, 247, 0.25)"
+            }
+        ],
+        tracks: [
+            {
+                name: 'Some features',
+                url: 'https://s3.amazonaws.com/igv.org.test/data/roi/some_features.bed',
+                indexed: false,
+                roi: [{
+                    name: 'ROI set 2',
+                    url: 'https://s3.amazonaws.com/igv.org.test/data/roi/roi_bed_2.bed',
                     indexed: false,
-                    roi: [{
-                        name: 'ROI set 2',
-                        url: 'https://s3.amazonaws.com/igv.org.test/data/roi/roi_bed_2.bed',
-                        indexed: false,
-                        color: "rgba(0, 150, 50, 0.25)"
-                    }]
-                }
-            ]
-        };
+                    color: "rgba(0, 150, 50, 0.25)"
+                }]
+            }
+        ]
+    }
 
-        igv.createBrowser(igvDiv, options)
-                .then(function (browser) {
-                    console.log("Created IGV browser");
-                })
+    igv.createBrowser(igvDiv, options)
+        .then(function (browser) {
+            console.log("Created IGV browser")
+        })
 
-    })
 
 </script>
 
diff --git a/examples/tabs.html b/examples/tabs.html
index 4cd4a192e..a0709e036 100644
--- a/examples/tabs.html
+++ b/examples/tabs.html
@@ -8,9 +8,6 @@
     <link href=img/favicon.ico rel="shortcut icon">
     <title>igv.js</title>
 
-    <!-- IGV JS-->
-    <script src="../dist/igv.min.js"></script>
-
     <style type="text/css">
         body {
             font-size: 80%;
@@ -81,17 +78,19 @@ <h1>IGV tabs example</h1>
     <div id="igvDiv"></div>
 </div>
 
-<script type="text/javascript">
+<script type="module">
+
+    import igv from "../dist/igv.esm.min.js"
 
     document.addEventListener("DOMContentLoaded", function () {
-        initTabs();
-        initIGV();
-    });
+        initTabs()
+        initIGV()
+    })
 
     function initIGV() {
 
-        var igvDiv, options;
-        igvDiv = document.getElementById("igvDiv");
+        var igvDiv, options
+        igvDiv = document.getElementById("igvDiv")
         options =
             {
                 locus: "AQP4",
@@ -107,75 +106,75 @@ <h1>IGV tabs example</h1>
 
                 ]
 
-            };
-        igv.createBrowser(igvDiv, options);
+            }
+        igv.createBrowser(igvDiv, options)
     }
 
     function initTabs() {
 
-        var tabs = [];
+        var tabs = []
 
         // Grab the tab links and content divs from the page
         var liItems = Array.from(document.getElementById('tabs').childNodes).filter(function (item) {
             return item.nodeName === 'LI'
-        });
+        })
 
         var tabLinks = liItems.map(function (li) {
-            return getFirstChildWithTagName(li, 'A');
+            return getFirstChildWithTagName(li, 'A')
         })
 
         tabLinks.forEach(function (tabLink) {
-            tabLink.onclick = showTab;
+            tabLink.onclick = showTab
             tabLink.onfocus = function () {
                 this.blur()
-            };
-            var id = getHash(tabLink.getAttribute('href'));
-            var contentDiv = document.getElementById(id);
+            }
+            var id = getHash(tabLink.getAttribute('href'))
+            var contentDiv = document.getElementById(id)
             tabs.push({
                 id: id,
                 link: tabLink,
                 content: contentDiv
-            });
+            })
         })
 
-        tabs[0].content.className = 'tabContent';
-        tabs[0].link.className = 'selected';
+        tabs[0].content.className = 'tabContent'
+        tabs[0].link.className = 'selected'
         for (var i = 1; i < tabs.length; i++) {
-            tabs[i].link.className = '';
+            tabs[i].link.className = ''
             tabs[i].content.className = 'tabContent hide'
         }
 
         function showTab() {
 
-            var selectedId = getHash(this.getAttribute('href'));
+            var selectedId = getHash(this.getAttribute('href'))
 
             tabs.forEach(function (tab) {
 
                 if (tab.id === selectedId) {
-                    tab.link.className = 'selected';
-                    tab.content.className = 'tabContent';
+                    tab.link.className = 'selected'
+                    tab.content.className = 'tabContent'
                 } else {
-                    tab.link.className = '';
-                    tab.content.className = 'tabContent hide';
+                    tab.link.className = ''
+                    tab.content.className = 'tabContent hide'
                 }
-            });
+            })
 
-            igv.visibilityChange();
+            igv.visibilityChange()
 
             // Stop the browser following the link
-            return false;
+            return false
         }
 
 
         function getFirstChildWithTagName(element, tagName) {
             for (var i = 0; i < element.childNodes.length; i++) {
-                if (element.childNodes[i].nodeName === tagName) return element.childNodes[i];
+                if (element.childNodes[i].nodeName === tagName) return element.childNodes[i]
             }
         }
 
         function getHash(url) {
-            var hashPos = url.lastIndexOf('#');
-            return url.substring(hashPos + 1);
+            var hashPos = url.lastIndexOf('#')
+            return url.substring(hashPos + 1)
         }
     }
 
diff --git a/examples/variant-colors.html b/examples/variant-colors.html
index ee6a66277..9a5269c5f 100644
--- a/examples/variant-colors.html
+++ b/examples/variant-colors.html
@@ -6,10 +6,6 @@
     <meta charset="utf-8">
     <link href="https://igv.org/web/img/favicon.ico" rel="shortcut icon">
     <title>igv.js</title>
-
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
-
 </head>
 
 <body>
@@ -28,70 +24,72 @@ <h4>
 <div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
 
 
-<script>
+<script type="module">
 
-    function drawTrianglerect(context, x, y, w, h){
-      let n=Math.floor(w/h)
-      let p = (w % h)/2
+    import igv from "../dist/igv.esm.min.js"
 
-      context.clearRect(x, y, w, h)
-      context.fillRect(x,y,w,h/2)
+    function drawTrianglerect(context, x, y, w, h) {
+        let n = Math.floor(w / h)
+        let p = (w % h) / 2
 
-      for (var i = 0; i < n; i++) {
-         drawTriangle(context, p+x+(i)*h, y, h, h)
-      }
+        context.clearRect(x, y, w, h)
+        context.fillRect(x, y, w, h / 2)
+
+        for (var i = 0; i < n; i++) {
+            drawTriangle(context, p + x + (i) * h, y, h, h)
+        }
 
     }
 
-    function drawTriangle(context, x, y, w, h){
-      // context.clearRect(x, y, w, h)
+    function drawTriangle(context, x, y, w, h) {
+        // context.clearRect(x, y, w, h)
 
-      context.beginPath()
-      context.moveTo(x, y)
-      context.lineTo(x+w/2, y+h)
-      context.lineTo(x+w, y)
-      context.closePath()
-      context.fill()
+        context.beginPath()
+        context.moveTo(x, y)
+        context.lineTo(x + w / 2, y + h)
+        context.lineTo(x + w, y)
+        context.closePath()
+        context.fill()
     }
 
-    function drawCirclerect(context, x, y, w, h){
-      let n=Math.floor(w/h)
-      let p = (w % h)/2
+    function drawCirclerect(context, x, y, w, h) {
+        let n = Math.floor(w / h)
+        let p = (w % h) / 2
 
-      context.clearRect(x, y, w, h)
-      context.fillRect(x,y,w,h/2)
+        context.clearRect(x, y, w, h)
+        context.fillRect(x, y, w, h / 2)
 
-      for (var i = 0; i < n; i++) {
-         drawCircle(context, p+x+(i)*h, y, h, h)
-      }
+        for (var i = 0; i < n; i++) {
+            drawCircle(context, p + x + (i) * h, y, h, h)
+        }
 
     }
 
 
-    function drawCircle(context, x, y, w, h){
-      // context.clearRect(x, y, w, h)
+    function drawCircle(context, x, y, w, h) {
+        // context.clearRect(x, y, w, h)
 
-      context.beginPath()
-      context.arc(x+w/2, y+h/2, h/2, 0, 2 * Math.PI);
-      context.fill()
+        context.beginPath()
+        context.arc(x + w / 2, y + h / 2, h / 2, 0, 2 * Math.PI)
+        context.fill()
     }
 
-    function drawRoundrect(context, x, y, w, h){
-      let radius = 5;
-      context.clearRect(x, y, w, h);
-      context.beginPath()
-      context.moveTo(x + radius, y)
-      context.lineTo(x + w - radius, y)
-      context.quadraticCurveTo(x + w, y, x + w, y + radius)
-      context.lineTo(x + w, y + h - radius)
-      context.quadraticCurveTo(x + w, y + h, x + w - radius, y + h)
-      context.lineTo(x + radius, y + h)
-      context.quadraticCurveTo(x, y + h, x, y + h - radius)
-      context.lineTo(x, y + radius)
-      context.quadraticCurveTo(x, y, x + radius, y)
-      context.closePath()
-      // context.stroke()
-      context.fill()
+    function drawRoundrect(context, x, y, w, h) {
+        let radius = 5
+        context.clearRect(x, y, w, h)
+        context.beginPath()
+        context.moveTo(x + radius, y)
+        context.lineTo(x + w - radius, y)
+        context.quadraticCurveTo(x + w, y, x + w, y + radius)
+        context.lineTo(x + w, y + h - radius)
+        context.quadraticCurveTo(x + w, y + h, x + w - radius, y + h)
+        context.lineTo(x + radius, y + h)
+        context.quadraticCurveTo(x, y + h, x, y + h - radius)
+        context.lineTo(x, y + radius)
+        context.quadraticCurveTo(x, y, x + radius, y)
+        context.closePath()
+        // context.stroke()
+        context.fill()
     }
 
     const options =
@@ -105,22 +103,22 @@ <h4>
                     name: "Color by function, SVTYPE",
                     visibilityWindow: -1,
                     color: function (variant) {
-                        const svtype = variant.info["SVTYPE"];
+                        const svtype = variant.info["SVTYPE"]
                         switch (svtype) {
                             case 'DEL':
-                                return "#ff2101";
+                                return "#ff2101"
                             case 'INS':
-                                return "#001888";
+                                return "#001888"
                             case 'DUP':
-                                return "#028401";
+                                return "#028401"
                             case 'INV':
-                                return "#008688";
+                                return "#008688"
                             case 'CNV':
-                                return "#8931ff";
+                                return "#8931ff"
                             case 'BND':
-                                return "#891100";
+                                return "#891100"
                             default:
-                                return "#002eff";
+                                return "#002eff"
                         }
                     }
                 },
@@ -186,13 +184,13 @@ <h4>
             ]
         }
 
-    const igvDiv = document.getElementById("igvDiv");
+    const igvDiv = document.getElementById("igvDiv")
 
     igv.createBrowser(igvDiv, options)
 
         .then(function (browser) {
 
-        });
+        })
 
 </script>
 
diff --git a/examples/variant-custom-draw.html b/examples/variant-custom-draw.html
index 8e67ff19e..d92928be1 100644
--- a/examples/variant-custom-draw.html
+++ b/examples/variant-custom-draw.html
@@ -6,10 +6,6 @@
     <meta charset="utf-8">
     <link href="https://igv.org/web/img/favicon.ico" rel="shortcut icon">
     <title>igv.js</title>
-
-    <!-- IGV JS -->
-    <script src="../dist/igv.min.js"></script>
-
 </head>
 
 <body>
@@ -28,7 +24,9 @@ <h4>
 <div id="igvDiv" style="padding-top: 50px;padding-bottom: 20px; height: auto"></div>
 
 
-<script>
+<script type="module">
+
+    import igv from "../dist/igv.esm.min.js"
 
     function drawTrianglerect(context, x, y, w, h){
       let n=Math.floor(w/h)
diff --git a/js/version.js b/js/version.js
index b5fd3f73d..90511d73f 100644
--- a/js/version.js
+++ b/js/version.js
@@ -1,4 +1,4 @@
-const _version = "2.14.0"
+const _version = "2.15.0"
 function version() {
     return _version
 }
diff --git a/package.json b/package.json
index 7ea96fb05..0ed4ede13 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "igv",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "main": "dist/igv.esm.js",
   "browser": "dist/igv.js",
   "module": "dist/igv.esm.js",
