koosoli
diff --git a/‎README.md‎
Lines changed: 37 additions & 5 deletions b/‎README.md‎
Lines changed: 37 additions & 5 deletions
diff --git a/‎custom_components/reterminal_dashboard/frontend/editor.html‎
Lines changed: 68 additions & 24 deletions b/‎custom_components/reterminal_dashboard/frontend/editor.html‎
Lines changed: 68 additions & 24 deletions
@@ -1,6 +1,14 @@
 # ESPHome Designer
 
-**A visual drag-and-drop editor for ESPHome displays (E-Ink, OLED, LCD, Touch), running right inside Home Assistant.**
+**A visual drag-and-drop editor for ESPHome displays (E-Ink, OLED, LCD, Touch), running as a Home Assistant integration or a standalone web app.**
+
+<div align="center">
+  <a href="https://github.com/sponsors/koosoli">
+    <img src="https://img.shields.io/badge/Sponsor-❤️-ff69b4?style=for-the-badge&logo=github-sponsors" alt="Sponsor Project">
+  </a>
+  <br>
+  <strong>If you find this project useful, consider <a href="https://github.com/sponsors/koosoli">supporting its development!</a></strong>
+</div>
 
 <div align="center">
   <a href="https://youtu.be/3AVGze6F_5o">
@@ -10,8 +18,11 @@
   <a href="https://youtu.be/3AVGze6F_5o">
     <img src="https://img.shields.io/badge/YouTube-Watch%20v0.8.0%20Overview-red?style=for-the-badge&logo=youtube&logoColor=white" alt="Watch Video">
   </a>
+  <a href="https://koosoli.github.io/ESPHomeDesigner/">
+    <img src="https://img.shields.io/badge/Live%20Demo-Try%20it%20now-blue?style=for-the-badge&logo=google-chrome&logoColor=white" alt="Live Demo">
+  </a>
   <br>
-  <strong>▶️ Click to watch the latest feature walkthrough</strong>
+  <strong>▶️ Click to watch the latest feature walkthrough or try the demo!</strong>
 </div>
 
 **No more hand-coding ESPHome display lambdas! 🎉**
@@ -24,7 +35,7 @@
 
 Building a custom smart display for Home Assistant? Frustrated with manually writing C++ lambdas and guessing coordinates?
 
-Design ESPHome displays right inside Home Assistant. This HACS integration offers a drag-and-drop editor with direct access to your sensor library via an intuitive entity picker.
+Design ESPHome displays right inside Home Assistant or via a standalone web browser. While available as a HACS integration, you can also use the [GitHub-hosted version](https://koosoli.github.io/ESPHomeDesigner/) with a Long-Lived Access Token to access your entities.
 
 It enables you to build premium, touch-interactive dashboards for various ESP32-based devices (like the Seeed reTerminal, TRMNL, standard touch screens, and more) without writing a single line of display code.
 
@@ -42,7 +53,16 @@ It enables you to build premium, touch-interactive dashboards for various ESP32-
 
 ## Quick Start
 
-### 1. Install via HACS (Recommended)
+### 1. Try the Live Web Version (Easiest)
+
+You can use the designer without installing anything! 
+
+1. Go to [koosoli.github.io/ESPHomeDesigner/](https://koosoli.github.io/ESPHomeDesigner/)
+2. Open **Editor Settings** (gear icon)
+3. Enter your Home Assistant URL and a **Long-Lived Access Token** (created in your HA profile)
+4. Add the designer URL to your HA `cors_allowed_origins` (see below)
+
+### 2. Install via HACS (Recommended for Local Access)
 
 1. Add `https://github.com/koosoli/ESPHomeDesigner` to HACS as a custom repository
 2. Search for "ESPHome Designer" and install
@@ -97,6 +117,17 @@ Once flashed, your device will come online.
 2. Your device should be discovered (or you can add it via the ESPHome integration).
 3. **Configure it** to ensure Home Assistant connects to its API.
 
+### 🌐 Standalone / GitHub Hosting & CORS
+If you are using the GitHub-hosted version or any URL that is not your local Home Assistant IP, you **must** allow cross-origin requests.
+
+Add this to your Home Assistant `configuration.yaml` and **restart**:
+
+```yaml
+http:
+  cors_allowed_origins:
+    - https://koosoli.github.io
+```
+
 ### Philosophy: Design here, Automate there.
 
 Think of this tool as the **Frontend Designer** for your physical display.
@@ -165,7 +196,7 @@ For stable results, stick to **Native Mode** (standard widgets without LVGL pref
 - **Power & Battery Management** - Monitoring, deep sleep support, and configurable refresh intervals
 - **Modern Canvas Interaction** - Zoom with the mouse wheel and pan with the middle mouse button
 - **Drag & Drop Workflow** - Drag widgets directly from the sidebar onto the canvas
-- **Modular Hardware Profiles** - Support for loading hardware profiles from external YAML packages
+- **Modular Hardware Profiles** - Support for loading hardware profiles from external YAML packages ([Learn how to write your own](hardware_recipes_guide.md))
 - **Experimental LVGL Support** - (Beta) Support for interactive LVGL widgets on capable devices
 - **Mobile Support** - Responsive UI designed to work on smaller screens and touch devices
 
@@ -212,6 +243,7 @@ All exposed as Home Assistant entities for use in automations.
   - `frontend/editor.html` - Visual drag-and-drop editor UI
 - `esphome/reterminal_e1001_lambda.yaml` - Hardware template with step-by-step instructions
 - `font_ttf/font_ttf/materialdesignicons-webfont.ttf` - Icon font for widgets
+- `hardware_recipes_guide.md` - Guide for creating custom hardware profiles
 - `screenshots/` - Editor screenshots
 
 ## Troubleshooting
 
@@ -14,13 +14,14 @@
     rel="stylesheet">
 
   <link rel="stylesheet" href="editor.css">
+  <link rel="icon" href="data:,">
 </head>
 
 <body>
   <header class="main-header">
     <div class="main-header-title">
       <h2><span class="logo-dot"></span> ESPHome Designer</h2>
-      <span>Visual YAML Editor <small style="opacity: 0.5; margin-left: 8px;">v0.8</small> <span
+      <span>Visual YAML Editor <small style="opacity: 0.5; margin-left: 8px;">v0.8.1</small> <span
           id="currentLayoutDevice" style="margin-left:8px; color:var(--accent);"></span></span>
     </div>
     <div class="main-header-actions desktop-only">
@@ -484,7 +485,11 @@ <h2><span class="logo-dot"></span> ESPHome Designer</h2>
           </div>
           <strong id="currentLayoutName">Loading...</strong>
         </div>
-        <button id="saveLayoutBtn" class="btn btn-secondary btn-full">Save Project</button>
+        <div style="display: flex; gap: 4px;">
+          <button id="saveLayoutBtn" class="btn btn-secondary" style="flex: 1;">Save Project</button>
+          <button id="importProjectBtn" class="btn btn-secondary" style="flex: 1;">Import Project</button>
+        </div>
+        <input type="file" id="loadLayoutBtn" accept=".json" style="display:none;" />
         <button id="manageLayoutsBtn" class="btn btn-secondary btn-full" style="margin-top: 4px;">📁 Layout
           Manager</button>
       </div>
@@ -617,6 +622,18 @@ <h2><span class="logo-dot"></span> ESPHome Designer</h2>
             <option value="dark">Always Dark</option>
           </select>
         </div>
+        <div class="field">
+          <div class="prop-label">Layout Mode (LVGL)</div>
+          <select id="pageSettingsLayoutMode" class="prop-input">
+            <option value="absolute">Absolute Positioning</option>
+            <option value="grid">Grid Layout</option>
+          </select>
+          <div id="field-grid-size" style="display:none; margin-top:8px;">
+            <div class="prop-label">Grid Size (RxC)</div>
+            <input id="pageSettingsGridSize" class="prop-input" type="text" placeholder="4x4" pattern="[0-9]+x[0-9]+" />
+            <div style="font-size:10px; color:var(--muted); margin-top:4px;">Format: rows×columns, e.g. 2x3, 4x4</div>
+          </div>
+        </div>
       </div>
       <div class="modal-actions">
         <button id="pageSettingsSave" class="btn btn-secondary">Save Changes</button>
@@ -910,33 +927,60 @@ <h2><span class="logo-dot"></span> ESPHome Designer</h2>
           <span id="editorEntityCount" style="font-size:var(--fs-xs); opacity:0.6; margin-left:8px;"></span>
         </div>
         <div class="field" style="border-top:1px solid var(--border-subtle); padding-top:12px; margin-top:12px;">
-          <div class="prop-label">Keyboard Shortcuts</div>
-          <div style="font-size: var(--fs-xs); color: var(--muted); line-height: 2;">
-            <div><kbd
-                style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Ctrl+Z</kbd>
-              Undo</div>
-            <div><kbd
-                style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Ctrl+Y</kbd>
-              Redo</div>
-            <div><kbd
-                style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Ctrl+C</kbd>
-              Copy widget</div>
-            <div><kbd
-                style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Ctrl+V</kbd>
-              Paste widget</div>
-            <div><kbd
-                style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Delete</kbd>
-              Remove selected widget</div>
-            <div><kbd
-                style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Alt
-                + Drag</kbd> Disable snap guides</div>
+          <span>Home Assistant Connection</span>
+        </div>
+        <div style="font-size:10px; opacity:0.6; margin-bottom:8px;">Configure this if you are using the GitHub-hosted
+          version or an external URL.</div>
+        <div class="field" style="display:flex; flex-direction:column; gap:8px;">
+          <div id="haCorsTip"
+            style="background: rgba(82, 199, 234, 0.1); border-left: 3px solid var(--accent); padding: 10px; border-radius: 4px; font-size: 10px; line-height: 1.4;">
+            <strong>💡 Connection Tip:</strong><br>
+            If requests are blocked, you may need to add <code id="haOriginPlaceholder">http://localhost:8000</code> to
+            <code>cors_allowed_origins</code> in your Home Assistant <code>configuration.yaml</code> and
+            <strong>restart HA</strong>.
+          </div>
+          <div>
+            <div class="prop-label" style="font-size: 10px;">Base URL</div>
+            <input type="text" id="haManualUrl" class="prop-input" placeholder="https://your-ha.duckdns.org:8123" />
+          </div>
+          <div>
+            <div class="prop-label" style="font-size: 10px;">Long-Lived Access Token</div>
+            <input type="password" id="haLlatToken" class="prop-input" placeholder="Paste your token here..." />
+          </div>
+          <div style="display:flex; gap:8px; align-items:center;">
+            <button id="editorTestHaBtn" class="btn btn-secondary btn-xs" style="flex:1;">Test Connection</button>
+            <div id="haTestResult" style="font-size:10px; line-height: 1.2;"></div>
           </div>
         </div>
       </div>
-      <div class="modal-actions">
-        <button id="editorSettingsDone" class="btn btn-secondary">Done</button>
+      <div class="field" style="border-top:1px solid var(--border-subtle); padding-top:12px; margin-top:12px;">
+        <div class="prop-label">Keyboard Shortcuts</div>
+        <div style="font-size: var(--fs-xs); color: var(--muted); line-height: 2;">
+          <div><kbd
+              style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Ctrl+Z</kbd>
+            Undo</div>
+          <div><kbd
+              style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Ctrl+Y</kbd>
+            Redo</div>
+          <div><kbd
+              style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Ctrl+C</kbd>
+            Copy widget</div>
+          <div><kbd
+              style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Ctrl+V</kbd>
+            Paste widget</div>
+          <div><kbd
+              style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Delete</kbd>
+            Remove selected widget</div>
+          <div><kbd
+              style="background:var(--bg-input); padding:2px 6px; border-radius:3px; border:1px solid var(--border-subtle);">Alt
+              + Drag</kbd> Disable snap guides</div>
+        </div>
       </div>
     </div>
+    <div class="modal-actions">
+      <button id="editorSettingsDone" class="btn btn-secondary">Done</button>
+    </div>
+  </div>
   </div>
 
   <!-- Scripts -->