diff --git a/packages/examples/.npmrc b/packages/examples/.npmrc
new file mode 100644
index 00000000..4fd02195
--- /dev/null
+++ b/packages/examples/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
\ No newline at end of file
diff --git a/packages/examples/package-lock.json b/packages/examples/package-lock.json
index d4aa4d6e..50d54ecb 100644
--- a/packages/examples/package-lock.json
+++ b/packages/examples/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "liveviewjs": "^0.3.0",
+        "liveviewjs": "file:../../liveviewjs-0.4.0-rc.1.tgz",
         "nanoid": "^3.2.0",
         "node-fetch": "^2.6.7",
         "zod": "^3.14.3"
@@ -1581,13 +1581,18 @@
       }
     },
     "node_modules/liveviewjs": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/liveviewjs/-/liveviewjs-0.3.0.tgz",
-      "integrity": "sha512-M7El1NnF7Ew2awHRU2VHH0U7FfFHelSMDwikeaQPmvNuqg65kcn9ETgw9pmoTr8G0BoDwCGSocSvOrQX7euUDQ==",
+      "version": "0.4.0-rc.1",
+      "resolved": "file:../../liveviewjs-0.4.0-rc.1.tgz",
+      "integrity": "sha512-bbBfqUdzZ5Vhw8D02bbyct2ZSC8dwPAJdq/E7KKcL1XgW5ukvBjPl9eKrYHMDD7tAkjJszMS2N8eORZK4TkYgw==",
+      "license": "MIT",
       "dependencies": {
         "deep-object-diff": "^1.1.7",
         "nanoid": "^3.2.0",
         "zod": "^3.14.3"
+      },
+      "engines": {
+        "node": ">=17.8.0",
+        "npm": ">=8.5.0"
       }
     },
     "node_modules/lowercase-keys": {
@@ -3580,9 +3585,8 @@
       }
     },
     "liveviewjs": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/liveviewjs/-/liveviewjs-0.3.0.tgz",
-      "integrity": "sha512-M7El1NnF7Ew2awHRU2VHH0U7FfFHelSMDwikeaQPmvNuqg65kcn9ETgw9pmoTr8G0BoDwCGSocSvOrQX7euUDQ==",
+      "version": "file:../../liveviewjs-0.4.0-rc.1.tgz",
+      "integrity": "sha512-bbBfqUdzZ5Vhw8D02bbyct2ZSC8dwPAJdq/E7KKcL1XgW5ukvBjPl9eKrYHMDD7tAkjJszMS2N8eORZK4TkYgw==",
       "requires": {
         "deep-object-diff": "^1.1.7",
         "nanoid": "^3.2.0",
diff --git a/packages/examples/package.json b/packages/examples/package.json
index 23b752f5..abbe76e2 100644
--- a/packages/examples/package.json
+++ b/packages/examples/package.json
@@ -35,7 +35,7 @@
   "author": "Donnie Flood <donnie@floodfx.com>",
   "license": "MIT",
   "dependencies": {
-    "liveviewjs": "^0.3.0",
+    "liveviewjs": "file:../../liveviewjs-0.4.0-rc.1.tgz",
     "nanoid": "^3.2.0",
     "node-fetch": "^2.6.7",
     "zod": "^3.14.3"
@@ -60,5 +60,9 @@
     "rollup-plugin-dts": "^4.2.0",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.4"
+  },
+  "engines": {
+    "npm": ">=8.5.0",
+    "node": ">=17.8.0"
   }
 }
diff --git a/packages/examples/src/liveviews/counter/liveView.ts b/packages/examples/src/liveviews/counter/liveView.ts
index 7599be32..3b93879d 100644
--- a/packages/examples/src/liveviews/counter/liveView.ts
+++ b/packages/examples/src/liveviews/counter/liveView.ts
@@ -1,17 +1,12 @@
-import { BaseLiveView, html, LiveViewMeta, LiveViewMountParams, LiveViewSocket, SessionData } from "liveviewjs";
+import { createLiveView, html } from "liveviewjs";
 
-interface Context {
-  count: number;
-}
-
-type Events = { type: "increment" } | { type: "decrement" };
-
-export class CounterLiveView extends BaseLiveView<Context, Events> {
-  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<Context>): void {
+const counterLiveView = createLiveView({
+  mount: (socket) => {
+    // init state, set count to 0
     socket.assign({ count: 0 });
-  }
-
-  handleEvent(event: Events, socket: LiveViewSocket<Context>) {
+  },
+  handleEvent: (event: { type: "increment" } | { type: "decrement" }, socket) => {
+    // handle increment and decrement events
     const { count } = socket.context;
     switch (event.type) {
       case "increment":
@@ -21,9 +16,9 @@ export class CounterLiveView extends BaseLiveView<Context, Events> {
         socket.assign({ count: count - 1 });
         break;
     }
-  }
-
-  render(context: Context, meta: LiveViewMeta) {
+  },
+  render: async (context: { count: number }) => {
+    // render the view based on the state
     const { count } = context;
     return html`
       <div>
@@ -32,5 +27,5 @@ export class CounterLiveView extends BaseLiveView<Context, Events> {
         <button phx-click="increment">+</button>
       </div>
     `;
-  }
-}
+  },
+});
diff --git a/packages/examples/src/liveviews/dashboard/liveView.ts b/packages/examples/src/liveviews/dashboard/liveView.ts
index 3274efe9..678c8151 100644
--- a/packages/examples/src/liveviews/dashboard/liveView.ts
+++ b/packages/examples/src/liveviews/dashboard/liveView.ts
@@ -1,28 +1,29 @@
-import { BaseLiveView, html, LiveViewMountParams, LiveViewSocket, SessionData } from "liveviewjs";
+import { BaseLiveView, createLiveView, html, LiveViewMountParams, LiveViewSocket, SessionData } from "liveviewjs";
 import { numberToCurrency } from "../utils";
 
-interface Context {
-  newOrders: number;
-  salesAmount: number;
-  rating: number;
-}
-
-type Events = { type: "refresh" };
-
-type Info = { type: "tick" };
+export const dashboardLiveView = createLiveView({
+  handleInfo: (info: { type: "tick" }, socket) => {
+    // on tick, update random data
+    socket.assign(nextRandomData());
+  },
 
-export class DashboardLiveView extends BaseLiveView<Context, Events, Info> {
-  mount(params: LiveViewMountParams, session: Partial<SessionData>, socket: LiveViewSocket<Context>) {
+  mount: (socket) => {
     if (socket.connected) {
-      // socket will be connected after websocket connetion established
+      // only start repeating if the socket is connected (i.e. websocket is connected)
       socket.repeat(() => {
+        // send the tick event internally
         socket.sendInfo({ type: "tick" });
       }, 1000);
     }
     socket.assign(nextRandomData());
-  }
+  },
 
-  render(context: Context) {
+  handleEvent: (events: { type: "refresh" }, socket) => {
+    // on refresh, update random data
+    socket.assign(nextRandomData());
+  },
+
+  render: (context: { newOrders: number; salesAmount: number; rating: number }) => {
     const { newOrders, salesAmount, rating } = context;
     return html`
       <h1>Sales Dashboard</h1>
@@ -40,30 +41,10 @@ export class DashboardLiveView extends BaseLiveView<Context, Events, Info> {
       <br />
       <button phx-click="refresh">↻ Refresh</button>
     `;
-  }
-
-  handleEvent(event: Events, socket: LiveViewSocket<Context>) {
-    socket.assign(nextRandomData());
-  }
-
-  handleInfo(info: Info, socket: LiveViewSocket<Context>) {
-    socket.assign(nextRandomData());
-  }
-}
+  },
+});
 
-function ratingToStars(rating: number): string {
-  const stars = [];
-  let i = 0;
-  for (; i < rating; i++) {
-    stars.push("⭐");
-  }
-  for (; i < 5; i++) {
-    stars.push("✩");
-  }
-  return stars.join("");
-}
-
-function nextRandomData(): Context {
+function nextRandomData() {
   return {
     newOrders: randomNewOrders(),
     salesAmount: randomSalesAmount(),
@@ -79,3 +60,15 @@ const random = (min: number, max: number): (() => number) => {
 const randomSalesAmount = random(100, 1000);
 const randomNewOrders = random(5, 20);
 const randomRating = random(1, 5);
+
+function ratingToStars(rating: number): string {
+  const stars = [];
+  let i = 0;
+  for (; i < rating; i++) {
+    stars.push("⭐");
+  }
+  for (; i < 5; i++) {
+    stars.push("✩");
+  }
+  return stars.join("");
+}