diff --git a/examples/templates/example.html b/examples/templates/example.html
index 496e1eb8cf..145aee08b9 100644
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -181,8 +181,7 @@
 
       <div class="row-fluid">
         <h5 class="source-heading">main.js</h5>
-        <pre><code id="example-js-source" class="language-js">import 'ol/ol.css';
-{{ js.source }}</code></pre>
+        <pre><code id="example-js-source" class="language-js">{{ js.source }}</code></pre>
       </div>
 
       <div class="row-fluid">
@@ -198,6 +197,7 @@
     &lt;script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"&gt;&lt;/script&gt;
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"&gt;&lt;/script&gt;{{#if extraHead.remote}}
 {{ indent extraHead.remote spaces=4 }}{{/if}}
+    &lt;link rel="stylesheet" href="node_modules/ol/ol.css"&gt;
     &lt;style&gt;
       .map {
         width: 100%;
@@ -206,7 +206,7 @@
 {{#if css.source}}{{ indent css.source spaces=6 }}{{/if}}    &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
-{{ indent contents spaces=4 }}    &lt;script src="main.js"&gt;&lt;/script&gt;
+{{ indent contents spaces=4 }}    &lt;script type="module" src="main.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
 &lt;/html&gt;</code></pre>
       </div>