diff --git a/README.md b/README.md
index 85f1322..f58b606 100644
--- a/README.md
+++ b/README.md
@@ -46,11 +46,13 @@ To scroll the container horizontally, use the mouse wheel + <kbd>Shift</kbd> key
 <div id="nr-flow-1" class="flow-renderer" style="height: 300px"></div>
 ```
 
-```javascript
-const renderer = new FlowRenderer()
-const container1 = document.getElementById('nr-flow-1');
-const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
-renderer.renderFlows(flow, { container: container1 })
+```html
+<script type="module">
+  const renderer = new FlowRenderer()
+  const container1 = document.getElementById('nr-flow-1');
+  const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
+  renderer.renderFlows(flow, { container: container1 })
+</script>
 ```
 
 ### Inline Options example
@@ -72,11 +74,13 @@ NOTE: To SET and option, the data attribute can simply be present on the contain
 ></div>
 ```
 
-```javascript
-const renderer = new FlowRenderer()
-const container2 = document.getElementById('nr-flow-2');
-const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
-renderer.renderFlows(flow, { container: container2 })
+```html
+<script type="module">
+  const renderer = new FlowRenderer()
+  const container2 = document.getElementById('nr-flow-2');
+  const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
+  renderer.renderFlows(flow, { container: container2 })
+</script>
 ```