wokwi
diff --git a/‎demo/src/index.html‎
Lines changed: 4 additions & 1 deletion b/‎demo/src/index.html‎
Lines changed: 4 additions & 1 deletion
diff --git a/‎demo/src/index.ts‎
Lines changed: 4 additions & 6 deletions b/‎demo/src/index.ts‎
Lines changed: 4 additions & 6 deletions
diff --git a/‎demo/src/led.ts‎
Lines changed: 0 additions & 101 deletions b/‎demo/src/led.ts‎
Lines changed: 0 additions & 101 deletions
diff --git a/‎package-lock.json‎
Lines changed: 24 additions & 0 deletions b/‎package-lock.json‎
Lines changed: 24 additions & 0 deletions
diff --git a/‎package.json‎
Lines changed: 1 addition & 0 deletions b/‎package.json‎
Lines changed: 1 addition & 0 deletions
@@ -10,7 +10,10 @@
   <body>
     <h2>AVR8js LED Demo</h2>
     <div class="app-container">
-      <div class="leds"></div>
+      <div class="leds">
+        <wokwi-led color="green"></wokwi-led>
+        <wokwi-led color="red"></wokwi-led>
+      </div>
       <div class="toolbar">
         <button id="run-button">Run</button>
         <button id="stop-button" disabled>Stop</button>
 
@@ -1,9 +1,10 @@
+import '@wokwi/elements';
 import { buildHex } from './compile';
 import { AVRRunner } from './execute';
 import { formatTime } from './format-time';
 import './index.css';
-import { LED } from './led';
 import { CPUPerformance } from './cpu-performance';
+import { LEDElement } from '@wokwi/elements';
 
 let editor: any;
 const BLINK_CODE = `
@@ -38,11 +39,8 @@ window.require(['vs/editor/editor.main'], () => {
 });
 
 // Set up LEDs
-const leds = document.querySelector('.leds');
-const led13 = new LED({ color: 'green', lightColor: '#80ff80' });
-const led12 = new LED({ color: 'red', lightColor: '#ff8080' });
-leds.appendChild(led13.el);
-leds.appendChild(led12.el);
+const led13 = document.querySelector<LEDElement>('wokwi-led[color=green]');
+const led12 = document.querySelector<LEDElement>('wokwi-led[color=red]');
 
 // Set up toolbar
 let runner: AVRRunner;
 
@@ -24,6 +24,7 @@
     "@types/jest": "^24.0.23",
     "@types/node": "^12.12.7",
     "@types/prettier": "^1.19.0",
+    "@wokwi/elements": "^0.1.0",
     "husky": "^3.0.9",
     "jest": "^24.9.0",
     "lint-staged": "^9.4.2",