neo.mjs 9.16.0 → 10.0.0-alpha.2

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img height="100"src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/logo/neo_logo_text_primary.svg">
+  <img height="100"src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/logo/neo_logo_text_primary.svg" alt="Neo.mjs Logo">
 </p>
 </br>
 <p align="center">
@@ -11,104 +11,114 @@
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-green.svg?logo=GitHub&logoColor=white" alt="PRs Welcome"></a>
 </p>
 
-# Build Ultra-Fast, Scalable, and Extensible Web Apps :zap:
-:rocket: **Break Free from the Main Thread – Experience True Multi-Threading**
+# Build Ultra-Fast, Desktop-Like Web Apps. Period. :zap:
+🚀 **Break Free from UI Freezes — Experience True Multithreading & Uncompromised Responsiveness.**
 
-Neo.mjs enables the creation of highly dynamic web applications by running everything **inside an App Worker**.
-From components and state providers to view controllers, everything operates within the worker,
-allowing the main thread to focus only on **DOM updates** and **delegating UI events**.
-This ensures **high performance, smooth reactivity**, and **extensibility** for both **multi-window** and **SPA applications**.
+💻 ***Neo.mjs v10 isn't an upgrade — it's a new operating system for the web. Where others optimize at the margins, we reinvented the engine.***
+
+Imagine web applications that never jank, no matter how complex the logic, how many real-time updates they handle, or how
+many browser windows they span. Neo.mjs is engineered from the ground up to deliver **desktop-like fluidity and scalability**.
+**While it excels for Single Page Apps (SPAs), Neo.mjs is simply the best option for browser-based multi-window applications**,
+operating fundamentally different from traditional frameworks.
+
+By leveraging a **pioneering Off-Main-Thread (OMT) architecture**, Neo.mjs ensures your UI remains butter-smooth, even during computationally intensive tasks like complex data processing or advanced graphics rendering. The main thread is kept free for one purpose: **flawless user interactions and seamless DOM updates.**
 
 <p align="center">
-  <a href="https://youtu.be/pYfM28Pz6_0"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo33s.png"></a>
-  <a href="https://youtu.be/aEA5333WiWY"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo-movie.png"></a>
+  <a href="https://youtu.be/pYfM28Pz6_0"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo33s.png" alt="Neo.mjs Performance Demo 1 (YouTube Video)"></a>
+  <a href="https://youtu.be/aEA5333WiWY"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo-movie.png" alt="Neo.mjs Performance Demo 2 (YouTube Video)"></a>
 </p>
 
 </br></br>
-## 🔍 Why Neo.mjs?
-Neo is a worker thread-driven frontend framework designed to create multithreaded GUIs using JavaScript.
-By leveraging the **Off Main Thread (OMT) paradigm**, Neo ensures that your application’s UI remains responsive,
-even during computationally intensive tasks.
-
-Unlike traditional single-threaded frameworks, Neo distributes workloads across multiple threads, unlocking new levels of performance and scalability.
-Whether you’re building a small app or a large-scale enterprise solution, Neo’s architecture grows with your needs.
-
-Key Benefits of Neo.mjs
-1. **Multithreading for Performance**:
-   - Neo’s OMT paradigm moves tasks like data processing, state management, and rendering to worker threads, keeping the main thread free for rendering and user interactions.
-   - This approach eliminates UI freezes and ensures a smooth user experience, even for complex applications.
-2. **Declarative Class Configuration**:
-   - Neo’s class config system allows you to define and manage classes in a clean, reusable way. This reduces boilerplate code and makes your codebase more maintainable.
-   - With declarative configurations, you can focus on building features instead of wrestling with setup and initialization.
-3. **Modular and Scalable Architecture**:
-   - Neo’s modular design makes it easy to build scalable applications. Components are self-contained and reusable, promoting a clean separation of concerns.
-   - Whether you’re building a small app or a large-scale enterprise solution, Neo’s architecture grows with your needs.
-4. **Ease of Use**:
-   - Neo’s intuitive API and comprehensive documentation make it easy to get started, even for developers new to multithreaded programming.
-   - The framework’s design prioritizes developer productivity, allowing you to focus on solving real-world problems.
-5. **Future-Proof Technology**:
-   - Neo is built on modern web standards like JavaScript modules and worker threads, ensuring compatibility with the latest browser features.
-   - By embracing the OMT paradigm, Neo is uniquely positioned to take advantage of future advancements in web development.
-
-## Real-World Applications
-
-Neo is ideal for:
-- **Data-intensive applications**: Handle large datasets and complex calculations without compromising UI responsiveness.
-- **Real-time dashboards**: Build dynamic, real-time dashboards that update seamlessly.
-- **Enterprise solutions**: Scale your application to meet the demands of large organizations.
-
-**Why Choose Neo Over Traditional Frameworks?**
-
-Traditional single-threaded frameworks often struggle with performance bottlenecks, especially when handling complex UIs or large datasets.
-Neo’s **multithreaded architecture** addresses these challenges head-on, delivering a responsive and scalable solution for modern web applications.
-
-With Neo, you get:
-- ✅ **Responsive UIs**: No more UI freezes or janky animations.
-- 🚀 **Scalability**: Build applications that can handle increasing complexity without compromising performance.
-- 💻 **Developer Productivity**: Spend less time optimizing and more time building features.
-  </br></br>
-## 🌟 Key Features
-🎭 **Actor Model**:</br>
-The App Worker acts as the central actor, handling application state and logic, independent of the main thread.
-This drives the OMT (off the main thread) paradigm into perfection,
-since it is keeping the main thread free for non-blocking DOM updates and UI interactions.
-
-<img src="./resources/images/workers-focus.svg">
-
-🔄 **Reactive State Management**:</br>
-Built-in reactivity allows dynamic, efficient updates between components and state providers.
-
-⚡ **Instant JavaScript module based Development Mode**:</br>
-**Zero builds or transpilations** required. Run your app directly in the browser, modify reactive properties in real-time, and see instant updates.
-This gives you an **unmatched debugging experience**, saving time and reducing development costs.
-You can even build **entire apps inside the console** if you wish.
-
-📊 **Hierarchical State Management**:</br>
-Seamlessly manage state between parent and child components with nested state providers.
-Each component binds to the state data from its **closest** provider,
-even combining data from multiple providers inside one binding.
-
-🧩 **Clean Architecture**:</br>
-View controllers ensure a **separation of concerns**, isolating business logic from UI components for easier maintenance and testing.
-
-🌐 **Multi-Window & SPAs**:</br>
-Easily build and manage complex, highly interactive applications that require multiple windows or traditional SPAs.
-No native shell required.
-
-🌀 **Dynamic Component Management**:</br>
-Unmount, move, and remount components across the UI or even in separate browser windows
-— without losing the component’s state or logic. This **runtime flexibility** is a game-changer, **preserving JS instances** while still updating the UI dynamically.
-
-:dependabot: **No npm dependency hell**:</br>
-Neo.mjs apps do not need any dependencies at all, just some dev dependencies for tooling.
+## 🚀 Why Choose Neo.mjs? Solving the Toughest UI Challenges
+Traditional single-threaded frontend frameworks often struggle with performance bottlenecks and UI freezes, especially for
+large-scale, data-intensive, or real-time applications. Neo.mjs offers a fundamentally different solution, designed for
+**uncompromising performance, enhanced security, and superior developer experience.**
+
+1. **Eliminate UI Freezes with True Multithreading**:
+   > *"The browser's main thread should be treated like a neurosurgeon: only perform precise, scheduled operations with zero distractions."*</br></br>
+   — Neo.mjs Core Philosophy
+    
+   Neo.mjs's OMT architecture inherently prevents UI freezes. With v10's optimized rendering pipeline, your UI will remain even *more*
+   consistently responsive, even during intense data processing or complex graphics rendering. It achieves an astonishing
+   rate of **over 40,000 delta updates per second** in optimized environments. This translates to an engine with vast untapped
+   potential, limited only by user interaction, not the framework.
+ 
+2. **Unmatched Developer Experience: Transpilation-Free ESM**:
+   Say goodbye to complex build steps for development. Neo.mjs apps run **natively as ES Modules directly in the browser**.
+   This means **zero builds or transpilations** in dev mode, offering instant reloads and an **unmatched debugging experience**.
+   You modify code, and your app updates in real-time.
+ 
+3. **Inherent Security by Design**:
+   By prioritizing direct DOM API manipulation over string-based methods (like `innerHTML`), Neo.mjs fundamentally reduces
+   the attack surface for vulnerabilities like Cross-Site Scripting (XSS), building a more robust and secure application from the ground up.
+ 
+4. **Declarative, Consistent, & Reusable Architecture**:
+   Neo.mjs's unique **unified class config system** allows you to define components, layouts, and logic in a clean, declarative,
+   and highly consistent way. This significantly reduces boilerplate, improves maintainability, and makes complex UI composition surprisingly straightforward.
+
+5. **Scalability for Enterprise & Beyond**:
+   Whether building sophisticated enterprise dashboards, data-intensive Gen AI interfaces, or desktop-like multi-window applications,
+   Neo.mjs's modular, worker-driven architecture effortlessly scales. Components are persistent, stateful instances that can be unmounted,
+   moved, and even remounted across browser windows without losing their logic or state. This is key to preventing the "re-rendering madness"
+   common in other frameworks.
+
+</br></br>
+## 📊  Real-World Win: Crushing UI Lag in Action
+Imagine a developer building a stock trading app with live feeds updating every millisecond. Traditional frameworks often choke,
+freezing the UI under the data flood. With Neo.mjs, the heavy lifting happens in worker threads, keeping the main thread free.
+Traders get real-time updates with zero lag, and the app feels like a native desktop tool. Now, imagine extending this with
+**multiple synchronized browser windows**, each displaying different real-time views, all remaining butter-smooth.
+That’s Neo.mjs in action—solving problems others can’t touch.
+
+</br></br>
+## 🌟 Key Features (and How They Supercharge Your App)
+
+* **Persistent Component Instances**: Components maintain their state and logic even when their DOM is removed or moved.
+  No more wasteful re-creations – just surgical, efficient updates.
+
+* **Reactive State Management**: Built-in reactivity ensures dynamic, efficient updates between components and state providers,
+  all handled off the main thread.
+
+* **Hierarchical State Management**: Seamlessly manage state between parent and child components with nested state providers.
+  Components intelligently bind to the closest provider, combining data for powerful, maintainable patterns.
+
+* **Clean Architecture (MVVM-inspired)**: View controllers ensure a clear separation of concerns, isolating business logic
+  from UI components for easier maintenance, testing, and team collaboration.
+
+* **Multi-Window & Single-Page Applications (SPAs)**: Easily build and manage complex applications that require multiple
+  browser windows or traditional SPAs, all powered by the same underlying multi-threaded architecture without requiring any native shell.
+
+* **No npm Dependency Hell**: Neo.mjs apps run with **zero runtime dependencies**, just a few dev dependencies for tooling.
+  This means smaller bundles, fewer conflicts, and a simpler dependency graph.
+
+* **Cutting-Edge Use Cases**: Ideal for **data-intensive applications, real-time dashboards, web-based IDEs, banking
+  applications, and complex multi-window Gen AI interfaces** where performance and responsiveness are non-negotiable.
+
+<p align="center">
+  <img src="./resources/images/workers-focus.svg" alt="Neo.mjs Worker Architecture Diagram - Shows Main Thread, App Worker, VDom Worker, Canvas Worker, Data Worker, Service Worker, Backend connections.">
+</p>
+*Diagram: A high-level overview of Neo.mjs's multi-threaded architecture (Main Thread, App Worker, VDom Worker, Canvas Worker, Data Worker, Service Worker, Backend). Optional workers fade in on hover on neomjs.com.*
+
 </br></br>
-## :bulb: Perfect for Complex Use Cases
-Need a **web-based IDE, banking dashboard**, or an **enterprise-grade multi-window app**? Neo.mjs is built for it.
+## 🔍 Neo.mjs vs. The Rest: Key Differentiators
+Wondering how Neo.mjs stacks up against React, Angular, or Vue.js? Here’s the breakdown:
+
+| Feature                   | Neo.mjs                                        | React / Angular / Vue.js                            |
+| :------------------------ | :--------------------------------------------- | :------------------------------------------ |
+| **UI Responsiveness** | **Guaranteed smooth**: Heavy tasks off-main-thread; main thread free for UI. | **Prone to jank**: Main thread handles all logic + UI, easily blocked. |
+| **Multithreading** | Native OMT architecture for core app logic, VDom, data, & graphics. | Single-threaded by default; requires complex workarounds (e.g., Web Workers for *specific* tasks). |
+| **Dev Mode Experience** | **No transpilation, instant reloads**: Native ES Modules directly in browser. | Build tools (Webpack, Babel) required for dev; slower reloads. |
+| **Component Persistence** | State survives DOM changes; instances move across windows. | Full re-renders common; state often lost on unmount unless managed externally. |
+| **Security** | Direct DOM API, inherently XSS-resistant by design. | Relies heavily on careful string sanitization; higher XSS risk if not diligent. |
+| **Multi-Window Apps** | Seamless, browser-native multi-window support. | Complex to achieve; hacky or unsupported natively. |
+| **Bundle Size** | Zero runtime dependencies for lean apps.       | Can be large with many third-party dependencies. |
+
+**Neo.mjs Edge**: True multithreading, a no-build development mode, and a scalable, secure architecture combine to deliver a framework that's faster to build with and fundamentally faster and more stable to run.
 
 </br></br>
-## 📦 Declarative Class Configuration
-Neo’s class config system allows you to define and manage classes in a declarative and reusable way.
-This simplifies class creation, reduces boilerplate code, and improves maintainability.
+## 📦 Declarative Class Configuration: Build Faster, Maintain Easier
+
+Neo.mjs’s class config system allows you to define and manage classes in a declarative and reusable way. This simplifies class creation, reduces boilerplate code, and improves maintainability.
 
 ```javascript
 import Component from '../../src/component/Base.mjs';
@@ -116,65 +126,61 @@ import Component from '../../src/component/Base.mjs';
 class MyComponent extends Component {
     static config = {
         className   : 'MyComponent',
-        myConfig_   : 'defaultValue',
-        domListeners: {
+        myConfig_   : 'defaultValue', // Reactive property
+        domListeners: {               // Direct DOM event binding
             click: 'onClick'
         }
     }
 
+    // Automatically called when myConfig_ changes
     afterSetMyConfig(value, oldValue) {
-       console.log('myConfig changed:', value, oldValue)
+       console.log('myConfig changed:', value, oldValue);
     }
 
+    // Handled in the App Worker, main thread remains free
     onClick(data) {
-        console.log('Clicked!', data)
+        console.log('Clicked!', data);
     }
 }
 
 export default Neo.setupClass(MyComponent);
 ```
-With Neo.mjs’s class config system, you can:
 
-* Define default properties and methods in a clean, structured way.
-* Easily extend and reuse configurations across classes.
-* Keep your codebase organized and scalable.
-
-For more details, check out the <a href="https://neomjs.com/dist/production/apps/portal/index.html#/learn/gettingstarted.Config">Class Config System documentation</a>.
+For more details, check out the [Class Config System documentation](https://neomjs.com/dist/production/apps/portal/index.html#/learn/gettingstarted.Config).
 
 </br></br>
-## 🚀 Get Started
-Quick Start
+## 🚀 Jump In: Your First Neo.mjs App in Minutes
 
-Run the following command in your terminal, and your new Neo app will be created, the local web server will start, and your app will open in a new browser window:
+Run this command:
 
 ```bash
 npx neo-app@latest
 ```
-This one-liner sets up everything you need to start building with Neo, including:
-- A new app workspace.
-- A pre-configured app shell.
-- A local development server.
-- Opening your app inside a new browser window
 
-:book: More details? Check out our <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
+This one-liner sets up everything you need to start building with Neo.mjs, including:
+
+* A new app workspace.
+* A pre-configured app shell.
+* A local development server.
+* Launching your app in a new browser window—all in one go.
 
-:student: Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/gettingstarted.Setup">Learning Section</a>
+:book: More details? Check out our [Getting Started Guide](./.github/GETTING_STARTED.md)
 
-:brain: The most advanced tutorial to help you with getting up to speed is this one:
-<a href="https://neomjs.com/dist/production/apps/portal/#/learn/tutorials.Earthquakes">Earthquakes Tutorial</a>
+:student: Make sure to dive into the [Learning Section](https://neomjs.com/dist/production/apps/portal/#/learn/gettingstarted.Setup)
 
 Next steps:
-* :star: **Explore exciting Examples here**: <a href="https://neomjs.com/dist/production/apps/portal/#/examples">Neo.mjs Examples</a>
-* Many more are included inside the repos <a href="https://github.com/neomjs/neo/tree/dev/apps">apps</a>
-  & <a href="https://github.com/neomjs/neo/tree/dev/examples">examples</a> folders.
-* :blue_book: All Blog Posts are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/blog">Neo.mjs Blog</a>
-  </br></br>
-## :handshake: Join the Community
 
-:speech_balloon: Have questions? Join our <a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA">Slack channel</a> and connect with other developers.
+* :star: **Experience stunning Demos & Examples here**: [Neo.mjs Examples Portal](https://neomjs.com/dist/production/apps/portal/#/examples)
+* Many more are included inside the repos [apps](https://github.com/neomjs/neo/tree/dev/apps)
+  & [examples](https://github.com/neomjs/neo/tree/dev/examples) folders.
+* :blue_book: All Blog Posts are listed here: [Neo.mjs Blog](https://neomjs.com/dist/production/apps/portal/#/blog)
+
+</br></br>
+## :handshake: Join the Community
 
-:hammer_and_wrench: Want to contribute? Check out our <a href="https://github.com/neomjs/neo/blob/dev/CONTRIBUTING.md">Contributing Guide</a>.
+:speech_balloon: Have questions? Join our [Slack channel](https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA) and connect with other developers.
 
+:hammer_and_wrench: Want to contribute? Check out our [Contributing Guide](https://github.com/neomjs/neo/blob/dev/CONTRIBUTING.md).
 
 </br></br>
-Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
+Copyright (c) 2015 - today, [Tobias Uhlig](https://www.linkedin.com/in/tobiasuhlig/)

package/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='9.16.0'
+         * @member {String} version='10.0.0-alpha.2'
          */
-        version: '9.16.0'
+        version: '10.0.0-alpha.2'
     }
 
     /**

package/apps/email/view/Viewport.mjs

@@ -42,13 +42,13 @@ class Viewport extends BaseViewport {
                     iconCls: 'fa fa-home',
                     text   : 'Tab 1'
                 },
-                vdom: {innerHTML: 'Welcome to your new Neo App.'}
+                vdom: {html: 'Welcome to your new Neo App.'}
             }, {
                 header: {
                     iconCls: 'fa fa-play-circle',
                     text   : 'Tab 2'
                 },
-                vdom: {innerHTML: 'Have fun creating something awesome!'}
+                vdom: {html: 'Have fun creating something awesome!'}
             }]
         }]
     }

package/apps/form/view/Viewport.mjs

@@ -29,7 +29,7 @@ class Viewport extends BaseViewport {
 
             items: [{
                 flex: 'none',
-                vdom: {tag: 'h1', innerHTML: 'Nested Forms'}
+                vdom: {tag: 'h1', html: 'Nested Forms'}
             }, {
                 module   : SideNavList,
                 reference: 'side-nav',

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-06-14",
+      "datePublished": "2025-06-18",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/examples/List.mjs

@@ -163,7 +163,7 @@ class List extends BaseList {
     createSourceLink(record) {
         let vdom = {
             tag   : 'a',
-            cls   : ['fab fa-github', 'neo-github-image'],
+            cls   : ['fab', 'fa-github', 'neo-github-image'],
             href  : record.sourceUrl,
             target: '_blank'
         };

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v9.16.0'
+                html  : 'v10.0.0-alpha.2'
             }]
         }],
         /**

package/apps/realworld2/view/HomeContainer.mjs

@@ -60,7 +60,7 @@ class HomeContainer extends Container {
                     cls   : ['neo-examples-tab-component'],
                     header: {iconCls: 'fa fa-user-ninja', text: 'Your Feed'},
                     style : {padding: '20px'},
-                    vdom  : {innerHTML: 'todo'}
+                    vdom  : {html: 'todo'}
                 }, {
                     module: PreviewList,
                     header: {iconCls: 'fa fa-globe-europe', text: 'Global Feed'}

package/apps/route/view/center/CardAdministration.mjs

@@ -17,14 +17,14 @@ class CardAdministration extends Container {
         username_: '',
 
         vdom: {
-            tag: 'h1',
-            innerHTML: 'Access Granted.'
+            tag : 'h1',
+            html: 'Access Granted.'
         }
     }
 
 
     afterSetUsername(value, oldValue) {
-        this.vdom.innerHTML = `Access Granted to ${this.username}.`;
+        this.vdom.html = `Access Granted to ${this.username}.`;
     }
 }
 

package/apps/route/view/center/CardAdministrationDenied.mjs

@@ -15,8 +15,8 @@ class CardAdministrationDenied extends Container {
         baseCls: ['route_card_simple_page','neo-container'],
 
         vdom: {
-            tag: 'h1',
-            innerHTML: 'Access Denied.'
+            tag : 'h1',
+            html: 'Access Denied.'
         }
     }
 }

package/apps/route/view/center/CardContact.mjs

@@ -16,8 +16,8 @@ class CardContact extends Container {
 
         items: [
             { cls : ['route_card_simple_page'], vdom: { cn: [
-                {tag: 'h1',innerHTML: 'Contact' },
-                {tag: 'a',  href: 'https://github.com/neomjs/neo', target: '_blank', innerHTML: 'please visit https://github.com/neomjs/neo'}
+                {tag: 'h1', html: 'Contact' },
+                {tag: 'a',  href: 'https://github.com/neomjs/neo', target: '_blank', html: 'please visit https://github.com/neomjs/neo'}
             ] } }
         ]
     }

package/apps/route/view/center/CardHome.mjs

@@ -15,8 +15,8 @@ class CardHome extends Container {
         baseCls: ['route_card_simple_page','neo-container'],
 
         vdom: {
-            tag: 'h1',
-            innerHTML: 'This is the landing page of the example.'
+            tag : 'h1',
+            html: 'This is the landing page of the example.'
         }
     }
 }

package/apps/route/view/center/CardSection1.mjs

@@ -15,8 +15,8 @@ class CardSection1 extends Container {
         baseCls: ['route_card_simple_page','neo-container'],
 
         vdom: {
-            tag: 'h1',
-            innerHTML: 'This is section 1 of the example.'
+            tag : 'h1',
+            html: 'This is section 1 of the example.'
         }
     }
 }

package/apps/route/view/center/CardSection2.mjs

@@ -15,8 +15,8 @@ class CardSection2 extends Container {
         baseCls: ['route_card_simple_page','neo-container'],
 
         vdom: {
-            tag: 'h1',
-            innerHTML: 'This is section 2 of the example.'
+            tag : 'h1',
+            html: 'This is section 2 of the example.'
         }
 
     }

package/buildScripts/createApp.mjs

@@ -234,13 +234,13 @@ if (programOpts.info) {
             "                    iconCls: 'fa fa-home',",
             "                    text   : 'Tab 1'",
             "                },",
-            "                vdom: {innerHTML: 'Welcome to your new Neo App.'}",
+            "                vdom: {html: 'Welcome to your new Neo App.'}",
             "            }, {",
             "                header: {",
             "                    iconCls: 'fa fa-play-circle',",
             "                    text   : 'Tab 2'",
             "                },",
-            "                vdom: {innerHTML: 'Have fun creating something awesome!'}",
+            "                vdom: {html: 'Have fun creating something awesome!'}",
             "            }]",
             "        }]",
             "    }",

package/docs/app/view/classdetails/HeaderComponent.mjs

@@ -64,12 +64,12 @@ class HeaderComponent extends Component {
             }
         }
 
-        me.vdom.cn[0].innerHTML = singleton ? (className + ' → Singleton') : className;
+        me.vdom.cn[0].html = singleton ? (className + ' → Singleton') : className;
 
         if (record.description) {
             me.vdom.cn.push({
-                cls      : ['neo-docs-header-description'],
-                innerHTML: record.description
+                cls : ['neo-docs-header-description'],
+                html: record.description
             })
         }