diff --git a/templates/jsx/energy-flow/energy-flow-example.jsx b/templates/jsx/energy-flow/energy-flow-example.jsx
new file mode 100644
index 0000000..a313cf8
--- /dev/null
+++ b/templates/jsx/energy-flow/energy-flow-example.jsx
@@ -0,0 +1,19 @@
+---
+label: energy-flow voorbeeld
+description: Energie-flow visualisatie
+type: energy-flow
+author: maik
+---
+
+import React from 'react';
+
+export default function EnergyFlowTemplate({ data }) {
+  const { grid = 0, pv = 0, battery = 0 } = data ?? {};
+  return (
+    <div className="widget-flow">
+      <span className={grid > 0 ? 'import' : 'export'}>{Math.abs(grid).toFixed(0)}W</span>
+      <span>{pv.toFixed(0)}W ☀</span>
+      <span>{battery.toFixed(0)}W 🔋</span>
+    </div>
+  );
+}