diff --git a/.eslintignore b/.eslintignore
index 2d6e420..874dce0 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,4 @@
 .history
-.husky
 .vscode
 coverage
 dist
diff --git a/.husky/pre-commit b/.husky/pre-commit
deleted file mode 100755
index d24fdfc..0000000
--- a/.husky/pre-commit
+++ /dev/null
@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged
diff --git a/.prettierignore b/.prettierignore
index 2d6e420..874dce0 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,4 @@
 .history
-.husky
 .vscode
 coverage
 dist
diff --git a/package-lock.json b/package-lock.json
index e0b9a61..a49c335 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,6 @@
         "eslint": "^8.46.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.0",
-        "husky": "^8.0.3",
         "lint-staged": "^13.2.3",
         "lodash-es": "^4.17.21",
         "postcss": "^8.4.27",
@@ -2325,21 +2324,6 @@
         "node": ">=14.18.0"
       }
     },
-    "node_modules/husky": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz",
-      "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==",
-      "dev": true,
-      "bin": {
-        "husky": "lib/bin.js"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/typicode"
-      }
-    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
diff --git a/package.json b/package.json
index e94a809..1359868 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,7 @@
     "build": "rimraf dist && tsc && vite build && dts-bundle-generator --config ./dts-bundle-generator.config.ts",
     "test": "npx playwright test",
     "lint:scripts": "eslint . --ext .ts",
-    "format:scripts": "prettier . --write",
-    "prepare": "husky install && husky set .husky/pre-commit 'npx lint-staged' && git add .husky/pre-commit",
-    "uninstall-husky": "npm uninstall husky --no-save && git config --unset core.hooksPath && npx rimraf .husky"
+    "format:scripts": "prettier . --write"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -37,7 +35,6 @@
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.27",
diff --git a/tests-examples/demo-todo-app.spec.ts b/tests-examples/demo-todo-app.spec.ts
new file mode 100644
index 0000000..e1f317a
--- /dev/null
+++ b/tests-examples/demo-todo-app.spec.ts
@@ -0,0 +1,489 @@
+import { test, expect, type Page } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("https://demo.playwright.dev/todomvc");
+});
+
+const TODO_ITEMS = [
+  "buy some cheese",
+  "feed the cat",
+  "book a doctors appointment",
+];
+
+test.describe("New Todo", () => {
+  test("should allow me to add todo items", async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    // Create 1st todo.
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press("Enter");
+
+    // Make sure the list only has one todo item.
+    await expect(page.getByTestId("todo-title")).toHaveText([TODO_ITEMS[0]]);
+
+    // Create 2nd todo.
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press("Enter");
+
+    // Make sure the list now has two todo items.
+    await expect(page.getByTestId("todo-title")).toHaveText([
+      TODO_ITEMS[0],
+      TODO_ITEMS[1],
+    ]);
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+
+  test("should clear text input field when an item is added", async ({
+    page,
+  }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    // Create one todo item.
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press("Enter");
+
+    // Check that input is empty.
+    await expect(newTodo).toBeEmpty();
+    await checkNumberOfTodosInLocalStorage(page, 1);
+  });
+
+  test("should append new items to the bottom of the list", async ({
+    page,
+  }) => {
+    // Create 3 items.
+    await createDefaultTodos(page);
+
+    // create a todo count locator
+    const todoCount = page.getByTestId("todo-count");
+
+    // Check test using different methods.
+    await expect(page.getByText("3 items left")).toBeVisible();
+    await expect(todoCount).toHaveText("3 items left");
+    await expect(todoCount).toContainText("3");
+    await expect(todoCount).toHaveText(/3/);
+
+    // Check all items in one call.
+    await expect(page.getByTestId("todo-title")).toHaveText(TODO_ITEMS);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+});
+
+test.describe("Mark all as completed", () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test("should allow me to mark all items as completed", async ({ page }) => {
+    // Complete all todos.
+    await page.getByLabel("Mark all as complete").check();
+
+    // Ensure all todos have 'completed' class.
+    await expect(page.getByTestId("todo-item")).toHaveClass([
+      "completed",
+      "completed",
+      "completed",
+    ]);
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+  });
+
+  test("should allow me to clear the complete state of all items", async ({
+    page,
+  }) => {
+    const toggleAll = page.getByLabel("Mark all as complete");
+    // Check and then immediately uncheck.
+    await toggleAll.check();
+    await toggleAll.uncheck();
+
+    // Should be no completed classes.
+    await expect(page.getByTestId("todo-item")).toHaveClass(["", "", ""]);
+  });
+
+  test("complete all checkbox should update state when items are completed / cleared", async ({
+    page,
+  }) => {
+    const toggleAll = page.getByLabel("Mark all as complete");
+    await toggleAll.check();
+    await expect(toggleAll).toBeChecked();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Uncheck first todo.
+    const firstTodo = page.getByTestId("todo-item").nth(0);
+    await firstTodo.getByRole("checkbox").uncheck();
+
+    // Reuse toggleAll locator and make sure its not checked.
+    await expect(toggleAll).not.toBeChecked();
+
+    await firstTodo.getByRole("checkbox").check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Assert the toggle all is checked again.
+    await expect(toggleAll).toBeChecked();
+  });
+});
+
+test.describe("Item", () => {
+  test("should allow me to mark items as complete", async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press("Enter");
+    }
+
+    // Check first item.
+    const firstTodo = page.getByTestId("todo-item").nth(0);
+    await firstTodo.getByRole("checkbox").check();
+    await expect(firstTodo).toHaveClass("completed");
+
+    // Check second item.
+    const secondTodo = page.getByTestId("todo-item").nth(1);
+    await expect(secondTodo).not.toHaveClass("completed");
+    await secondTodo.getByRole("checkbox").check();
+
+    // Assert completed class.
+    await expect(firstTodo).toHaveClass("completed");
+    await expect(secondTodo).toHaveClass("completed");
+  });
+
+  test("should allow me to un-mark items as complete", async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press("Enter");
+    }
+
+    const firstTodo = page.getByTestId("todo-item").nth(0);
+    const secondTodo = page.getByTestId("todo-item").nth(1);
+    const firstTodoCheckbox = firstTodo.getByRole("checkbox");
+
+    await firstTodoCheckbox.check();
+    await expect(firstTodo).toHaveClass("completed");
+    await expect(secondTodo).not.toHaveClass("completed");
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await firstTodoCheckbox.uncheck();
+    await expect(firstTodo).not.toHaveClass("completed");
+    await expect(secondTodo).not.toHaveClass("completed");
+    await checkNumberOfCompletedTodosInLocalStorage(page, 0);
+  });
+
+  test("should allow me to edit an item", async ({ page }) => {
+    await createDefaultTodos(page);
+
+    const todoItems = page.getByTestId("todo-item");
+    const secondTodo = todoItems.nth(1);
+    await secondTodo.dblclick();
+    await expect(secondTodo.getByRole("textbox", { name: "Edit" })).toHaveValue(
+      TODO_ITEMS[1]
+    );
+    await secondTodo
+      .getByRole("textbox", { name: "Edit" })
+      .fill("buy some sausages");
+    await secondTodo.getByRole("textbox", { name: "Edit" }).press("Enter");
+
+    // Explicitly assert the new text value.
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      "buy some sausages",
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, "buy some sausages");
+  });
+});
+
+test.describe("Editing", () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test("should hide other controls when editing", async ({ page }) => {
+    const todoItem = page.getByTestId("todo-item").nth(1);
+    await todoItem.dblclick();
+    await expect(todoItem.getByRole("checkbox")).not.toBeVisible();
+    await expect(
+      todoItem.locator("label", {
+        hasText: TODO_ITEMS[1],
+      })
+    ).not.toBeVisible();
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test("should save edits on blur", async ({ page }) => {
+    const todoItems = page.getByTestId("todo-item");
+    await todoItems.nth(1).dblclick();
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .fill("buy some sausages");
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .dispatchEvent("blur");
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      "buy some sausages",
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, "buy some sausages");
+  });
+
+  test("should trim entered text", async ({ page }) => {
+    const todoItems = page.getByTestId("todo-item");
+    await todoItems.nth(1).dblclick();
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .fill("    buy some sausages    ");
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .press("Enter");
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      "buy some sausages",
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, "buy some sausages");
+  });
+
+  test("should remove the item if an empty text string was entered", async ({
+    page,
+  }) => {
+    const todoItems = page.getByTestId("todo-item");
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole("textbox", { name: "Edit" }).fill("");
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .press("Enter");
+
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test("should cancel edits on escape", async ({ page }) => {
+    const todoItems = page.getByTestId("todo-item");
+    await todoItems.nth(1).dblclick();
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .fill("buy some sausages");
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .press("Escape");
+    await expect(todoItems).toHaveText(TODO_ITEMS);
+  });
+});
+
+test.describe("Counter", () => {
+  test("should display the current number of todo items", async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    // create a todo count locator
+    const todoCount = page.getByTestId("todo-count");
+
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press("Enter");
+
+    await expect(todoCount).toContainText("1");
+
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press("Enter");
+    await expect(todoCount).toContainText("2");
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+});
+
+test.describe("Clear completed button", () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+  });
+
+  test("should display the correct text", async ({ page }) => {
+    await page.locator(".todo-list li .toggle").first().check();
+    await expect(
+      page.getByRole("button", { name: "Clear completed" })
+    ).toBeVisible();
+  });
+
+  test("should remove completed items when clicked", async ({ page }) => {
+    const todoItems = page.getByTestId("todo-item");
+    await todoItems.nth(1).getByRole("checkbox").check();
+    await page.getByRole("button", { name: "Clear completed" }).click();
+    await expect(todoItems).toHaveCount(2);
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test("should be hidden when there are no items that are completed", async ({
+    page,
+  }) => {
+    await page.locator(".todo-list li .toggle").first().check();
+    await page.getByRole("button", { name: "Clear completed" }).click();
+    await expect(
+      page.getByRole("button", { name: "Clear completed" })
+    ).toBeHidden();
+  });
+});
+
+test.describe("Persistence", () => {
+  test("should persist its data", async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press("Enter");
+    }
+
+    const todoItems = page.getByTestId("todo-item");
+    const firstTodoCheck = todoItems.nth(0).getByRole("checkbox");
+    await firstTodoCheck.check();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
+    await expect(todoItems).toHaveClass(["completed", ""]);
+
+    // Ensure there is 1 completed item.
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    // Now reload.
+    await page.reload();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
+    await expect(todoItems).toHaveClass(["completed", ""]);
+  });
+});
+
+test.describe("Routing", () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    // make sure the app had a chance to save updated todos in storage
+    // before navigating to a new view, otherwise the items can get lost :(
+    // in some frameworks like Durandal
+    await checkTodosInLocalStorage(page, TODO_ITEMS[0]);
+  });
+
+  test("should allow me to display active items", async ({ page }) => {
+    const todoItem = page.getByTestId("todo-item");
+    await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
+
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole("link", { name: "Active" }).click();
+    await expect(todoItem).toHaveCount(2);
+    await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test("should respect the back button", async ({ page }) => {
+    const todoItem = page.getByTestId("todo-item");
+    await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
+
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await test.step("Showing all items", async () => {
+      await page.getByRole("link", { name: "All" }).click();
+      await expect(todoItem).toHaveCount(3);
+    });
+
+    await test.step("Showing active items", async () => {
+      await page.getByRole("link", { name: "Active" }).click();
+    });
+
+    await test.step("Showing completed items", async () => {
+      await page.getByRole("link", { name: "Completed" }).click();
+    });
+
+    await expect(todoItem).toHaveCount(1);
+    await page.goBack();
+    await expect(todoItem).toHaveCount(2);
+    await page.goBack();
+    await expect(todoItem).toHaveCount(3);
+  });
+
+  test("should allow me to display completed items", async ({ page }) => {
+    await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole("link", { name: "Completed" }).click();
+    await expect(page.getByTestId("todo-item")).toHaveCount(1);
+  });
+
+  test("should allow me to display all items", async ({ page }) => {
+    await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole("link", { name: "Active" }).click();
+    await page.getByRole("link", { name: "Completed" }).click();
+    await page.getByRole("link", { name: "All" }).click();
+    await expect(page.getByTestId("todo-item")).toHaveCount(3);
+  });
+
+  test("should highlight the currently applied filter", async ({ page }) => {
+    await expect(page.getByRole("link", { name: "All" })).toHaveClass(
+      "selected"
+    );
+
+    //create locators for active and completed links
+    const activeLink = page.getByRole("link", { name: "Active" });
+    const completedLink = page.getByRole("link", { name: "Completed" });
+    await activeLink.click();
+
+    // Page change - active items.
+    await expect(activeLink).toHaveClass("selected");
+    await completedLink.click();
+
+    // Page change - completed items.
+    await expect(completedLink).toHaveClass("selected");
+  });
+});
+
+async function createDefaultTodos(page: Page) {
+  // create a new todo locator
+  const newTodo = page.getByPlaceholder("What needs to be done?");
+
+  for (const item of TODO_ITEMS) {
+    await newTodo.fill(item);
+    await newTodo.press("Enter");
+  }
+}
+
+async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) {
+  return await page.waitForFunction(e => {
+    return JSON.parse(localStorage["react-todos"]).length === e;
+  }, expected);
+}
+
+async function checkNumberOfCompletedTodosInLocalStorage(
+  page: Page,
+  expected: number
+) {
+  return await page.waitForFunction(e => {
+    return (
+      JSON.parse(localStorage["react-todos"]).filter(
+        (todo: any) => todo.completed
+      ).length === e
+    );
+  }, expected);
+}
+
+async function checkTodosInLocalStorage(page: Page, title: string) {
+  return await page.waitForFunction(t => {
+    return JSON.parse(localStorage["react-todos"])
+      .map((todo: any) => todo.title)
+      .includes(t);
+  }, title);
+}