diff --git a/.changeset/three-students-grin.md b/.changeset/three-students-grin.md
new file mode 100644
index 0000000..f57380b
--- /dev/null
+++ b/.changeset/three-students-grin.md
@@ -0,0 +1,5 @@
+---
+"@dreamkit/site": patch
+---
+
+Update examples
diff --git a/packages/site/src/pages/api/$route/_examples/optional-search-param.tsx b/packages/site/src/pages/api/$route/_examples/optional-search-param.tsx
index 3fb140e..d0a04e4 100644
--- a/packages/site/src/pages/api/$route/_examples/optional-search-param.tsx
+++ b/packages/site/src/pages/api/$route/_examples/optional-search-param.tsx
@@ -4,10 +4,11 @@ import { $route, Link, s } from "dreamkit";
 export const homeRoute = $route.path("/").create(() => (
   <>
     {/* @ts-expect-error */}
-    <Link href="/section">section</Link>
+    <Link href="/section">link without params</Link>
+    <br />
     {/* @ts-expect-error */}
     <Link href="/section" params={{ name: "test" }}>
-      section with params
+      link with params
     </Link>
   </>
 ));
@@ -15,10 +16,4 @@ export const homeRoute = $route.path("/").create(() => (
 export const sectionRoute = $route
   .path("/section")
   .params({ name: s.string().optional() })
-  .create(({ params }) => {
-    return (
-      <ul>
-        <li>name: {params.name}</li>
-      </ul>
-    );
-  });
+  .create(({ params }) => <>name: {params.name}</>);
diff --git a/packages/site/src/pages/api/$route/_examples/path-param.tsx b/packages/site/src/pages/api/$route/_examples/path-param.tsx
index b759c40..eb7b9d5 100644
--- a/packages/site/src/pages/api/$route/_examples/path-param.tsx
+++ b/packages/site/src/pages/api/$route/_examples/path-param.tsx
@@ -4,11 +4,12 @@ import { $route, Link, s } from "dreamkit";
 export const homeRoute = $route.path("/").create(() => (
   <>
     {/* @ts-expect-error */}
-    <Link href="/user" params={{ id: 1 }}>
+    <Link href="/user/:id" params={{ id: 1 }}>
       user 1
     </Link>
+    <br />
     {/* @ts-expect-error */}
-    <Link href="/user" params={{ id: 2 }}>
+    <Link href="/user/:id" params={{ id: 2 }}>
       user 2
     </Link>
   </>
diff --git a/packages/site/src/pages/api/$route/_examples/synced-search-params.tsx b/packages/site/src/pages/api/$route/_examples/synced-search-params.tsx
index 339fb43..440c3df 100644
--- a/packages/site/src/pages/api/$route/_examples/synced-search-params.tsx
+++ b/packages/site/src/pages/api/$route/_examples/synced-search-params.tsx
@@ -1,58 +1,34 @@
 // title: Synced search params
-import { type InferObjectProps, Input, $route, s } from "dreamkit";
-import { createResource, For } from "solid-js";
-
-const users = Array.from({ length: 10 }).map((_, i) => ({
-  id: i + 1,
-  name: `User ${i + 1}`,
-  country: { code: ["US", "ES"][i % 2] },
-}));
-
-const params = {
-  id: s.number().optional(),
-  name: s.string().optional(),
-  country: s
-    .object({
-      code: s.string().optional(),
-    })
-    .optional(),
-};
-
-function fetchUsers(input: InferObjectProps<typeof params>) {
-  const name =
-    typeof input.name === "string" ? input.name.toLowerCase() : undefined;
-  return users.filter((user) => {
-    if (input.id !== undefined && user.id !== input.id) return false;
-    if (name && !user.name.toLowerCase().includes(name)) return false;
-    if (
-      input.country?.code !== undefined &&
-      user.country.code !== input.country.code
-    )
-      return false;
-    return true;
-  });
-}
+import { Input, $route, s } from "dreamkit";
 
 export default $route
   .path("/")
-  .params(params)
-  .onParamsError({ value: { id: 1 } })
+  .params(
+    s
+      .object({
+        name: s.string(),
+        country: s.object({
+          code: s.string(),
+        }),
+      })
+      .deepPartial(),
+  )
   .create(({ params, setParams }) => {
-    const [users] = createResource(
-      () => ({ ...params, country: { ...params.country } }),
-      fetchUsers,
-    );
-
     return (
-      <div>
-        <form>
+      <>
+        <i>Look at the address bar of your browser.</i>
+        <p>
           <Input
+            placeholder="name"
             value={params.name ?? ""}
             onChange={(name) =>
               setParams({ ...params, name: name || undefined })
             }
           />
+        </p>
+        <p>
           <Input
+            placeholder="country code"
             value={params.country?.code ?? ""}
             onChange={(code) =>
               setParams({
@@ -61,16 +37,7 @@ export default $route
               })
             }
           />
-        </form>
-        <ul>
-          <For each={users()} fallback={<li>No results</li>}>
-            {(user) => (
-              <li>
-                {user.id}. {user.name} ({user.country.code})
-              </li>
-            )}
-          </For>
-        </ul>
-      </div>
+        </p>
+      </>
     );
   });
diff --git a/packages/site/src/pages/api/create-action/_examples/basic-usage.tsx b/packages/site/src/pages/api/create-action/_examples/basic-usage.tsx
index 0997467..6ff2266 100644
--- a/packages/site/src/pages/api/create-action/_examples/basic-usage.tsx
+++ b/packages/site/src/pages/api/create-action/_examples/basic-usage.tsx
@@ -1,19 +1,35 @@
 // title: Basic usage
-import { $route, createAction } from "dreamkit";
+import { $api, $route, createAction } from "dreamkit";
 
-export default $route.path("/").create(() => {
-  const start = createAction(
-    () =>
-      new Promise<number>((resolve) => {
-        setTimeout(() => resolve(Date.now()), 1000);
-      }),
-  );
-  return (
-    <>
-      <p>{start.result}</p>
-      <button onClick={start} disabled={start.running}>
-        Start
-      </button>
-    </>
-  );
+export const start = $api.title("Start").create(async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  const id = Date.now();
+  if (id % 2) throw new Error("Random error");
+  return id;
 });
+
+export default $route
+  .path("/")
+  .api({ start })
+  .create(({ api }) => {
+    const start = createAction(api.start);
+    return (
+      <>
+        <ul>
+          <li>state: {start.state}</li>
+          <li>result: {start.result}</li>
+          <li>error: {start.error?.message}</li>
+        </ul>
+        <button
+          onClick={start}
+          disabled={start.running}
+          children={api.start.title}
+        />
+        <button
+          onClick={start.abort}
+          disabled={!start.running}
+          children="abort"
+        />
+      </>
+    );
+  });
diff --git a/packages/site/src/pages/api/create-action/_examples/predefined-params.tsx b/packages/site/src/pages/api/create-action/_examples/predefined-params.tsx
index 2efeb4b..5556e11 100644
--- a/packages/site/src/pages/api/create-action/_examples/predefined-params.tsx
+++ b/packages/site/src/pages/api/create-action/_examples/predefined-params.tsx
@@ -1,21 +1,42 @@
 // title: Predefined params
-import { createAction, Input } from "dreamkit";
+import { $api, $route, createAction, Input, s } from "dreamkit";
 import { createEffect, createSignal } from "solid-js";
 
-function remove(key: string) {
-  console.log("key removed", key);
-}
+const remove = $api
+  .title("Remove")
+  .params({
+    key: s.title("Key").string(),
+  })
+  .create(({ key }) => {
+    console.log("Received", { key });
+  });
 
-export default function App() {
-  const [id, setKey] = createSignal("");
-  const $remove = createAction(remove).with(() => id());
-  createEffect(() => $remove.state === "success" && $remove.clear());
-  return (
-    <>
-      <Input value={id} onChange={setKey} />
-      <button onClick={$remove} disabled={$remove.running}>
-        Remove
-      </button>
-    </>
-  );
-}
+export default $route
+  .path("/")
+  .api({ remove })
+  .create(({ api }) => {
+    const [key, setKey] = createSignal("");
+    const remove = createAction(api.remove).with(() => ({ key: key() }));
+    createEffect(() => {
+      if (remove.state === "success") {
+        setKey("");
+        remove.clear();
+      }
+    });
+    return (
+      <>
+        <p>
+          <Input
+            placeholder={api.remove.params.key.options.title}
+            value={key}
+            onChange={setKey}
+          />
+        </p>
+        <button
+          onClick={remove}
+          disabled={remove.running}
+          children={api.remove.title}
+        />
+      </>
+    );
+  });
diff --git a/packages/site/src/pages/api/input/_examples/controlled-checkbox.tsx b/packages/site/src/pages/api/input/_examples/controlled-checkbox.tsx
index b1966e3..74a1933 100644
--- a/packages/site/src/pages/api/input/_examples/controlled-checkbox.tsx
+++ b/packages/site/src/pages/api/input/_examples/controlled-checkbox.tsx
@@ -1,9 +1,13 @@
-// title: Controlled number
+// title: Controlled checkbox
 import { $route, Input } from "dreamkit";
-import { createEffect, createSignal } from "solid-js";
+import { createSignal } from "solid-js";
 
 export default $route.path("/").create(() => {
   const [bool, setBool] = createSignal(false);
-  createEffect(() => console.log("bool", bool()));
-  return <Input type="checkbox" value={bool} onChange={setBool} />;
+  return (
+    <>
+      <p>value: {JSON.stringify(bool())}</p>
+      <Input type="checkbox" value={bool} onChange={setBool} />
+    </>
+  );
 });
diff --git a/packages/site/src/pages/api/input/_examples/controlled-file.tsx b/packages/site/src/pages/api/input/_examples/controlled-file.tsx
index 0f94256..7e31a7c 100644
--- a/packages/site/src/pages/api/input/_examples/controlled-file.tsx
+++ b/packages/site/src/pages/api/input/_examples/controlled-file.tsx
@@ -5,5 +5,10 @@ import { createEffect, createSignal } from "solid-js";
 export default $route.path("/").create(() => {
   const [file, setFile] = createSignal<File | null>(new File([], "file.txt"));
   createEffect(() => console.log("file", file()));
-  return <Input type="file" value={file} onChange={setFile} />;
+  return (
+    <>
+      <p>value: {file()?.name}</p>
+      <Input type="file" value={file} onChange={setFile} />
+    </>
+  );
 });
diff --git a/packages/site/src/pages/api/input/_examples/controlled-number.tsx b/packages/site/src/pages/api/input/_examples/controlled-number.tsx
index 140b7eb..d468af0 100644
--- a/packages/site/src/pages/api/input/_examples/controlled-number.tsx
+++ b/packages/site/src/pages/api/input/_examples/controlled-number.tsx
@@ -6,12 +6,15 @@ export default $route.path("/").create(() => {
   const [number, setNumber] = createSignal<number | null>(0);
   createEffect(() => console.log("number", number()));
   return (
-    <Input
-      type="number"
-      value={number}
-      onChange={(value) => {
-        if (value === null || value < 10) setNumber(value);
-      }}
-    />
+    <>
+      <p>value: {JSON.stringify(number())}</p>
+      <Input
+        type="number"
+        value={number}
+        onChange={(value) => {
+          if (value === null || value < 100) setNumber(value);
+        }}
+      />
+    </>
   );
 });
diff --git a/packages/site/src/pages/api/input/_examples/controlled-text.tsx b/packages/site/src/pages/api/input/_examples/controlled-text.tsx
index c5e7615..a6ddd82 100644
--- a/packages/site/src/pages/api/input/_examples/controlled-text.tsx
+++ b/packages/site/src/pages/api/input/_examples/controlled-text.tsx
@@ -5,6 +5,9 @@ import { createSignal } from "solid-js";
 export default $route.path("/").create(() => {
   const [name, setName] = createSignal("");
   return (
-    <Input value={name()} onChange={(value) => setName(value.toUpperCase())} />
+    <>
+      <p>value: {name()}</p>
+      <Input value={name} onChange={(value) => setName(value.toUpperCase())} />
+    </>
   );
 });
diff --git a/packages/site/src/pages/api/ioc/_examples/basic-usage.tsx b/packages/site/src/pages/api/ioc/_examples/basic-usage.tsx
index 4d9dcf0..b064ddd 100644
--- a/packages/site/src/pages/api/ioc/_examples/basic-usage.tsx
+++ b/packages/site/src/pages/api/ioc/_examples/basic-usage.tsx
@@ -1,33 +1,31 @@
 // title: Basic usage
-import { context, IocClass, ServiceClass } from "dreamkit";
+import { $route, context, IocClass } from "dreamkit";
 
-class Child extends IocClass({}) {
-  process(value: string) {
-    return value;
-  }
+abstract class ThirdModel {
+  abstract fetch(): string;
 }
 
-class CustomChild extends Child {
-  override process(value: string): string {
-    return value.toUpperCase();
+class MyModel extends IocClass({ ThirdModel }) {
+  fetch() {
+    return this.thirdModel.fetch();
   }
 }
 
-class Parent extends IocClass({ Child }) {
-  process(value: string) {
-    return this.child.process(value);
+export default $route.path("/").create(() => {
+  class ThirdModelImpl extends ThirdModel {
+    override fetch() {
+      return "resolved";
+    }
   }
-}
-
-export class TestService extends ServiceClass({ Parent }) {
-  onStart() {
-    const value0 = this.parent.process("hello");
-    const value1 = new Parent({ child: new Child() }).process("hello");
-    const value2 = context
-      .fork()
-      .register(Child, { useClass: CustomChild })
-      .resolve(Parent)
-      .process("world");
-    console.log([value0, value1, value2]); // ["hello", "WORLD"]
-  }
-}
+  const manualModel = new MyModel({ thirdModel: new ThirdModelImpl() });
+  const autoModel = context
+    .fork()
+    .register(ThirdModel, { value: new ThirdModelImpl() })
+    .resolve(MyModel);
+  return (
+    <>
+      <p>{manualModel.fetch()}</p>
+      <p>{autoModel.fetch()}</p>
+    </>
+  );
+});
diff --git a/packages/site/src/pages/api/ioc/_examples/optional.tsx b/packages/site/src/pages/api/ioc/_examples/optional.tsx
index 7fdcdeb..917d1c8 100644
--- a/packages/site/src/pages/api/ioc/_examples/optional.tsx
+++ b/packages/site/src/pages/api/ioc/_examples/optional.tsx
@@ -1,28 +1,39 @@
 // title: Optional
-import { IocClass, iocParam, ServiceClass } from "dreamkit";
+import { context, IocClass, iocParam, ServiceClass } from "dreamkit";
 
-class Child extends IocClass({}) {
-  process(value: string) {
-    return value;
+class StringModel {
+  toUpperCase(value: string) {
+    return value.toUpperCase();
   }
 }
 
-class Parent extends IocClass({ child: iocParam(Child).optional() }) {
-  process(value: string) {
-    return this.child?.process(value);
+class MyModel extends IocClass({
+  string: iocParam(StringModel).optional(),
+}) {
+  toUpperCase(value: string) {
+    return this.string?.toUpperCase(value);
   }
 }
 
-export class TestService extends ServiceClass({}) {
+export class MyService extends ServiceClass({}) {
   onStart() {
-    const value1 = new Parent({}).process("hello");
-    const value2 = new Parent({
-      child: {
-        process(value) {
+    const model1 = new MyModel({});
+    const model2 = new MyModel({
+      string: {
+        toUpperCase(value) {
           return value.toUpperCase();
         },
       },
-    }).process("world");
-    console.log([value1, value2]); // [undefined, "WORLD"]
+    });
+    const model3 = context
+      .fork()
+      .register(StringModel, { useFactory: () => new StringModel() })
+      .resolve(MyModel);
+
+    console.log({
+      model1: model1.toUpperCase("text"), // undefined
+      model2: model2.toUpperCase("text"), // "TEXT"
+      model3: model3.toUpperCase("text"), // "TEXT"
+    });
   }
 }
diff --git a/packages/site/src/pages/api/link/_examples/basic-usage.tsx b/packages/site/src/pages/api/link/_examples/basic-usage.tsx
index 72e9871..13ef183 100644
--- a/packages/site/src/pages/api/link/_examples/basic-usage.tsx
+++ b/packages/site/src/pages/api/link/_examples/basic-usage.tsx
@@ -1,12 +1,12 @@
 // title: Basic usage
 import { $route, Link, s } from "dreamkit";
 
-export const otherRoute = $route
-  .path("/other")
-  .params({ value: s.string() })
+export const sectionRoute = $route
+  .path("/section")
+  .params({ name: s.string() })
   .create(({ params }) => (
     <>
-      <p>{params.value}</p>
+      <p>section: {params.name}</p>
       {/* @ts-expect-error */}
       <Link href="/">Go to home</Link>
     </>
@@ -15,8 +15,8 @@ export const otherRoute = $route
 export default $route.path("/").create(() => (
   <>
     {/* @ts-expect-error */}
-    <Link href="/other" params={{ value: 1 }}>
-      Go to other
+    <Link href="/section" params={{ name: "one" }}>
+      Go to section one
     </Link>
   </>
 ));
diff --git a/packages/site/src/pages/api/route-path/_examples/basic-usage.tsx b/packages/site/src/pages/api/route-path/_examples/basic-usage.tsx
index c7e71d8..fe8f4bf 100644
--- a/packages/site/src/pages/api/route-path/_examples/basic-usage.tsx
+++ b/packages/site/src/pages/api/route-path/_examples/basic-usage.tsx
@@ -1,12 +1,12 @@
 // title: Basic usage
 import { $route, routePath, s } from "dreamkit";
 
-export const userRotue = $route
+export const userRoute = $route
   .params({ id: s.number() })
-  .path(({ id }) => `/users/${id}`)
-  .create(({ params }) => <>{params.id}</>);
+  .path(({ id }) => `/user/${id}`)
+  .create(({ params }) => <>id: {params.id}</>);
 
 export default $route.path("/").create(() => {
   // @ts-expect-error
-  return <a href={routePath("/users/:id", { id: 1 })}>User 1</a>;
+  return <a href={routePath("/user/:id", { id: 1 })}>User 1</a>;
 });
diff --git a/packages/site/src/pages/api/schema/_examples/validate.tsx b/packages/site/src/pages/api/schema/_examples/validate.tsx
index 93470bd..7764252 100644
--- a/packages/site/src/pages/api/schema/_examples/validate.tsx
+++ b/packages/site/src/pages/api/schema/_examples/validate.tsx
@@ -1,19 +1,18 @@
 // title: Validate
-import { $route, s, type InferType } from "dreamkit";
+import { $route, Input, s } from "dreamkit";
+import { createSignal } from "solid-js";
 
-const type = s.object({
-  name: s.string().min(3),
-  enabled: s.bool(),
-});
+const type = s.string().min(3).max(5);
 
 export default $route.path("/").create(() => {
-  const value: InferType<typeof type> = {
-    name: "ab",
-    enabled: true,
-  };
+  const [name, setName] = createSignal("");
   return (
     <>
-      <p>validate: {JSON.stringify(type.validate(value), null, 2)}</p>
+      <Input value={name} onChange={setName} />
+      <p>
+        {"errors: "}
+        {JSON.stringify(type.validate(name()), null, 2)}
+      </p>
     </>
   );
 });
diff --git a/packages/site/src/pages/api/service/_examples/basic-usage.tsx b/packages/site/src/pages/api/service/_examples/basic-usage.tsx
index 57a6b8a..765fad8 100644
--- a/packages/site/src/pages/api/service/_examples/basic-usage.tsx
+++ b/packages/site/src/pages/api/service/_examples/basic-usage.tsx
@@ -1,13 +1,48 @@
 // title: Basic usage
-import { $route, ServiceClass } from "dreamkit";
+import { $api, $route, IocContext, kind, ServiceClass } from "dreamkit";
+import { createResource } from "solid-js";
 
-export class AppService extends ServiceClass({}) {
+class CounterModel {
+  static {
+    // [important] save a kind to not break `instanceof` during development
+    kind(this, "CounterModel");
+  }
+  value = 0;
+}
+
+export class CounterService extends ServiceClass({ IocContext }) {
   onStart() {
-    console.log("started"); // edit this line and save
-    return () => console.log("stopped");
+    const counter = new CounterModel();
+    const interval = setInterval(() => {
+      counter.value += 1;
+    }, 1000);
+    this.iocContext.register(CounterModel, { value: counter });
+    return () => {
+      this.iocContext.unregister(CounterModel);
+      clearInterval(interval);
+    };
   }
 }
 
-export const homeRoute = $route.path("/").create(() => {
-  return <>hello world</>;
-});
+const fetchCounterValue = $api
+  .self({
+    CounterModel,
+  })
+  .create(function () {
+    return this.counterModel.value;
+  });
+
+export default $route
+  .path("/")
+  .api({ fetchCounterValue })
+  .create(({ api }) => {
+    const [counterValue, { refetch }] = createResource(api.fetchCounterValue);
+    return (
+      <>
+        <p>value: {counterValue.latest}</p>
+        <p>
+          <button onClick={refetch}>refetch</button>
+        </p>
+      </>
+    );
+  });
diff --git a/packages/site/src/pages/examples/sqlite.code.tsx b/packages/site/src/pages/examples/sqlite.code.tsx
index fb8480f..206db8d 100644
--- a/packages/site/src/pages/examples/sqlite.code.tsx
+++ b/packages/site/src/pages/examples/sqlite.code.tsx
@@ -47,7 +47,7 @@ export const fetchUsers = $api
 export const prueba = $route
   .api({ fetchUsers })
   .params(fetchUsers.params)
-  .path("/users2")
+  .path("/users")
   .create(({ api, params, setParams }) => {
     const [users] = createResource(() => ({ ...params }), api.fetchUsers);
     return (