From ae858737fb145030659eac9dca34f59958ed75fc Mon Sep 17 00:00:00 2001
From: Tommaso Allevi <tomallevi@gmail.com>
Date: Sat, 5 Apr 2025 11:07:34 +0200
Subject: [PATCH 1/3] renderSync to render

---
 README.md                                     |  4 +-
 examples/counter/src/Main.tsx                 |  2 +-
 .../counter/components/ApplyDeltaButton.tsx   |  2 +-
 .../counter/components/SetCounterValue.tsx    |  2 +-
 .../domains/counter/components/ShowValue.tsx  |  2 +-
 examples/custom-element/src/Counter.tsx       |  4 +-
 examples/e-commerce/src/Main.tsx              |  2 +-
 .../e-commerce/src/components/CardList.tsx    |  2 +-
 examples/e-commerce/src/components/Header.tsx |  2 +-
 .../src/domains/cart/components/AddToCart.tsx |  2 +-
 .../src/domains/cart/components/CartBadge.tsx |  2 +-
 .../cart/components/CartProductList.tsx       | 10 +-
 .../domains/cart/components/CartTooltip.tsx   |  2 +-
 .../components/ProductCategoryList.tsx        |  4 +-
 .../product/components/ProductItem.tsx        |  2 +-
 .../user/components/UserProfileBadge.tsx      |  2 +-
 examples/e-commerce/src/pages/cart.tsx        |  2 +-
 examples/e-commerce/src/pages/category.tsx    |  6 +-
 examples/e-commerce/src/pages/checkout.tsx    |  2 +-
 examples/e-commerce/src/pages/home.tsx        |  8 +-
 examples/e-commerce/src/pages/login.tsx       |  2 +-
 examples/e-commerce/src/pages/logout.tsx      |  2 +-
 examples/e-commerce/src/pages/profile.tsx     |  2 +-
 examples/e-commerce/src/router.tsx            |  4 +-
 examples/empty/src/Main.tsx                   |  2 +-
 examples/random-quote/src/Main.tsx            |  8 +-
 .../src/domains/quote/components/Quote.tsx    |  2 +-
 .../quote/components/RefreshQuoteButton.tsx   |  2 +-
 .../components/src/Alert/Alert.stories.tsx    |  4 +-
 packages/components/src/Alert/index.tsx       |  2 +-
 .../components/src/Badge/Badge.stories.tsx    |  2 +-
 packages/components/src/Badge/index.tsx       |  2 +-
 .../components/src/Button/Button.stories.tsx  |  6 +-
 packages/components/src/Button/index.tsx      |  2 +-
 packages/components/src/Card/Card.stories.tsx |  6 +-
 packages/components/src/Card/index.tsx        |  8 +-
 .../src/ChatBubble/ChatBubble.stories.tsx     |  4 +-
 packages/components/src/ChatBubble/index.tsx  |  4 +-
 .../src/Checkbox/Checkbox.stories.tsx         |  4 +-
 .../src/Divider/Divider.stories.tsx           |  4 +-
 .../src/Dropdown/Dropdown.stories.tsx         |  2 +-
 packages/components/src/Dropdown/index.tsx    |  2 +-
 .../components/src/Footer/Footer.stories.tsx  |  2 +-
 packages/components/src/Footer/index.tsx      |  2 +-
 packages/components/src/Form/Form.stories.tsx |  8 +-
 packages/components/src/Form/index.tsx        |  2 +-
 .../src/FormField/FormField.stories.tsx       |  4 +-
 packages/components/src/FormField/index.tsx   |  2 +-
 packages/components/src/Hero/Hero.stories.tsx |  2 +-
 packages/components/src/Hero/index.tsx        |  4 +-
 packages/components/src/Link/Link.stories.tsx |  4 +-
 packages/components/src/Link/index.tsx        |  2 +-
 .../src/Loading/Loading.stories.tsx           |  4 +-
 packages/components/src/Menu/Menu.stories.tsx |  2 +-
 packages/components/src/Menu/index.tsx        |  8 +-
 .../components/src/Modal/Modal.stories.tsx    |  2 +-
 packages/components/src/Modal/index.tsx       |  6 +-
 .../components/src/Navbar/Navbar.stories.tsx  |  8 +-
 packages/components/src/Navbar/index.tsx      |  8 +-
 .../components/src/Select/Select.stories.tsx  |  2 +-
 packages/components/src/Select/index.tsx      |  2 +-
 packages/components/src/Tabs/Tabs.stories.tsx |  4 +-
 packages/components/src/Tabs/index.tsx        |  4 +-
 .../src/TextInput/TextInput.stories.tsx       |  2 +-
 .../src/Typography/Heading.stories.tsx        |  4 +-
 .../src/Typography/Prose.stories.tsx          |  6 +-
 packages/components/src/Typography/index.tsx  |  4 +-
 packages/components/stories/foo.tsx           |  4 +-
 packages/seqflow/README.md                    |  4 +-
 packages/seqflow/src/component.ts             | 19 +++-
 packages/seqflow/tests/inner/child.test.tsx   | 32 +++----
 packages/seqflow/tests/inner/dom.test.tsx     |  8 +-
 .../seqflow/tests/inner/lifecycle.test.tsx    |  6 +-
 packages/seqflow/tests/inner/onClick.test.tsx |  2 +-
 packages/seqflow/tests/inner/render.test.tsx  | 94 +++++++++----------
 .../tests/inner/unmount-checks.test.tsx       | 18 ++--
 packages/seqflow/tests/seqflowjs.test.tsx     | 36 +++----
 .../storybook/src/docs/sourceDecorator.ts     |  3 +-
 packages/storybook/src/render.ts              |  2 +-
 packages/website/src/Main.tsx                 |  2 +-
 .../website/src/components/ContentWithToc.tsx |  2 +-
 packages/website/src/components/Header.tsx    |  2 +-
 packages/website/src/pages/Example.tsx        |  2 +-
 packages/website/src/pages/GetStarted.tsx     | 18 ++--
 .../src/pages/GetStarted_1fetchData.md        | 13 ++-
 .../src/pages/GetStarted_2splitComponents.md  | 14 +--
 .../src/pages/GetStarted_3refreshQuote.md     | 36 +++----
 .../src/pages/GetStarted_4configuration.md    | 10 +-
 .../website/src/pages/GetStarted_6domain.md   | 14 +--
 packages/website/src/pages/Home.tsx           | 30 +++---
 packages/website/src/pages/Why.md             | 10 +-
 packages/website/src/pages/Why.tsx            |  2 +-
 packages/website/src/pages/blog/Blog.tsx      |  4 +-
 93 files changed, 315 insertions(+), 310 deletions(-)

diff --git a/README.md b/README.md
index 38cebec..f75307c 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ async function getRandomQuote(): Promise<Quote> {
 
 export async function Main({}, { component }: Contexts) {
 	// Render loading message
-	component.renderSync(
+	component.render(
 		<p>Loading...</p>
 	);
 
@@ -35,7 +35,7 @@ export async function Main({}, { component }: Contexts) {
 	const quote = await getRandomQuote();
 
 	// Replace loading message with quote
-	component.renderSync(
+	component.render(
 		<div>
 			<div>{quote.content}</div>
 			<div>{quote.author}</div>
diff --git a/examples/counter/src/Main.tsx b/examples/counter/src/Main.tsx
index 4603087..2ab39a6 100644
--- a/examples/counter/src/Main.tsx
+++ b/examples/counter/src/Main.tsx
@@ -11,7 +11,7 @@ export async function Main(
 	_: ComponentProps<unknown>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Card
 			compact
 			className={"m-auto w-96 bg-slate-900 text-slate-200 mt-6"}
diff --git a/examples/counter/src/domains/counter/components/ApplyDeltaButton.tsx b/examples/counter/src/domains/counter/components/ApplyDeltaButton.tsx
index 56344dd..23abac0 100644
--- a/examples/counter/src/domains/counter/components/ApplyDeltaButton.tsx
+++ b/examples/counter/src/domains/counter/components/ApplyDeltaButton.tsx
@@ -5,7 +5,7 @@ export async function ApplyDeltaButton(
 	{ delta, label }: ComponentProps<{ delta: number; label: string }>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Button
 			color="primary"
 			onClick={() => app.domains.counter.applyDelta(delta)}
diff --git a/examples/counter/src/domains/counter/components/SetCounterValue.tsx b/examples/counter/src/domains/counter/components/SetCounterValue.tsx
index 5bc5711..f392c28 100644
--- a/examples/counter/src/domains/counter/components/SetCounterValue.tsx
+++ b/examples/counter/src/domains/counter/components/SetCounterValue.tsx
@@ -6,7 +6,7 @@ export async function SetCounterValue(
 	_: ComponentProps<unknown>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Form key="form" className={[classes.wrapper, "a"]}>
 			<FormField label={"Choose a value"} className={"w-full max-w-xs"}>
 				<NumberInput required name="set-value" key="choose-value" />
diff --git a/examples/counter/src/domains/counter/components/ShowValue.tsx b/examples/counter/src/domains/counter/components/ShowValue.tsx
index 9856834..30b33ca 100644
--- a/examples/counter/src/domains/counter/components/ShowValue.tsx
+++ b/examples/counter/src/domains/counter/components/ShowValue.tsx
@@ -7,7 +7,7 @@ export async function ShowValue(
 ) {
 	component._el.setAttribute("aria-live", "polite");
 
-	component.renderSync(`${app.domains.counter.get()}`);
+	component.render(`${app.domains.counter.get()}`);
 
 	const events = component.waitEvents(component.domainEvent(CounterChanged));
 	for await (const ev of events) {
diff --git a/examples/custom-element/src/Counter.tsx b/examples/custom-element/src/Counter.tsx
index 50c361e..7862051 100644
--- a/examples/custom-element/src/Counter.tsx
+++ b/examples/custom-element/src/Counter.tsx
@@ -54,7 +54,7 @@ async function ChangeCounterButton(
 	data: ComponentProps<{ delta: number; text: string }>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Button key="button" type="button" color="primary">
 			{data.text}
 		</Button>,
@@ -72,7 +72,7 @@ export async function Counter(
 ) {
 	component._el.classList.add(classes["counter-card"]);
 
-	component.renderSync(
+	component.render(
 		<Card
 			compact
 			className={"m-auto w-96 bg-slate-900 text-slate-200 mt-6"}
diff --git a/examples/e-commerce/src/Main.tsx b/examples/e-commerce/src/Main.tsx
index ca023ff..2d5677e 100644
--- a/examples/e-commerce/src/Main.tsx
+++ b/examples/e-commerce/src/Main.tsx
@@ -10,7 +10,7 @@ export async function Main(
 ) {
 	await app.domains.user.restoreUser();
 
-	component.renderSync(<Router />);
+	component.render(<Router />);
 }
 
 declare module "@seqflow/seqflow" {
diff --git a/examples/e-commerce/src/components/CardList.tsx b/examples/e-commerce/src/components/CardList.tsx
index 0f8d2e5..297e527 100644
--- a/examples/e-commerce/src/components/CardList.tsx
+++ b/examples/e-commerce/src/components/CardList.tsx
@@ -9,7 +9,7 @@ export async function CardList<T extends { id: string }>(
 	}>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<ol className={classes.wrapper}>
 			{data.items.map((item) => (
 				<li
diff --git a/examples/e-commerce/src/components/Header.tsx b/examples/e-commerce/src/components/Header.tsx
index ba5ec79..4de25ac 100644
--- a/examples/e-commerce/src/components/Header.tsx
+++ b/examples/e-commerce/src/components/Header.tsx
@@ -11,7 +11,7 @@ export async function Header(
 	data: ComponentProps<{ user?: UserType }>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Navbar className={classes.header}>
 			<Navbar.Start>
 				<a href="/">
diff --git a/examples/e-commerce/src/domains/cart/components/AddToCart.tsx b/examples/e-commerce/src/domains/cart/components/AddToCart.tsx
index 2b32a41..d588e13 100644
--- a/examples/e-commerce/src/domains/cart/components/AddToCart.tsx
+++ b/examples/e-commerce/src/domains/cart/components/AddToCart.tsx
@@ -11,7 +11,7 @@ export async function AddToCart(
 
 	component._el.style.width = "100px";
 
-	component.renderSync(
+	component.render(
 		<>
 			<Button
 				className={[classes.firstAddToCart, "w-full"]}
diff --git a/examples/e-commerce/src/domains/cart/components/CartBadge.tsx b/examples/e-commerce/src/domains/cart/components/CartBadge.tsx
index d5fffce..6196aaf 100644
--- a/examples/e-commerce/src/domains/cart/components/CartBadge.tsx
+++ b/examples/e-commerce/src/domains/cart/components/CartBadge.tsx
@@ -10,7 +10,7 @@ export async function CartBadge(
 	const productCount = app.domains.cart.getProductCount();
 	const count = productCount === 0 ? "" : productCount;
 
-	component.renderSync(
+	component.render(
 		<Button
 			color="ghost"
 			shape="circle"
diff --git a/examples/e-commerce/src/domains/cart/components/CartProductList.tsx b/examples/e-commerce/src/domains/cart/components/CartProductList.tsx
index 7d5f034..fce4058 100644
--- a/examples/e-commerce/src/domains/cart/components/CartProductList.tsx
+++ b/examples/e-commerce/src/domains/cart/components/CartProductList.tsx
@@ -6,7 +6,7 @@ import { ChangeCartEvent } from "../events";
 import classes from "./CartProductList.module.css";
 
 async function EmptyCart(_: ComponentProps<unknown>, { component }: Contexts) {
-	component.renderSync(<div>Cart is empty</div>);
+	component.render(<div>Cart is empty</div>);
 }
 
 export async function CartProduct(
@@ -15,7 +15,7 @@ export async function CartProduct(
 ) {
 	component._el.classList.add(classes.product);
 	component._el.id = `cart-product-${data.product.id}`;
-	component.renderSync(
+	component.render(
 		<>
 			<div className={classes.left}>
 				<img
@@ -49,7 +49,7 @@ export async function CartProductList(
 	{ component, app }: Contexts,
 ) {
 	if (data.cart.products.length === 0) {
-		component.renderSync(<EmptyCart />);
+		component.render(<EmptyCart />);
 		return;
 	}
 
@@ -75,7 +75,7 @@ export async function CartProductList(
 			total: {data.cart.total} €
 		</div>
 	) as HTMLElement;
-	component.renderSync(
+	component.render(
 		<>
 			<ul className={classes.cartProducts}>
 				{data.cart.products.map(({ product, count, subTotal }) => {
@@ -138,7 +138,7 @@ export async function CartProductList(
 			const cart = app.domains.cart.getCart();
 
 			if (cart.products.length === 0) {
-				component.renderSync(<EmptyCart />);
+				component.render(<EmptyCart />);
 				break;
 			}
 
diff --git a/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx b/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx
index 0496fdb..7f8184c 100644
--- a/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx
+++ b/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx
@@ -13,7 +13,7 @@ export async function CartTooltip(_: unknown, { component, app }: Contexts) {
 	}
 	component._el.classList.add(...c);
 
-	component.renderSync(
+	component.render(
 		<Alert
 			className={[classes.cartTooltipLink]}
 			id="cart-tooltip-alert"
diff --git a/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx b/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx
index 788fef9..54638e3 100644
--- a/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx
+++ b/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx
@@ -8,7 +8,7 @@ async function CategoryItem(
 	data: ProductCategory,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<a className={classes.categoryAnchor} href={`/category/${data.name}`}>
 			<Card compact className={["image-full", classes.card]}>
 				<figure>
@@ -41,7 +41,7 @@ export async function ProductCategoryList(
 	data: { categories: ProductCategory[] },
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<div className={classes.productList}>
 			<CardList
 				prefix="category"
diff --git a/examples/e-commerce/src/domains/product/components/ProductItem.tsx b/examples/e-commerce/src/domains/product/components/ProductItem.tsx
index 25340f4..0bf19bf 100644
--- a/examples/e-commerce/src/domains/product/components/ProductItem.tsx
+++ b/examples/e-commerce/src/domains/product/components/ProductItem.tsx
@@ -8,7 +8,7 @@ export async function ProductItem(data: Product, { component }: Contexts) {
 	const tooltip = (
 		<div className={classes.tooltipWrapper}>{data.title}</div>
 	) as HTMLDivElement;
-	component.renderSync(
+	component.render(
 		<Card compact shadow="xl" className={["h-full", "max-w-xs"]}>
 			<figure>
 				<img
diff --git a/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx b/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx
index 007ff55..f5d9ef6 100644
--- a/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx
+++ b/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx
@@ -31,7 +31,7 @@ export async function UserProfileBadge(
 		</div>
 	) as HTMLDivElement;
 
-	component.renderSync(
+	component.render(
 		<Button color="link" className={classes.logoWrapper}>
 			<img
 				key="logo"
diff --git a/examples/e-commerce/src/pages/cart.tsx b/examples/e-commerce/src/pages/cart.tsx
index e3acf19..b8daa95 100644
--- a/examples/e-commerce/src/pages/cart.tsx
+++ b/examples/e-commerce/src/pages/cart.tsx
@@ -7,5 +7,5 @@ export async function Cart(
 ) {
 	const cart = app.domains.cart.getCart();
 	component._el.classList.add("w-3/5");
-	component.renderSync(<components.CartProductList cart={cart} />);
+	component.render(<components.CartProductList cart={cart} />);
 }
diff --git a/examples/e-commerce/src/pages/category.tsx b/examples/e-commerce/src/pages/category.tsx
index 8d142d5..440d1af 100644
--- a/examples/e-commerce/src/pages/category.tsx
+++ b/examples/e-commerce/src/pages/category.tsx
@@ -3,14 +3,14 @@ import { CardList } from "../components/CardList";
 import { components } from "../domains/product";
 
 async function Loading(_: ComponentProps<unknown>, { component }: Contexts) {
-	component.renderSync(<div>Loading...</div>);
+	component.render(<div>Loading...</div>);
 }
 
 export async function Category(
 	_: ComponentProps<unknown>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(<Loading />);
+	component.render(<Loading />);
 
 	const categoryId = app.router.segments.pop();
 
@@ -24,7 +24,7 @@ export async function Category(
 		component.ac.signal,
 	);
 
-	component.renderSync(
+	component.render(
 		<CardList
 			prefix="category"
 			items={products}
diff --git a/examples/e-commerce/src/pages/checkout.tsx b/examples/e-commerce/src/pages/checkout.tsx
index 65a6fd7..5d2fd62 100644
--- a/examples/e-commerce/src/pages/checkout.tsx
+++ b/examples/e-commerce/src/pages/checkout.tsx
@@ -6,7 +6,7 @@ export async function Checkout(
 ) {
 	app.domains.cart.checkout();
 
-	component.renderSync(
+	component.render(
 		<>
 			<p>Well done!</p>
 			<a key="go-home" href="/">
diff --git a/examples/e-commerce/src/pages/home.tsx b/examples/e-commerce/src/pages/home.tsx
index ca6067f..23be204 100644
--- a/examples/e-commerce/src/pages/home.tsx
+++ b/examples/e-commerce/src/pages/home.tsx
@@ -2,20 +2,18 @@ import { ComponentProps, Contexts } from "@seqflow/seqflow";
 import { components } from "../domains/product";
 
 async function Loading(_: ComponentProps<unknown>, { component }: Contexts) {
-	component.renderSync(<div>Loading...</div>);
+	component.render(<div>Loading...</div>);
 }
 
 export async function Home(
 	_: ComponentProps<unknown>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(<Loading />);
+	component.render(<Loading />);
 
 	const categories = await app.domains.product.fetchProductsCategories(
 		component.ac.signal,
 	);
 
-	component.renderSync(
-		<components.ProductCategoryList categories={categories} />,
-	);
+	component.render(<components.ProductCategoryList categories={categories} />);
 }
diff --git a/examples/e-commerce/src/pages/login.tsx b/examples/e-commerce/src/pages/login.tsx
index 9012a8a..3d32cac 100644
--- a/examples/e-commerce/src/pages/login.tsx
+++ b/examples/e-commerce/src/pages/login.tsx
@@ -14,7 +14,7 @@ export async function Login(
 	_: ComponentProps<unknown>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Form key="login-form">
 			<Card compact className={"m-auto w-96 bg-zinc-700"} shadow="md">
 				<Card.Body>
diff --git a/examples/e-commerce/src/pages/logout.tsx b/examples/e-commerce/src/pages/logout.tsx
index 33bee58..f0ead53 100644
--- a/examples/e-commerce/src/pages/logout.tsx
+++ b/examples/e-commerce/src/pages/logout.tsx
@@ -5,7 +5,7 @@ export async function Logout(
 	{ component, app }: Contexts,
 ) {
 	// blank
-	component.renderSync("");
+	component.render("");
 	await app.domains.user.logout();
 	app.router.navigate("/");
 }
diff --git a/examples/e-commerce/src/pages/profile.tsx b/examples/e-commerce/src/pages/profile.tsx
index ea6c198..733d229 100644
--- a/examples/e-commerce/src/pages/profile.tsx
+++ b/examples/e-commerce/src/pages/profile.tsx
@@ -11,7 +11,7 @@ export async function Profile(
 		return;
 	}
 
-	component.renderSync(
+	component.render(
 		<Card compact shadow="md" className={"m-auto !w-96 bg-zinc-700"}>
 			<Card.Body>
 				<Card.Title level={2}>Profile</Card.Title>
diff --git a/examples/e-commerce/src/router.tsx b/examples/e-commerce/src/router.tsx
index e7937d5..5ec0035 100644
--- a/examples/e-commerce/src/router.tsx
+++ b/examples/e-commerce/src/router.tsx
@@ -12,7 +12,7 @@ import { Profile } from "./pages/profile";
 import classes from "./router.module.css";
 
 async function NotFound(_: ComponentProps<unknown>, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<div>
 			<h1>404</h1>
 			<p>Not found</p>
@@ -47,7 +47,7 @@ export async function Router(
 ) {
 	const user: UserType | undefined = await app.domains.user.getUser();
 	const Component = getComponent(window.location.pathname);
-	component.renderSync(
+	component.render(
 		<div id={classes.app}>
 			<Header user={user} className={"header"} />
 			<Component key="main" className={classes.main} />
diff --git a/examples/empty/src/Main.tsx b/examples/empty/src/Main.tsx
index 3821ed5..ebfdf09 100644
--- a/examples/empty/src/Main.tsx
+++ b/examples/empty/src/Main.tsx
@@ -6,7 +6,7 @@ export async function Main(
 	_: ComponentProps<unknown>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Card className={classes["card-wrapper"]}>
 			<Card.Body>
 				<Card.Title level={1}>Empty example</Card.Title>
diff --git a/examples/random-quote/src/Main.tsx b/examples/random-quote/src/Main.tsx
index 4fbe98c..c676d39 100644
--- a/examples/random-quote/src/Main.tsx
+++ b/examples/random-quote/src/Main.tsx
@@ -9,13 +9,13 @@ import {
 } from "./domains/quote";
 
 function Loading({}, { component }: Contexts) {
-	component.renderSync(<p>Loading...</p>);
+	component.render(<p>Loading...</p>);
 }
 function ErrorMessage(data: { error: unknown }, { component }: Contexts) {
 	if (data.error instanceof Error) {
-		component.renderSync(<p>{data.error.message}</p>);
+		component.render(<p>{data.error.message}</p>);
 	} else {
-		component.renderSync(<p>Unknown error</p>);
+		component.render(<p>Unknown error</p>);
 	}
 }
 
@@ -23,7 +23,7 @@ function Spot() {}
 
 export async function Main({}, { component }: Contexts) {
 	component._el.classList.add(...[classes.main]);
-	component.renderSync(
+	component.render(
 		<>
 			<RefreshQuoteButton key="refresh-button" />
 			<Spot key="quote" />
diff --git a/examples/random-quote/src/domains/quote/components/Quote.tsx b/examples/random-quote/src/domains/quote/components/Quote.tsx
index 79d8047..e2854e7 100644
--- a/examples/random-quote/src/domains/quote/components/Quote.tsx
+++ b/examples/random-quote/src/domains/quote/components/Quote.tsx
@@ -7,7 +7,7 @@ export async function QuoteComponent(
 	data: ComponentProps<{ quote: Quote }>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Prose className={classes.wrapper}>
 			<blockquote className={classes.quote}>
 				<p>{data.quote.content}</p>
diff --git a/examples/random-quote/src/domains/quote/components/RefreshQuoteButton.tsx b/examples/random-quote/src/domains/quote/components/RefreshQuoteButton.tsx
index 1b9e2b2..bd5512e 100644
--- a/examples/random-quote/src/domains/quote/components/RefreshQuoteButton.tsx
+++ b/examples/random-quote/src/domains/quote/components/RefreshQuoteButton.tsx
@@ -21,7 +21,7 @@ export async function RefreshQuoteButton(
 		});
 	};
 
-	component.renderSync(
+	component.render(
 		<Button key="button" type="button">
 			Refresh quote
 		</Button>,
diff --git a/packages/components/src/Alert/Alert.stories.tsx b/packages/components/src/Alert/Alert.stories.tsx
index f700b6a..a52a974 100644
--- a/packages/components/src/Alert/Alert.stories.tsx
+++ b/packages/components/src/Alert/Alert.stories.tsx
@@ -8,7 +8,7 @@ async function AlertStory(
 	props: ComponentProps<AlertPropsType>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(<Alert {...props}>This is an alert</Alert>);
+	component.render(<Alert {...props}>This is an alert</Alert>);
 }
 // biome-ignore lint/suspicious/noExplicitAny: storybook
 AlertStory.__storybook = (Alert as any).__storybook;
@@ -25,7 +25,7 @@ export default {
 export const Empty = {};
 
 export const AllAlert: StoryFn = async (_, { component }: Contexts) => {
-	component.renderSync(
+	component.render(
 		<div
 			style={{
 				display: "grid",
diff --git a/packages/components/src/Alert/index.tsx b/packages/components/src/Alert/index.tsx
index 87a2342..87920c6 100644
--- a/packages/components/src/Alert/index.tsx
+++ b/packages/components/src/Alert/index.tsx
@@ -29,5 +29,5 @@ export async function Alert(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
diff --git a/packages/components/src/Badge/Badge.stories.tsx b/packages/components/src/Badge/Badge.stories.tsx
index 8d991c2..ca6dd35 100644
--- a/packages/components/src/Badge/Badge.stories.tsx
+++ b/packages/components/src/Badge/Badge.stories.tsx
@@ -16,7 +16,7 @@ export default {
 export const Empty = {};
 
 export const AllBadge: StoryFn = async (_, { component }: Contexts) => {
-	component.renderSync(
+	component.render(
 		<div
 			style={{
 				display: "grid",
diff --git a/packages/components/src/Badge/index.tsx b/packages/components/src/Badge/index.tsx
index 1753216..a799194 100644
--- a/packages/components/src/Badge/index.tsx
+++ b/packages/components/src/Badge/index.tsx
@@ -55,5 +55,5 @@ export async function Badge(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
diff --git a/packages/components/src/Button/Button.stories.tsx b/packages/components/src/Button/Button.stories.tsx
index 68fa480..fa79eb7 100644
--- a/packages/components/src/Button/Button.stories.tsx
+++ b/packages/components/src/Button/Button.stories.tsx
@@ -5,7 +5,7 @@ import type { StoryFn } from "@seqflow/storybook";
 import { Button, type ButtonComponent, type ButtonPropsType } from ".";
 
 async function ButtonStory(props: ButtonPropsType, { component }: Contexts) {
-	component.renderSync(<Button {...props}>The button text</Button>);
+	component.render(<Button {...props}>The button text</Button>);
 }
 // biome-ignore lint/suspicious/noExplicitAny: storybook
 ButtonStory.__storybook = (Button as any).__storybook;
@@ -43,7 +43,7 @@ export const DisableButton: StoryFn = {
 
 export const TrasitionButton: StoryFn = {
 	component: async (_, { component }: Contexts) => {
-		component.renderSync(<Button>The button text</Button>);
+		component.render(<Button>The button text</Button>);
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
@@ -74,7 +74,7 @@ export const TrasitionButton: StoryFn = {
 };
 
 export const AllButtons: StoryFn = async (_, { component }: Contexts) => {
-	component.renderSync(
+	component.render(
 		<div
 			style={{
 				display: "grid",
diff --git a/packages/components/src/Button/index.tsx b/packages/components/src/Button/index.tsx
index 0364921..a992f64 100644
--- a/packages/components/src/Button/index.tsx
+++ b/packages/components/src/Button/index.tsx
@@ -109,7 +109,7 @@ export async function Button(
 		});
 	}
 	component._el.setAttribute("aria-live", "polite");
-	component.renderSync(
+	component.render(
 		<>
 			<span
 				key="l"
diff --git a/packages/components/src/Card/Card.stories.tsx b/packages/components/src/Card/Card.stories.tsx
index 8166bab..26aa938 100644
--- a/packages/components/src/Card/Card.stories.tsx
+++ b/packages/components/src/Card/Card.stories.tsx
@@ -4,7 +4,7 @@ import { Body, Card, type CardProps } from ".";
 import { Button } from "../Button";
 
 async function CardStory(props: CardProps, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Card {...props} className={"w-96 m-auto"}>
 			<Body>
 				<Card.Title level={1}>Card title</Card.Title>
@@ -32,7 +32,7 @@ export default {
 export const Empty = {};
 
 export const Centered: StoryFn<object> = async (_, { component }: Contexts) => {
-	component.renderSync(
+	component.render(
 		<Card shadow="md">
 			<Body className="items-center text-center">
 				<Card.Title level={1}>Card title</Card.Title>
@@ -49,7 +49,7 @@ export const ActionOnTop: StoryFn<object> = async (
 	_,
 	{ component }: Contexts,
 ) => {
-	component.renderSync(
+	component.render(
 		<Card shadow="md">
 			<Card.Body>
 				<Card.Actions>
diff --git a/packages/components/src/Card/index.tsx b/packages/components/src/Card/index.tsx
index 4d8ceb0..db47b29 100644
--- a/packages/components/src/Card/index.tsx
+++ b/packages/components/src/Card/index.tsx
@@ -34,7 +34,7 @@ export async function Card(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 export async function Body(
@@ -49,7 +49,7 @@ export async function Body(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 export interface TitlePropsType {
@@ -68,7 +68,7 @@ export async function Title(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 Title.tagName = () => "h2";
 
@@ -86,7 +86,7 @@ export async function Actions(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 Card.Body = Body;
diff --git a/packages/components/src/ChatBubble/ChatBubble.stories.tsx b/packages/components/src/ChatBubble/ChatBubble.stories.tsx
index 198ad76..a310b2a 100644
--- a/packages/components/src/ChatBubble/ChatBubble.stories.tsx
+++ b/packages/components/src/ChatBubble/ChatBubble.stories.tsx
@@ -6,7 +6,7 @@ async function ChatBubbleStory(
 	props: ChatBubbleProps,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<>
 			<ChatBubble {...props}>
 				<ChatBubble.Bubble>
@@ -59,5 +59,5 @@ export const AllColors: StoryFn<object> = async (
 		);
 	}
 
-	component.renderSync(elements);
+	component.render(elements);
 };
diff --git a/packages/components/src/ChatBubble/index.tsx b/packages/components/src/ChatBubble/index.tsx
index 6decd73..4d71c99 100644
--- a/packages/components/src/ChatBubble/index.tsx
+++ b/packages/components/src/ChatBubble/index.tsx
@@ -23,7 +23,7 @@ export async function ChatBubble(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 export interface BubbleProps {
@@ -59,6 +59,6 @@ async function Bubble(
 		});
 		return;
 	}
-	component.renderSync(children);
+	component.render(children);
 }
 ChatBubble.Bubble = Bubble;
diff --git a/packages/components/src/Checkbox/Checkbox.stories.tsx b/packages/components/src/Checkbox/Checkbox.stories.tsx
index c7c13da..3d9d6c3 100644
--- a/packages/components/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/components/src/Checkbox/Checkbox.stories.tsx
@@ -14,7 +14,7 @@ export const AllColors: StoryFn<object> = async (
 	_,
 	{ component }: Contexts,
 ) => {
-	component.renderSync(
+	component.render(
 		<div>
 			<Checkbox />
 			<Checkbox color="primary" />
@@ -29,7 +29,7 @@ export const AllColors: StoryFn<object> = async (
 };
 
 export const AllSizes: StoryFn<object> = async (_, { component }: Contexts) => {
-	component.renderSync(
+	component.render(
 		<div>
 			<Checkbox />
 			<Checkbox size="xs" />
diff --git a/packages/components/src/Divider/Divider.stories.tsx b/packages/components/src/Divider/Divider.stories.tsx
index f3ad955..e9f3dda 100644
--- a/packages/components/src/Divider/Divider.stories.tsx
+++ b/packages/components/src/Divider/Divider.stories.tsx
@@ -14,7 +14,7 @@ export const WithoutText: StoryFn = async function OR(
 	_: unknown,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<div className="flex w-full flex-col border-opacity-50">
 			<div className="card bg-base-300 rounded-box grid h-20 place-items-center">
 				content
@@ -31,7 +31,7 @@ export const WithText: StoryFn = async function OR(
 	_: unknown,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<div className="flex w-full flex-col border-opacity-50">
 			<div className="card bg-base-300 rounded-box grid h-20 place-items-center">
 				content
diff --git a/packages/components/src/Dropdown/Dropdown.stories.tsx b/packages/components/src/Dropdown/Dropdown.stories.tsx
index d353bbf..4950fc6 100644
--- a/packages/components/src/Dropdown/Dropdown.stories.tsx
+++ b/packages/components/src/Dropdown/Dropdown.stories.tsx
@@ -13,7 +13,7 @@ async function DropdownStory(
 	{ component }: Contexts,
 ) {
 	component._el.classList.add(...["pt-48", "pl-48"]);
-	component.renderSync(
+	component.render(
 		<Dropdown {...props}>
 			<Menu direction="vertical" size="md" className={["w-56", "shadow-md"]}>
 				<Menu.Item>
diff --git a/packages/components/src/Dropdown/index.tsx b/packages/components/src/Dropdown/index.tsx
index 37f8226..7ffa57a 100644
--- a/packages/components/src/Dropdown/index.tsx
+++ b/packages/components/src/Dropdown/index.tsx
@@ -68,7 +68,7 @@ export async function Dropdown(
 		btn.tabIndex = 0;
 	}
 
-	component.renderSync(
+	component.render(
 		<>
 			{btn}
 			{/*<Button color="ghost" className="rounded-btn">{label}</Button>*/}
diff --git a/packages/components/src/Footer/Footer.stories.tsx b/packages/components/src/Footer/Footer.stories.tsx
index 96114f8..e49d46e 100644
--- a/packages/components/src/Footer/Footer.stories.tsx
+++ b/packages/components/src/Footer/Footer.stories.tsx
@@ -5,7 +5,7 @@ async function FooterExample(
 	props: ComponentProps<FooterProps>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Footer {...props}>
 			<aside>
 				<p>
diff --git a/packages/components/src/Footer/index.tsx b/packages/components/src/Footer/index.tsx
index 22fe5d1..919e55a 100644
--- a/packages/components/src/Footer/index.tsx
+++ b/packages/components/src/Footer/index.tsx
@@ -21,6 +21,6 @@ export async function Footer(
 	}
 	component._el.classList.add(...classes);
 
-	component.renderSync(children);
+	component.render(children);
 }
 Footer.tagName = () => "footer";
diff --git a/packages/components/src/Form/Form.stories.tsx b/packages/components/src/Form/Form.stories.tsx
index b09f5df..1644dfb 100644
--- a/packages/components/src/Form/Form.stories.tsx
+++ b/packages/components/src/Form/Form.stories.tsx
@@ -12,7 +12,7 @@ async function FormExample(
 	props: ComponentProps<undefined>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Form>
 			<FormField id="username-label" label="username">
 				<TextInput
@@ -55,7 +55,7 @@ export default {
 export const Empty = {};
 
 async function RequiredNumberInputForm(_: unknown, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<>
 			<Form>
 				<FormField label={"Choose a value"}>
@@ -122,7 +122,7 @@ export const NumberInputStory: StoryFn = {
 };
 
 async function RequiredTextInputForm(_: unknown, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<>
 			<Form>
 				<FormField label={"Choose a value"}>
@@ -191,7 +191,7 @@ export const TextInputStory: StoryFn = {
 };
 
 async function AsyncSubmitionForm(_: unknown, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<>
 			<Form key="form">
 				<FormField label={"Choose a value"}>
diff --git a/packages/components/src/Form/index.tsx b/packages/components/src/Form/index.tsx
index 4de6edd..93a13d2 100644
--- a/packages/components/src/Form/index.tsx
+++ b/packages/components/src/Form/index.tsx
@@ -32,7 +32,7 @@ export async function Form(
 			signal: component.ac.signal,
 		},
 	);
-	component.renderSync(children);
+	component.render(children);
 
 	const el = component._el as FormComponent;
 	el.runAsync = async (fn) => {
diff --git a/packages/components/src/FormField/FormField.stories.tsx b/packages/components/src/FormField/FormField.stories.tsx
index d2b198e..e22a1cc 100644
--- a/packages/components/src/FormField/FormField.stories.tsx
+++ b/packages/components/src/FormField/FormField.stories.tsx
@@ -9,7 +9,7 @@ async function FormFieldExample(
 	props: ComponentProps<FormFieldPropsType>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<FormField id="username-label" {...props}>
 			<TextInput
 				id="username"
@@ -36,7 +36,7 @@ export default {
 export const Empty = {};
 
 export const WithError: StoryFn = async (_, { component }: Contexts) => {
-	component.renderSync(
+	component.render(
 		<FormField label="Username" errorMessage="Username is required">
 			<TextInput name="username" placeholder="Insert username" />
 		</FormField>,
diff --git a/packages/components/src/FormField/index.tsx b/packages/components/src/FormField/index.tsx
index a8d4a9e..2e56d14 100644
--- a/packages/components/src/FormField/index.tsx
+++ b/packages/components/src/FormField/index.tsx
@@ -76,7 +76,7 @@ export async function FormField(
 		</div>
 	);
 
-	component.renderSync(
+	component.render(
 		<>
 			{top}
 			{children}
diff --git a/packages/components/src/Hero/Hero.stories.tsx b/packages/components/src/Hero/Hero.stories.tsx
index 451ccf6..1f23db8 100644
--- a/packages/components/src/Hero/Hero.stories.tsx
+++ b/packages/components/src/Hero/Hero.stories.tsx
@@ -4,7 +4,7 @@ import { Button } from "../Button";
 import { Heading } from "../Typography";
 
 async function HeroStory(_: unknown, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Hero className={["bg-base-200", "min-h-screen"]}>
 			<Hero.Content className="text-center">
 				<div className="max-w-md">
diff --git a/packages/components/src/Hero/index.tsx b/packages/components/src/Hero/index.tsx
index 63b1141..638850a 100644
--- a/packages/components/src/Hero/index.tsx
+++ b/packages/components/src/Hero/index.tsx
@@ -13,7 +13,7 @@ export async function Hero(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 export async function HeroContent(
@@ -29,7 +29,7 @@ export async function HeroContent(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 Hero.Content = HeroContent;
diff --git a/packages/components/src/Link/Link.stories.tsx b/packages/components/src/Link/Link.stories.tsx
index 3231694..f77ca6a 100644
--- a/packages/components/src/Link/Link.stories.tsx
+++ b/packages/components/src/Link/Link.stories.tsx
@@ -5,7 +5,7 @@ async function LinkStory(
 	{ children, ...props }: ComponentProps<LinkPropsType>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(<Link {...props}>This is a link</Link>);
+	component.render(<Link {...props}>This is a link</Link>);
 }
 // biome-ignore lint/suspicious/noExplicitAny: storybook
 LinkStory.__storybook = (Link as any).__storybook;
@@ -23,7 +23,7 @@ export const AllLinks = async function AllLinks(
 	_: ComponentProps<unknown>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<div>
 			<Link href="https://seqflow.dev">Link</Link>
 			<Link showAsButton="primary" href="https://seqflow.dev">
diff --git a/packages/components/src/Link/index.tsx b/packages/components/src/Link/index.tsx
index 7d1d0c4..ccc4f81 100644
--- a/packages/components/src/Link/index.tsx
+++ b/packages/components/src/Link/index.tsx
@@ -122,6 +122,6 @@ export async function Link(
 	el.href = href;
 	el.setAttribute("href", href);
 
-	component.renderSync(children);
+	component.render(children);
 }
 Link.tagName = () => "a";
diff --git a/packages/components/src/Loading/Loading.stories.tsx b/packages/components/src/Loading/Loading.stories.tsx
index a8861ce..7ca3a26 100644
--- a/packages/components/src/Loading/Loading.stories.tsx
+++ b/packages/components/src/Loading/Loading.stories.tsx
@@ -13,7 +13,7 @@ export default {
 export const Empty = {};
 
 export const Types: StoryFn = async function OR(_, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<div
 			style={{
 				display: "grid",
@@ -40,7 +40,7 @@ export const Types: StoryFn = async function OR(_, { component }: Contexts) {
 };
 
 export const Sizes: StoryFn = async function OR(_, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<div
 			style={{
 				display: "grid",
diff --git a/packages/components/src/Menu/Menu.stories.tsx b/packages/components/src/Menu/Menu.stories.tsx
index 6d74249..74c845b 100644
--- a/packages/components/src/Menu/Menu.stories.tsx
+++ b/packages/components/src/Menu/Menu.stories.tsx
@@ -5,7 +5,7 @@ async function MenuStory(
 	{ children, ...props }: ComponentProps<MenuPropsType>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Menu {...props} className={"w-56"}>
 			<Menu.Item>
 				<a href="/#">Item 1</a>
diff --git a/packages/components/src/Menu/index.tsx b/packages/components/src/Menu/index.tsx
index 5196995..15071ea 100644
--- a/packages/components/src/Menu/index.tsx
+++ b/packages/components/src/Menu/index.tsx
@@ -36,7 +36,7 @@ export async function Menu(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 Menu.tagName = () => "ul";
 
@@ -51,7 +51,7 @@ export async function MenuItem(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 MenuItem.tagName = () => "li";
 
@@ -63,7 +63,7 @@ export async function SubMenu(
 	{ label, children }: ComponentProps<SubMenuPropsType>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<>
 			<summary
 				className={["btn", "btn-ghost"]}
@@ -90,7 +90,7 @@ export async function SubMenuItem(
 	component._el.style.alignItems = "flex-start";
 	component._el.style.justifyContent = "flex-start";
 
-	component.renderSync(children);
+	component.render(children);
 }
 SubMenuItem.tagName = () => "li";
 
diff --git a/packages/components/src/Modal/Modal.stories.tsx b/packages/components/src/Modal/Modal.stories.tsx
index d6c9c49..84485bb 100644
--- a/packages/components/src/Modal/Modal.stories.tsx
+++ b/packages/components/src/Modal/Modal.stories.tsx
@@ -7,7 +7,7 @@ async function ModalStory(
 	{ children, ...props }: ComponentProps<ModalType>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<>
 			<Button type="button" key="open-modal" className="btn">
 				Open Modal
diff --git a/packages/components/src/Modal/index.tsx b/packages/components/src/Modal/index.tsx
index 591938d..c1bbcfd 100644
--- a/packages/components/src/Modal/index.tsx
+++ b/packages/components/src/Modal/index.tsx
@@ -33,7 +33,7 @@ export async function Modal(
 		}
 	}
 
-	component.renderSync(
+	component.render(
 		<>
 			<div className={modalBoxClasses}>{children}</div>
 			{outside}
@@ -48,7 +48,7 @@ export async function ModalAction(
 ) {
 	component._el.classList.add("modal-action");
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 export async function ModalClose(
@@ -57,7 +57,7 @@ export async function ModalClose(
 ) {
 	const form = component._el as HTMLFormElement;
 	form.method = "dialog";
-	component.renderSync(children);
+	component.render(children);
 }
 ModalClose.tagName = () => "form";
 
diff --git a/packages/components/src/Navbar/Navbar.stories.tsx b/packages/components/src/Navbar/Navbar.stories.tsx
index e997b3b..91f08f5 100644
--- a/packages/components/src/Navbar/Navbar.stories.tsx
+++ b/packages/components/src/Navbar/Navbar.stories.tsx
@@ -7,7 +7,7 @@ import { Link } from "../Link";
 import { Menu } from "../Menu";
 
 async function NavbarStory(_: unknown, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Navbar className={["bg-base-100", "shadow-md"]}>
 			<Button color="ghost" className="text-xl">
 				SeqFlowJS
@@ -32,7 +32,7 @@ export const NavbarWithStartCenterEnd: StoryFn = async (
 	_,
 	{ component }: Contexts,
 ) => {
-	component.renderSync(
+	component.render(
 		<Navbar className={"bg-base-100"}>
 			<Navbar.Start>
 				<Button color="ghost" shape="circle" className="text-xl">
@@ -57,7 +57,7 @@ export const NavbarResponsive: StoryFn = async (
 	_: ComponentProps<unknown>,
 	{ component }: Contexts,
 ) => {
-	component.renderSync(
+	component.render(
 		<Navbar className={"bg-base-100"}>
 			<Navbar.Start>
 				<Dropdown label={"X"} className={["lg:hidden"]}>
@@ -144,7 +144,7 @@ export const NavbarResponsive: StoryFn = async (
 
 export const WithDropdownAndLinkStory: StoryFn =
 	async function WithDropdownAndLinkStory(_, { component }: Contexts) {
-		component.renderSync(
+		component.render(
 			<Navbar>
 				<Navbar.Start>SeqFlowJS</Navbar.Start>
 				<Navbar.Center>
diff --git a/packages/components/src/Navbar/index.tsx b/packages/components/src/Navbar/index.tsx
index 3b42fba..afc4885 100644
--- a/packages/components/src/Navbar/index.tsx
+++ b/packages/components/src/Navbar/index.tsx
@@ -14,7 +14,7 @@ export async function Navbar(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 export async function NavbarStart(
@@ -31,7 +31,7 @@ export async function NavbarStart(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 export async function NavbarCenter(
@@ -48,7 +48,7 @@ export async function NavbarCenter(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 export async function NavbarEnd(
@@ -65,7 +65,7 @@ export async function NavbarEnd(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 
 Navbar.Start = NavbarStart;
diff --git a/packages/components/src/Select/Select.stories.tsx b/packages/components/src/Select/Select.stories.tsx
index e5fb52d..201199a 100644
--- a/packages/components/src/Select/Select.stories.tsx
+++ b/packages/components/src/Select/Select.stories.tsx
@@ -2,7 +2,7 @@ import type { Contexts } from "@seqflow/seqflow";
 import { Select, type SelectPropsType } from ".";
 
 async function SelectStory(props: SelectPropsType, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Select {...props}>
 			<option selected>Option 1</option>
 			<option>Option 2</option>
diff --git a/packages/components/src/Select/index.tsx b/packages/components/src/Select/index.tsx
index febab65..e55ee78 100644
--- a/packages/components/src/Select/index.tsx
+++ b/packages/components/src/Select/index.tsx
@@ -67,7 +67,7 @@ export async function Select(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 
 	if (required) {
 		component._el.setAttribute("required", "");
diff --git a/packages/components/src/Tabs/Tabs.stories.tsx b/packages/components/src/Tabs/Tabs.stories.tsx
index e1f25a6..616c4d1 100644
--- a/packages/components/src/Tabs/Tabs.stories.tsx
+++ b/packages/components/src/Tabs/Tabs.stories.tsx
@@ -7,7 +7,7 @@ async function TabsExample(
 	props: ComponentProps<TabsProps>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Tabs {...props}>
 			<Tabs.TabHeader defaultChecked label="Tab 1" />
 			<Tabs.TabContent className={"p-10"}>Tab content 1</Tabs.TabContent>
@@ -65,7 +65,7 @@ export const DefaultCheckedTabs: StoryFn = {
 		props: ComponentProps<TabsProps>,
 		{ component }: Contexts,
 	) {
-		component.renderSync(
+		component.render(
 			<Tabs {...props}>
 				<Tabs.TabHeader label="Tab 1" />
 				<Tabs.TabContent>Tab content 1</Tabs.TabContent>
diff --git a/packages/components/src/Tabs/index.tsx b/packages/components/src/Tabs/index.tsx
index af4a55c..3fa674a 100644
--- a/packages/components/src/Tabs/index.tsx
+++ b/packages/components/src/Tabs/index.tsx
@@ -44,7 +44,7 @@ export async function Tabs(
 			.join(" ");
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 Tabs.tagName = () => "div";
 
@@ -78,7 +78,7 @@ export async function TabContent(
 	component._el.classList.add("tab-content");
 	component._el.role = "tabpanel";
 
-	component.renderSync(children);
+	component.render(children);
 }
 Tabs.TabContent = TabContent;
 
diff --git a/packages/components/src/TextInput/TextInput.stories.tsx b/packages/components/src/TextInput/TextInput.stories.tsx
index 87c71f9..1048673 100644
--- a/packages/components/src/TextInput/TextInput.stories.tsx
+++ b/packages/components/src/TextInput/TextInput.stories.tsx
@@ -48,7 +48,7 @@ export const SetError: StoryFn<object> = {
 
 export const SetErrorWithFormField: StoryFn<object> = {
 	component: async (_, { component }) => {
-		component.renderSync(
+		component.render(
 			<FormField label="username">
 				<TextInput
 					withBorder
diff --git a/packages/components/src/Typography/Heading.stories.tsx b/packages/components/src/Typography/Heading.stories.tsx
index 8036a4e..a270c0f 100644
--- a/packages/components/src/Typography/Heading.stories.tsx
+++ b/packages/components/src/Typography/Heading.stories.tsx
@@ -6,7 +6,7 @@ async function HeadingStory(
 	{ level }: ComponentProps<HeadingProps>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Prose className="m-auto">
 			<Heading level={level}>The title of the heading</Heading>
 		</Prose>,
@@ -29,7 +29,7 @@ export const AllHeading: StoryFn<object> = async (
 	{ component }: Contexts,
 ) => {
 	const title = "The heading";
-	component.renderSync(
+	component.render(
 		<Prose className="m-auto">
 			<Heading level={1}>{`${title} 1`}</Heading>
 			<Heading level={2}>{`${title} 2`}</Heading>
diff --git a/packages/components/src/Typography/Prose.stories.tsx b/packages/components/src/Typography/Prose.stories.tsx
index 405015f..4892a00 100644
--- a/packages/components/src/Typography/Prose.stories.tsx
+++ b/packages/components/src/Typography/Prose.stories.tsx
@@ -6,7 +6,7 @@ async function HeadingStory(
 	{ children, ...props }: ComponentProps<HeadingProps>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Prose>
 			<Heading {...props}>Heading</Heading>
 			<p>
@@ -32,7 +32,7 @@ export const Simple: StoryFn<{ label: string }> = async (
 	{ label },
 	{ component }: Contexts,
 ) => {
-	component.renderSync(
+	component.render(
 		<Prose>
 			<Heading>{label}</Heading>
 			<p>
@@ -49,7 +49,7 @@ export const MoreText: StoryFn<{ label: string }> = async (
 	{ label },
 	{ component }: Contexts,
 ) => {
-	component.renderSync(
+	component.render(
 		<Prose className="m-auto">
 			<Heading>{label}</Heading>
 			<p>
diff --git a/packages/components/src/Typography/index.tsx b/packages/components/src/Typography/index.tsx
index 175962f..a08148b 100644
--- a/packages/components/src/Typography/index.tsx
+++ b/packages/components/src/Typography/index.tsx
@@ -11,7 +11,7 @@ export async function Prose(
 		});
 		return;
 	}
-	component.renderSync(children);
+	component.render(children);
 }
 
 export interface HeadingProps {
@@ -30,7 +30,7 @@ export async function Heading(
 		return;
 	}
 
-	component.renderSync(children);
+	component.render(children);
 }
 Heading.tagName = (props: HeadingProps) => {
 	return `h${props.level || 1}`;
diff --git a/packages/components/stories/foo.tsx b/packages/components/stories/foo.tsx
index ed74536..966cad0 100644
--- a/packages/components/stories/foo.tsx
+++ b/packages/components/stories/foo.tsx
@@ -3,14 +3,14 @@ import { Button } from '../src/index.tsx';
 import * as seqflow from '@seqflow/seqflow'
 
 async function Main({}, { component, app }: seqflow.Contexts) {
-    component.renderSync(
+    component.render(
         component.createDOMElement(
             Button,
             {},
             'Hello'
         )
     )
-    // this.renderSync(
+    // this.render(
     //     <div>
     //         <Button title="Hello" />
     //     </div>
diff --git a/packages/seqflow/README.md b/packages/seqflow/README.md
index ae0d8ee..c4e36ce 100644
--- a/packages/seqflow/README.md
+++ b/packages/seqflow/README.md
@@ -27,7 +27,7 @@ async function getRandomQuote(): Promise<Quote> {
 
 export async function Main({}, { component }: Contexts) {
 	// Render loading message
-	component.renderSync(
+	component.render(
 		<p>Loading...</p>
 	);
 
@@ -35,7 +35,7 @@ export async function Main({}, { component }: Contexts) {
 	const quote = await getRandomQuote();
 
 	// Replace loading message with quote
-	component.renderSync(
+	component.render(
 		<div>
 			<div>{quote.content}</div>
 			<div>{quote.author}</div>
diff --git a/packages/seqflow/src/component.ts b/packages/seqflow/src/component.ts
index 9044246..b39ef21 100644
--- a/packages/seqflow/src/component.ts
+++ b/packages/seqflow/src/component.ts
@@ -470,13 +470,26 @@ export class SeqFlowComponentContext {
 		return el;
 	}
 
+	/**
+	 * @deprecated Use render() instead
+	 */
 	renderSync(
 		element: string | number | null | undefined | JSX.Element | JSX.Element[],
+	) {
+		return this.render(element);
+	}
+
+	/**
+	 * Synchronously renders the given element into the component's DOM.
+	 * @param element The element to render
+	 */
+	render(
+		element: string | number | null | undefined | JSX.Element | JSX.Element[],
 	) {
 		// Remove all the content previoursly rendered
 		this._el.innerHTML = "";
 
-		// If the developer invokes `renderSync` multiple times
+		// If the developer invokes `sync` multiple times
 		// we need to unmount all the children
 		// `this.c` contains all the children, the old and the new ones
 		// In fact `createDOMElement` creates children and only after this method is called.
@@ -525,14 +538,14 @@ export class SeqFlowComponentContext {
 				}
 				// TODO: we should throw an error or ignore it?
 				this.app.log.error({
-					message: "renderSync: invalid element",
+					message: "sync: invalid element",
 					data: { element },
 				});
 				break;
 			default:
 				// TODO: we should throw an error or ignore it?
 				this.app.log.error({
-					message: "renderSync: invalid element",
+					message: "sync: invalid element",
 					data: { element },
 				});
 				break;
diff --git a/packages/seqflow/tests/inner/child.test.tsx b/packages/seqflow/tests/inner/child.test.tsx
index b5475c4..ba6faf6 100644
--- a/packages/seqflow/tests/inner/child.test.tsx
+++ b/packages/seqflow/tests/inner/child.test.tsx
@@ -25,7 +25,7 @@ afterEach(() => {
 });
 
 test("child: findChild", () => {
-	component.renderSync(<div key="div1" />);
+	component.render(<div key="div1" />);
 	expect(document.body.innerHTML).toBe('<div data-global-key="0"></div>');
 
 	const a = document.querySelector("div[data-global-key='0']");
@@ -35,7 +35,7 @@ test("child: findChild", () => {
 	expect(component.findChild("foo")).toBe(null);
 });
 test("child: getChild", () => {
-	component.renderSync(<div key="div1" />);
+	component.render(<div key="div1" />);
 	expect(document.body.innerHTML).toBe('<div data-global-key="0"></div>');
 
 	const a = document.querySelector("div[data-global-key='0']");
@@ -45,14 +45,14 @@ test("child: getChild", () => {
 	expect(() => component.getChild("foo")).toThrow();
 });
 test("child: replaceChild", async () => {
-	component.renderSync(<div key="div1">A</div>);
+	component.render(<div key="div1">A</div>);
 	expect(document.body.innerHTML).toBe('<div data-global-key="0">A</div>');
 
 	await component.replaceChild("div1", () => <div key="div1">B</div>);
 	expect(document.body.innerHTML).toBe('<div data-global-key="1">B</div>');
 });
 test("child: replaceChild - not found", async () => {
-	component.renderSync(<div key="div1">A</div>);
+	component.render(<div key="div1">A</div>);
 	expect(document.body.innerHTML).toBe('<div data-global-key="0">A</div>');
 
 	expect(async () =>
@@ -60,7 +60,7 @@ test("child: replaceChild - not found", async () => {
 	).rejects.toThrow();
 });
 test("child: replaceChild - async", async () => {
-	component.renderSync(<div key="div1">A</div>);
+	component.render(<div key="div1">A</div>);
 	expect(document.body.innerHTML).toBe('<div data-global-key="0">A</div>');
 
 	await component.replaceChild("div1", async () => {
@@ -74,9 +74,9 @@ test("child: render children", async () => {
 		{ component }: Contexts,
 	) {
 		component._el.setAttribute("parent", "true");
-		component.renderSync(<div data-foo="bar">{children}</div>);
+		component.render(<div data-foo="bar">{children}</div>);
 	}
-	component.renderSync(
+	component.render(
 		<div>
 			<MyComponent>
 				<div key="div1">A</div>
@@ -92,7 +92,7 @@ test("child: render children with id", async () => {
 		{ children }: ComponentProps<unknown>,
 		{ component }: Contexts,
 	) {}
-	component.renderSync(<MyComponent id="foo" />);
+	component.render(<MyComponent id="foo" />);
 	expect(document.body.innerHTML).toBe(
 		'<div data-global-key="1" id="foo"></div>',
 	);
@@ -102,13 +102,13 @@ test("child: replaceChild should unmount all the current components and their li
 		{ children }: ComponentProps<unknown>,
 		{ component }: Contexts,
 	) {
-		component.renderSync(<div data-component="my-component-1">{children}</div>);
+		component.render(<div data-component="my-component-1">{children}</div>);
 	}
 	function MyComponent2(
 		{ children }: ComponentProps<unknown>,
 		{ component }: Contexts,
 	) {
-		component.renderSync(<div data-component="my-component-2">{children}</div>);
+		component.render(<div data-component="my-component-2">{children}</div>);
 	}
 
 	let counter = 0;
@@ -116,7 +116,7 @@ test("child: replaceChild should unmount all the current components and their li
 		counter++;
 	}
 
-	component.renderSync(
+	component.render(
 		<MyComponent1 key="spot">
 			<button type="button" onClick={incrementCounter}>
 				Click me
@@ -156,7 +156,7 @@ test("child: renderSync should unmount all the current components and their list
 		{ children }: ComponentProps<unknown>,
 		{ component }: Contexts,
 	) {
-		component.renderSync(<div data-component="my-component-1">{children}</div>);
+		component.render(<div data-component="my-component-1">{children}</div>);
 	}
 
 	let counter = 0;
@@ -164,7 +164,7 @@ test("child: renderSync should unmount all the current components and their list
 		counter++;
 	}
 
-	component.renderSync(
+	component.render(
 		<MyComponent1 key="spot">
 			<button type="button" onClick={incrementCounter}>
 				Click me
@@ -180,7 +180,7 @@ test("child: renderSync should unmount all the current components and their list
 	firstDiv.click();
 	await waitFor(() => expect(counter).toBe(1));
 
-	component.renderSync(<div>Replace the whole content</div>);
+	component.render(<div>Replace the whole content</div>);
 
 	firstDiv.click();
 	await sleep(100);
@@ -188,10 +188,10 @@ test("child: renderSync should unmount all the current components and their list
 });
 test("child: className & style", async () => {
 	function MyComponent1(_: ComponentProps<unknown>, { component }: Contexts) {
-		component.renderSync("foo");
+		component.render("foo");
 	}
 
-	component.renderSync(
+	component.render(
 		<MyComponent1 className={"the-class-name"} style={{ height: "30px" }} />,
 	);
 	expect(document.body.innerHTML).toBe(
diff --git a/packages/seqflow/tests/inner/dom.test.tsx b/packages/seqflow/tests/inner/dom.test.tsx
index 79e73dc..35b0340 100644
--- a/packages/seqflow/tests/inner/dom.test.tsx
+++ b/packages/seqflow/tests/inner/dom.test.tsx
@@ -23,7 +23,7 @@ afterEach(() => {
 
 test("domEvent: click button", async () => {
 	const abortController = new AbortController();
-	component.renderSync(
+	component.render(
 		<button type="button" key="div1">
 			Button
 		</button>,
@@ -61,7 +61,7 @@ test("domEvent: click button", async () => {
 // I will execute the handlers registed on the current element
 // I will not execute the handles registered on the parent elements
 test("domEvent: stopPropagation", async () => {
-	component.renderSync(
+	component.render(
 		<button type="button" key="div1">
 			Button
 		</button>,
@@ -130,7 +130,7 @@ test("domEvent: stopPropagation", async () => {
 // I will not execute the remain handlers and the handles registered on the parent elements
 // NB: stopImmediatePropagation implies stopPropagation
 test("domEvent: stopImmediatePropagation", async () => {
-	component.renderSync(
+	component.render(
 		<button type="button" key="div1">
 			Button
 		</button>,
@@ -195,7 +195,7 @@ test("domEvent: stopImmediatePropagation", async () => {
 });
 
 test("domEvent: prevent default", async () => {
-	component.renderSync(
+	component.render(
 		<form key="form">
 			<button type="button" key="submitButton">
 				Button
diff --git a/packages/seqflow/tests/inner/lifecycle.test.tsx b/packages/seqflow/tests/inner/lifecycle.test.tsx
index 4bac4b6..43dbb8a 100644
--- a/packages/seqflow/tests/inner/lifecycle.test.tsx
+++ b/packages/seqflow/tests/inner/lifecycle.test.tsx
@@ -30,17 +30,17 @@ test("lifecicle", async () => {
 		clickCount++;
 	}
 	async function Button(_: ComponentProps<unknown>, { component }: Contexts) {
-		component.renderSync(
+		component.render(
 			<button type="button" onClick={clicked}>
 				Button
 			</button>,
 		);
 	}
 	async function A(_: ComponentProps<unknown>, { component }: Contexts) {
-		component.renderSync(<Button />);
+		component.render(<Button />);
 	}
 
-	component.renderSync(<A />);
+	component.render(<A />);
 
 	expect(clickCount).toBe(0);
 	(await screen.findByText(/Button/i)).click();
diff --git a/packages/seqflow/tests/inner/onClick.test.tsx b/packages/seqflow/tests/inner/onClick.test.tsx
index a32fe02..e37f883 100644
--- a/packages/seqflow/tests/inner/onClick.test.tsx
+++ b/packages/seqflow/tests/inner/onClick.test.tsx
@@ -25,7 +25,7 @@ test("onClick: lifecycle", async () => {
 	function clicked() {
 		clickCount++;
 	}
-	component.renderSync(
+	component.render(
 		<button type="button" onClick={clicked} key="div1">
 			Button
 		</button>,
diff --git a/packages/seqflow/tests/inner/render.test.tsx b/packages/seqflow/tests/inner/render.test.tsx
index 85eeead..948f2bb 100644
--- a/packages/seqflow/tests/inner/render.test.tsx
+++ b/packages/seqflow/tests/inner/render.test.tsx
@@ -24,22 +24,22 @@ afterEach(() => {
 });
 
 test("render: text", () => {
-	component.renderSync("foo");
+	component.render("foo");
 
 	expect(document.body.innerHTML).toBe("foo");
 });
 test("render: text encoded", () => {
-	component.renderSync("<div></div>");
+	component.render("<div></div>");
 
 	expect(document.body.innerHTML).toBe("&lt;div&gt;&lt;/div&gt;");
 });
 test("render: child", () => {
-	component.renderSync(<div />);
+	component.render(<div />);
 
 	expect(document.body.innerHTML).toBe("<div></div>");
 });
 test("render: child child", () => {
-	component.renderSync(
+	component.render(
 		<div>
 			<div />
 		</div>,
@@ -48,31 +48,31 @@ test("render: child child", () => {
 	expect(document.body.innerHTML).toBe("<div><div></div></div>");
 });
 test('render: "data-*" properties are forwarded to div', () => {
-	component.renderSync(<div data-foo="bar" />);
+	component.render(<div data-foo="bar" />);
 
 	expect(document.body.innerHTML).toBe('<div data-foo="bar"></div>');
 });
 test('render: "data-*" properties are forwarded to div', () => {
-	component.renderSync(<div id="foo" />);
+	component.render(<div id="foo" />);
 
 	expect(document.body.innerHTML).toBe('<div id="foo"></div>');
 });
 test("render: className can be string or array of string", () => {
-	component.renderSync(<div className={"foo bar"} />);
+	component.render(<div className={"foo bar"} />);
 	expect(document.body.innerHTML).toBe('<div class="foo bar"></div>');
 
-	component.renderSync(<div className={["foo", "bar"]} />);
+	component.render(<div className={["foo", "bar"]} />);
 	expect(document.body.innerHTML).toBe('<div class="foo bar"></div>');
 });
 test("render: htmlFor is string", () => {
-	component.renderSync(<label htmlFor="foo_bar" />);
+	component.render(<label htmlFor="foo_bar" />);
 	expect(document.body.innerHTML).toBe('<label for="foo_bar"></label>');
 });
 test("render: style can be string or object", () => {
-	component.renderSync(<div style={"background: red;"} />);
+	component.render(<div style={"background: red;"} />);
 	expect(document.body.innerHTML).toBe('<div style="background: red;"></div>');
 
-	component.renderSync(<div style={{ background: "red" }} />);
+	component.render(<div style={{ background: "red" }} />);
 	expect(document.body.innerHTML).toBe('<div style="background: red;"></div>');
 });
 test("render: style in component", () => {
@@ -80,15 +80,15 @@ test("render: style in component", () => {
 		_: ComponentProps<unknown>,
 		{ component, app }: Contexts,
 	) {
-		component.renderSync(<span>WOW</span>);
+		component.render(<span>WOW</span>);
 	}
-	component.renderSync(<MyComponent style={"background: red;"} />);
+	component.render(<MyComponent style={"background: red;"} />);
 	expect(document.body.innerHTML).toBe(
 		'<div data-global-key="1" style="background: red;"><span>WOW</span></div>',
 	);
 });
 test("render: fragment", () => {
-	component.renderSync(
+	component.render(
 		<>
 			<div />
 		</>,
@@ -100,54 +100,54 @@ test("render: component", () => {
 		_: ComponentProps<unknown>,
 		{ component, app }: Contexts,
 	) {
-		component.renderSync("foo");
+		component.render("foo");
 	}
 
-	component.renderSync(<MyComponent />);
+	component.render(<MyComponent />);
 
 	expect(document.body.innerHTML).toBe('<div data-global-key="1">foo</div>');
 });
 
 test("render: number", () => {
-	component.renderSync(4);
+	component.render(4);
 
 	expect(document.body.innerHTML).toBe("4");
 });
 test("render: child number", () => {
-	component.renderSync(<div>{4}</div>);
+	component.render(<div>{4}</div>);
 
 	expect(document.body.innerHTML).toBe("<div>4</div>");
 });
 test("render: undefined", () => {
-	component.renderSync(undefined);
+	component.render(undefined);
 
 	expect(document.body.innerHTML).toBe("");
 });
 test("render: child undefined", () => {
-	component.renderSync(<div>{undefined}</div>);
+	component.render(<div>{undefined}</div>);
 
 	expect(document.body.innerHTML).toBe("<div></div>");
 });
 test("render: object", () => {
 	// @ts-ignore
-	component.renderSync({ foo: "bar" });
+	component.render({ foo: "bar" });
 
 	expect(document.body.innerHTML).toBe("");
 });
 test("render: child object", () => {
 	// @ts-ignore
-	component.renderSync(<div>{{ foo: "bar" }}</div>);
+	component.render(<div>{{ foo: "bar" }}</div>);
 
 	expect(document.body.innerHTML).toBe("<div></div>");
 });
 test("render: fragment", () => {
-	component.renderSync(<>{4}</>);
+	component.render(<>{4}</>);
 
 	expect(document.body.innerHTML).toBe("4");
 });
 
 test("render: svg", () => {
-	component.renderSync(
+	component.render(
 		<svg:svg role="img" aria-label="foo">
 			{/* @ts-ignore */}
 			<svg:path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
@@ -160,7 +160,7 @@ test("render: svg", () => {
 });
 
 test("render: math", () => {
-	component.renderSync(
+	component.render(
 		<math:math>
 			<math:mfrac>
 				<math:msup>
@@ -190,35 +190,31 @@ test("render: wrong symbol", () => {
 });
 
 test("render: attr null & underfined", () => {
-	component.renderSync(
+	component.render(
 		<div data-1={"1"} data-null={null} data-undefined={undefined} />,
 	);
 
 	expect(document.body.innerHTML).toBe('<div data-1="1"></div>');
 });
 test("render: attr bool", () => {
-	component.renderSync(
-		<div data-1={"1"} data-true={true} data-false={false} />,
-	);
+	component.render(<div data-1={"1"} data-true={true} data-false={false} />);
 
 	expect(document.body.innerHTML).toBe('<div data-1="1" data-true=""></div>');
 });
 test("render: attr number", () => {
-	component.renderSync(
-		<div data-1={"1"} data-0={0} data-10={10} data-20={-20} />,
-	);
+	component.render(<div data-1={"1"} data-0={0} data-10={10} data-20={-20} />);
 
 	expect(document.body.innerHTML).toBe(
 		'<div data-1="1" data-0="0" data-10="10" data-20="-20"></div>',
 	);
 });
 test("render: fn", () => {
-	component.renderSync(<div data-1={"1"} data-fn={() => {}} />);
+	component.render(<div data-1={"1"} data-fn={() => {}} />);
 
 	expect(document.body.innerHTML).toBe('<div data-1="1"></div>');
 });
 test("render: symbol", () => {
-	component.renderSync(<div data-1={"1"} data-symbol={Symbol.for("foo")} />);
+	component.render(<div data-1={"1"} data-symbol={Symbol.for("foo")} />);
 
 	expect(document.body.innerHTML).toBe('<div data-1="1"></div>');
 });
@@ -227,7 +223,7 @@ test("render: sync throw", () => {
 	function MyComponent() {
 		throw new Error("foo");
 	}
-	component.renderSync(<MyComponent />);
+	component.render(<MyComponent />);
 
 	expect(document.body.innerHTML).toBe('<div data-global-key="1"></div>');
 });
@@ -235,7 +231,7 @@ test("render: async throw", () => {
 	async function MyComponent() {
 		throw new Error("foo");
 	}
-	component.renderSync(<MyComponent />);
+	component.render(<MyComponent />);
 
 	expect(document.body.innerHTML).toBe('<div data-global-key="1"></div>');
 });
@@ -245,59 +241,59 @@ test("render: {} throw", () => {
 	}).toThrowError("Unknown type");
 });
 test("renderSync: () => {} is ignored", () => {
-	component.renderSync("foo");
+	component.render("foo");
 	expect(document.body.innerHTML).toBe("foo");
-	component.renderSync((() => {}) as any);
+	component.render((() => {}) as any);
 	expect(document.body.innerHTML).toBe("");
 });
 
 test("renderSync: <>Foo</>", () => {
-	component.renderSync("foo");
+	component.render("foo");
 	expect(document.body.innerHTML).toBe("foo");
-	component.renderSync(<>{"foo"}</>);
+	component.render(<>{"foo"}</>);
 	expect(document.body.innerHTML).toBe("foo");
 });
 
 test("renderSync: <Foo className={undefined} style={undefined} />", () => {
 	async function Foo(_: ComponentProps<unknown>, { component }: Contexts) {
-		component.renderSync("Foo");
+		component.render("Foo");
 	}
 
-	component.renderSync(<Foo className={undefined} />);
+	component.render(<Foo className={undefined} />);
 	expect(document.body.innerHTML).toBe('<div data-global-key="1">Foo</div>');
 
 	document.body.innerHTML = "";
 
-	component.renderSync(<Foo className={null as unknown as undefined} />);
+	component.render(<Foo className={null as unknown as undefined} />);
 	expect(document.body.innerHTML).toBe('<div data-global-key="3">Foo</div>');
 
 	document.body.innerHTML = "";
 
-	component.renderSync(<Foo style={undefined} />);
+	component.render(<Foo style={undefined} />);
 	expect(document.body.innerHTML).toBe('<div data-global-key="5">Foo</div>');
 
 	document.body.innerHTML = "";
 
-	component.renderSync(<Foo style={null as unknown as undefined} />);
+	component.render(<Foo style={null as unknown as undefined} />);
 	expect(document.body.innerHTML).toBe('<div data-global-key="7">Foo</div>');
 });
 
 test("renderSync: <div className={undefined} style={undefined} />", () => {
-	component.renderSync(<div className={undefined}>Foo</div>);
+	component.render(<div className={undefined}>Foo</div>);
 	expect(document.body.innerHTML).toBe("<div>Foo</div>");
 
 	document.body.innerHTML = "";
 
-	component.renderSync(<div className={null as unknown as undefined}>Foo</div>);
+	component.render(<div className={null as unknown as undefined}>Foo</div>);
 	expect(document.body.innerHTML).toBe("<div>Foo</div>");
 
 	document.body.innerHTML = "";
 
-	component.renderSync(<div style={undefined}>Foo</div>);
+	component.render(<div style={undefined}>Foo</div>);
 	expect(document.body.innerHTML).toBe("<div>Foo</div>");
 
 	document.body.innerHTML = "";
 
-	component.renderSync(<div style={null as unknown as undefined}>Foo</div>);
+	component.render(<div style={null as unknown as undefined}>Foo</div>);
 	expect(document.body.innerHTML).toBe("<div>Foo</div>");
 });
diff --git a/packages/seqflow/tests/inner/unmount-checks.test.tsx b/packages/seqflow/tests/inner/unmount-checks.test.tsx
index d835ae6..7830f60 100644
--- a/packages/seqflow/tests/inner/unmount-checks.test.tsx
+++ b/packages/seqflow/tests/inner/unmount-checks.test.tsx
@@ -13,16 +13,16 @@ test("track component lifecycle", async (testContext) => {
 		{ children }: ComponentProps<unknown>,
 		{ component }: Contexts,
 	) {
-		component.renderSync(<div>{children}</div>);
+		component.render(<div>{children}</div>);
 	}
 	function SyncDiv(
 		{ children }: ComponentProps<unknown>,
 		{ component }: Contexts,
 	) {
-		component.renderSync(<div>{children}</div>);
+		component.render(<div>{children}</div>);
 	}
 	async function App(_: ComponentProps<unknown>, { component }: Contexts) {
-		component.renderSync(
+		component.render(
 			<>
 				<Button key="Button" label="Click me" />
 				<AsyncDiv key="AsyncDiv">Async Div</AsyncDiv>
@@ -87,7 +87,7 @@ test("track component lifecycle", async (testContext) => {
 test("track component lifecycle: replaceChild direct child", async (testContext) => {
 	async function App(_: ComponentProps<unknown>, { component }: Contexts) {
 		let c = 0;
-		component.renderSync(
+		component.render(
 			<>
 				<button key="button" type="button">
 					Replace others
@@ -155,7 +155,7 @@ test("track component lifecycle: replaceChild direct child", async (testContext)
 test("track component lifecycle: replaceChild nested in div / child", async (testContext) => {
 	async function App(_: ComponentProps<unknown>, { component }: Contexts) {
 		let c = 0;
-		component.renderSync(
+		component.render(
 			<>
 				<button key="button" type="button">
 					Replace others
@@ -225,7 +225,7 @@ test("track component lifecycle: replaceChild nested in div / child", async (tes
 test("track component lifecycle: replaceChild nested in div / wrapper", async (testContext) => {
 	async function App(_: ComponentProps<unknown>, { component }: Contexts) {
 		let c = 0;
-		component.renderSync(
+		component.render(
 			<>
 				<button key="button" type="button">
 					Replace others
@@ -303,7 +303,7 @@ test("track component lifecycle: replaceChild nested in div / nested component",
 		{ label }: ComponentProps<{ label: string }>,
 		{ component }: Contexts,
 	) {
-		component.renderSync(<Button key="Button" label={label} />);
+		component.render(<Button key="Button" label={label} />);
 
 		const events = component.waitEvents(component.domEvent("Button", "click"));
 		for await (const _ of events) {
@@ -313,7 +313,7 @@ test("track component lifecycle: replaceChild nested in div / nested component",
 	}
 	async function App(_: ComponentProps<unknown>, { component }: Contexts) {
 		let c = 0;
-		component.renderSync(
+		component.render(
 			<>
 				<button key="button" type="button">
 					Replace others
@@ -410,7 +410,7 @@ async function Button(
 	{ label }: ComponentProps<{ label: string }>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<button key="button" type="button">
 			{label}
 		</button>,
diff --git a/packages/seqflow/tests/seqflowjs.test.tsx b/packages/seqflow/tests/seqflowjs.test.tsx
index cc44cda..653226a 100644
--- a/packages/seqflow/tests/seqflowjs.test.tsx
+++ b/packages/seqflow/tests/seqflowjs.test.tsx
@@ -11,7 +11,7 @@ test("the application starts", async (testContext) => {
 	let invokedCounter = 0;
 	async function App(_: ComponentProps<unknown>, { component }: Contexts) {
 		invokedCounter++;
-		component.renderSync(<div>App</div>);
+		component.render(<div>App</div>);
 	}
 	startTestApp(testContext, App);
 
@@ -25,10 +25,10 @@ test("the application starts", async (testContext) => {
 
 test("render child", async (testContext) => {
 	async function Child(_: ComponentProps<unknown>, { component }: Contexts) {
-		component.renderSync(<div>Child</div>);
+		component.render(<div>Child</div>);
 	}
 	async function App(_: ComponentProps<unknown>, { component }: Contexts) {
-		component.renderSync(<Child />);
+		component.render(<Child />);
 	}
 	startTestApp(testContext, App);
 
@@ -42,10 +42,10 @@ test("pass props to child", async (testContext) => {
 		{ text }: ComponentProps<{ text: string }>,
 		{ component }: Contexts,
 	) {
-		component.renderSync(<div>{text}</div>);
+		component.render(<div>{text}</div>);
 	}
 	async function App(_: ComponentProps<unknown>, { component }: Contexts) {
-		component.renderSync(<Child text="From parent" />);
+		component.render(<Child text="From parent" />);
 	}
 	startTestApp(testContext, App);
 
@@ -62,7 +62,7 @@ test("listen dom throws on DocumentFragment", async (testContext) => {
 			</>
 		);
 
-		component.renderSync(incrementButton);
+		component.render(incrementButton);
 
 		await expect(async () => {
 			await component
@@ -73,7 +73,7 @@ test("listen dom throws on DocumentFragment", async (testContext) => {
 				.next();
 		}).rejects.toThrowError("Cannot attach event to DocumentFragment");
 
-		component.renderSync("Ok");
+		component.render("Ok");
 	}
 	startTestApp(testContext, App);
 
@@ -83,7 +83,7 @@ test("listen dom throws on DocumentFragment", async (testContext) => {
 test("listen dom event using key", async (testContext) => {
 	async function Counter(_: ComponentProps<unknown>, { component }: Contexts) {
 		let counter = 0;
-		component.renderSync(
+		component.render(
 			<div>
 				<button key="button" type="button">
 					Increment
@@ -118,7 +118,7 @@ test("listen dom event using element", async (testContext) => {
 
 		const incrementButton = <button type="button">Increment</button>;
 
-		component.renderSync(
+		component.render(
 			<div>
 				{incrementButton}
 				<span key="counter">Counter: 0</span>
@@ -151,7 +151,7 @@ test("listen more dom events", async (testContext) => {
 	async function Counter(_: ComponentProps<unknown>, { component }: Contexts) {
 		let counter = 0;
 
-		component.renderSync(
+		component.render(
 			<div>
 				<button key="button1" type="button">
 					Button1
@@ -201,7 +201,7 @@ test("switch on who fire event", async (testContext) => {
 	async function Counter(_: ComponentProps<unknown>, { component }: Contexts) {
 		let counter = 0;
 
-		component.renderSync(
+		component.render(
 			<div>
 				<button key="increase-by-1" type="button">
 					Increase by 1
@@ -269,7 +269,7 @@ test("prevent default", async (testContext) => {
 	async function Counter(_: ComponentProps<unknown>, { component }: Contexts) {
 		let counter = 0;
 
-		component.renderSync(
+		component.render(
 			<form key="increment-form">
 				<span key="counter">Counter: 0</span>
 				<button key="submit-button" type="submit">
@@ -310,7 +310,7 @@ test("stop propagation", async (testContext) => {
 	async function Counter(_: ComponentProps<unknown>, { component }: Contexts) {
 		let counter = 0;
 
-		component.renderSync(
+		component.render(
 			<div key="wrapper">
 				<button key="button" type="button">
 					Click me
@@ -352,7 +352,7 @@ test("stop immediate propagation", async (testContext) => {
 	async function Counter(_: ComponentProps<unknown>, { component }: Contexts) {
 		let counter = 0;
 
-		component.renderSync(
+		component.render(
 			<div key="wrapper">
 				<button key="button" type="button">
 					Click me
@@ -396,7 +396,7 @@ test("listen domain event", async (testContext) => {
 		_: ComponentProps<unknown>,
 		{ component, app }: Contexts,
 	) {
-		component.renderSync(
+		component.render(
 			<button key="button" type="button">
 				Increment
 			</button>,
@@ -411,7 +411,7 @@ test("listen domain event", async (testContext) => {
 		_: ComponentProps<unknown>,
 		{ component, app }: Contexts,
 	) {
-		component.renderSync(
+		component.render(
 			<div>
 				<IncrementCounterButton />
 				<span key="counter">Counter: 0</span>
@@ -444,7 +444,7 @@ test("listen navigation event", async (testContext) => {
 		_: ComponentProps<unknown>,
 		{ component, app }: Contexts,
 	) {
-		component.renderSync(<a href="/another-page">Go to another page</a>);
+		component.render(<a href="/another-page">Go to another page</a>);
 
 		const events = component.waitEvents(
 			component.domEvent(component._el, "click", { preventDefault: true }),
@@ -454,7 +454,7 @@ test("listen navigation event", async (testContext) => {
 		}
 	}
 	async function App(_: ComponentProps<unknown>, { component, app }: Contexts) {
-		component.renderSync(
+		component.render(
 			<div>
 				<AnotherPageLink />
 				<span key="current-path">Path: {app.router.getCurrentPathname()}</span>
diff --git a/packages/storybook/src/docs/sourceDecorator.ts b/packages/storybook/src/docs/sourceDecorator.ts
index d801bbb..6881d6e 100644
--- a/packages/storybook/src/docs/sourceDecorator.ts
+++ b/packages/storybook/src/docs/sourceDecorator.ts
@@ -1,4 +1,3 @@
-
 import type { DecoratorFunction } from '@storybook/types';
 
 import type { SeqFlowJSRenderer } from '../types';
@@ -10,7 +9,7 @@ export const sourceDecorator: DecoratorFunction<SeqFlowJSRenderer> = async () =>
 
 async function App({ component: comp, args }: any, { component }: Contexts) {
   const r: Element = component.createDOMElement(comp, args) as Element;
-  component.renderSync(r as any);
+  component.render(r as any);
 }
 
 export function buildComponent(component: any, args: any) {
diff --git a/packages/storybook/src/render.ts b/packages/storybook/src/render.ts
index beef126..a14521b 100644
--- a/packages/storybook/src/render.ts
+++ b/packages/storybook/src/render.ts
@@ -86,7 +86,7 @@ export function renderToCanvas(
 
 async function App({ component: comp, args }: any, { component }: Contexts) {
   const r: Element = component.createDOMElement(comp, args) as Element;
-  component.renderSync(r as any);
+  component.render(r as any);
 }
 
 export function buildComponent(component: any, args: any) {
diff --git a/packages/website/src/Main.tsx b/packages/website/src/Main.tsx
index 8e5cfb5..03d52db 100644
--- a/packages/website/src/Main.tsx
+++ b/packages/website/src/Main.tsx
@@ -29,7 +29,7 @@ export async function Main(
 ) {
 	component._el.classList.add(classes.wrapper);
 	const InitalComponent = getComponent(app.router.segments);
-	component.renderSync(
+	component.render(
 		<>
 			<Header className={classes.header} />
 			<div id={classes.main}>
diff --git a/packages/website/src/components/ContentWithToc.tsx b/packages/website/src/components/ContentWithToc.tsx
index aec24b4..84d8739 100644
--- a/packages/website/src/components/ContentWithToc.tsx
+++ b/packages/website/src/components/ContentWithToc.tsx
@@ -66,7 +66,7 @@ export async function ContentWithToc(
 			<></>
 		);
 
-	component.renderSync(
+	component.render(
 		<>
 			{aside}
 			<main>
diff --git a/packages/website/src/components/Header.tsx b/packages/website/src/components/Header.tsx
index a7b36cc..278a7a4 100644
--- a/packages/website/src/components/Header.tsx
+++ b/packages/website/src/components/Header.tsx
@@ -74,7 +74,7 @@ export async function Header(
 		</Button>
 	);
 
-	component.renderSync(
+	component.render(
 		<Navbar className={"shadow-md"}>
 			<Navbar.Start>
 				<Dropdown label={b} className={["lg:hidden", classes.submenu]}>
diff --git a/packages/website/src/pages/Example.tsx b/packages/website/src/pages/Example.tsx
index 2162dc6..fd2c669 100644
--- a/packages/website/src/pages/Example.tsx
+++ b/packages/website/src/pages/Example.tsx
@@ -6,7 +6,7 @@ export async function Example(
 	_: ComponentProps<unknown>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<div id="examples">
 			<ContentWithToc toc={toc} html={html} title="Examples" />
 		</div>,
diff --git a/packages/website/src/pages/GetStarted.tsx b/packages/website/src/pages/GetStarted.tsx
index a75ea2b..3d9f498 100644
--- a/packages/website/src/pages/GetStarted.tsx
+++ b/packages/website/src/pages/GetStarted.tsx
@@ -16,7 +16,7 @@ export async function GetStarted(
 ) {
 	const segments = app.router.segments;
 	if (segments.length === 1) {
-		component.renderSync(
+		component.render(
 			<div id="get-started">
 				<ContentWithToc toc={main.toc} html={main.html} title="Get started" />
 			</div>,
@@ -27,7 +27,7 @@ export async function GetStarted(
 	const segment = segments[1];
 	switch (segment) {
 		case "prerequisites":
-			component.renderSync(
+			component.render(
 				<div id="get-started">
 					<ContentWithToc
 						toc={prerequisites.toc}
@@ -38,7 +38,7 @@ export async function GetStarted(
 			);
 			return;
 		case "fetch-data":
-			component.renderSync(
+			component.render(
 				<div id="get-started">
 					<ContentWithToc
 						toc={fetchData.toc}
@@ -49,7 +49,7 @@ export async function GetStarted(
 			);
 			return;
 		case "split-components":
-			component.renderSync(
+			component.render(
 				<div id="get-started">
 					<ContentWithToc
 						toc={splitComponents.toc}
@@ -60,7 +60,7 @@ export async function GetStarted(
 			);
 			return;
 		case "refresh-quote":
-			component.renderSync(
+			component.render(
 				<div id="get-started">
 					<ContentWithToc
 						toc={refreshQuote.toc}
@@ -71,7 +71,7 @@ export async function GetStarted(
 			);
 			return;
 		case "configuration":
-			component.renderSync(
+			component.render(
 				<div id="get-started">
 					<ContentWithToc
 						toc={configuration.toc}
@@ -82,7 +82,7 @@ export async function GetStarted(
 			);
 			return;
 		case "test":
-			component.renderSync(
+			component.render(
 				<div id="get-started">
 					<ContentWithToc
 						toc={test.toc}
@@ -93,7 +93,7 @@ export async function GetStarted(
 			);
 			return;
 		case "domain":
-			component.renderSync(
+			component.render(
 				<div id="get-started">
 					<ContentWithToc
 						toc={domain.toc}
@@ -104,7 +104,7 @@ export async function GetStarted(
 			);
 			return;
 		case "conclusion":
-			component.renderSync(
+			component.render(
 				<div id="get-started">
 					<ContentWithToc
 						toc={conclusion.toc}
diff --git a/packages/website/src/pages/GetStarted_1fetchData.md b/packages/website/src/pages/GetStarted_1fetchData.md
index b29f973..9736b13 100644
--- a/packages/website/src/pages/GetStarted_1fetchData.md
+++ b/packages/website/src/pages/GetStarted_1fetchData.md
@@ -1,4 +1,3 @@
-
 The quote application is a simple application that fetches a random quote from an endpoint and shows it in the browser. We will use this remote servive provided by SeqFlow to fetch quotes: [https://quotes.seqflow.dev](https://quotes.seqflow.dev).
 
 ## Invoking an API
@@ -29,7 +28,7 @@ export async function Main({}, { component }: Contexts) {
 	const quote = await getRandomQuote();
 
 	// And show it
-	component.renderSync(
+	component.render(
 		<Prose>
 			<p>{quote.content}</p>
 			<p>{quote.author}</p>
@@ -45,7 +44,7 @@ We defined the `getRandomQuote` function that fetches a random quote from an end
 The `Main` component is responsible for invoking the `getRandomQuote` function and showing the quote.
 Because the SeqFlow components are async functions, we can just use the `await` keyword to perform any asynchronous operations we want, such HTTP requests. This is a powerful feature that allows us to write a component easier and more readable.
 
-Every SeqFlow component accepts as a second parameter its own context object that exposes some functions to interact with the DOM. In this case we want to render the quote, so we use the `component.renderSync` method to render the quote in the browser. As you can see, SeqFlow supports JSX syntax.
+Every SeqFlow component accepts as a second parameter its own context object that exposes some functions to interact with the DOM. In this case we want to render the quote, so we use the `component.sync` method to render the quote in the browser. As you can see, SeqFlow supports JSX syntax.
 
 Your page should be updated automatically thanks to the vite server. if you don't run the server yet, you can do it by running `pnpm start` in the terminal and navigate to `http://localhost:5173` to see the quote.
 
@@ -74,7 +73,7 @@ async function getRandomQuote(): Promise<Quote> {
 
 export async function Main({}, { component }: Contexts) {
 	// Render loading message
-	component.renderSync(
+	component.render(
 		<p>Loading...</p>
 	);
 
@@ -84,14 +83,14 @@ export async function Main({}, { component }: Contexts) {
 		quote = await getRandomQuote();
 	} catch (error) {
 		// In case of error, render error message
-		component.renderSync(
+		component.render(
 			<p>Error: {error}</p>
 		);
 		return;
 	}
 
 	// Replace loading message with quote
-	component.renderSync(
+	component.render(
 		<div>
 			<div>{quote.content}</div>
 			<div>{quote.author}</div>
@@ -102,7 +101,7 @@ export async function Main({}, { component }: Contexts) {
 
 We changed the `Main` component to render a loading message before fetching the quote. If the fetch operation fails, we render an error message. Otherwise, we render the quote.
 
-SeqFlow components can replace their own content just by calling the `renderSync` method again. In this case, the loading message is replaced by the quote component or the error message. Nice, right?
+SeqFlow components can replace their own content just by calling the `sync` method again. In this case, the loading message is replaced by the quote component or the error message. Nice, right?
 
 ## Conclusion
 
diff --git a/packages/website/src/pages/GetStarted_2splitComponents.md b/packages/website/src/pages/GetStarted_2splitComponents.md
index 6ec70f8..8e8f12a 100644
--- a/packages/website/src/pages/GetStarted_2splitComponents.md
+++ b/packages/website/src/pages/GetStarted_2splitComponents.md
@@ -27,7 +27,7 @@ async function getRandomQuote(): Promise<Quote> {
 
 // This is the new component: it receives a quote and renders it
 function Quote({ quote }: { quote: Quote }, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Prose>
 			<p>{quote.content}</p>
 			<p>{quote.author}</p>
@@ -36,25 +36,25 @@ function Quote({ quote }: { quote: Quote }, { component }: Contexts) {
 }
 // The loading component
 function Loading({}, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<p>Loading...</p>
 	);
 }
 // The error component
 function ErrorMessage(data: { error: unknown }, { component }: Contexts) {
 	if (data.error instanceof Error) {
-		component.renderSync(
+		component.render(
 			<p>{data.error.message}</p>
 		);
 	} else {
-		component.renderSync(
+		component.render(
 			<p>Unknown error</p>
 		);
 	}
 }
 
 export async function Main({}, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Loading />
 	);
 
@@ -62,13 +62,13 @@ export async function Main({}, { component }: Contexts) {
 	try {
 		quote = await getRandomQuote();
 	} catch (error) {
-		component.renderSync(
+		component.render(
 			<ErrorMessage error={error} />
 		);
 		return;
 	}
 
-	component.renderSync(
+	component.render(
 		<Quote quote={quote} />
 	);
 }
diff --git a/packages/website/src/pages/GetStarted_3refreshQuote.md b/packages/website/src/pages/GetStarted_3refreshQuote.md
index ea35afe..98f0ce0 100644
--- a/packages/website/src/pages/GetStarted_3refreshQuote.md
+++ b/packages/website/src/pages/GetStarted_3refreshQuote.md
@@ -25,7 +25,7 @@ async function getRandomQuote(): Promise<Quote> {
 
 // This is the new component: it receives a quote and renders it
 function Quote({ quote }: { quote: Quote }, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Prose>
 			<p>{quote.content}</p>
 			<p>{quote.author}</p>
@@ -34,25 +34,25 @@ function Quote({ quote }: { quote: Quote }, { component }: Contexts) {
 }
 // The loading component
 function Loading({}, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<p>Loading...</p>
 	);
 }
 // The error component
 function ErrorMessage(data: { error: unknown }, { component }: Contexts) {
 	if (data.error instanceof Error) {
-		component.renderSync(
+		component.render(
 			<p>{data.error.message}</p>
 		);
 	} else {
-		component.renderSync(
+		component.render(
 			<p>Unknown error</p>
 		);
 	}
 }
 
 export async function Main({}, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Loading />
 	);
 
@@ -60,13 +60,13 @@ export async function Main({}, { component }: Contexts) {
 	try {
 		quote = await getRandomQuote();
 	} catch (error) {
-		component.renderSync(
+		component.render(
 			<ErrorMessage error={error} />
 		);
 		return;
 	}
 
-	component.renderSync(
+	component.render(
 		<>
 			{ /* NB: we added the key attribute here!! */ }
 			<Button key="refresh-button" type='button'>Refresh</Button>
@@ -88,7 +88,7 @@ export async function Main({}, { component }: Contexts) {
 			quote = await getRandomQuote();
 		} catch (error) {
 			// This replace the hole content with the error message
-			component.renderSync(
+			component.render(
 				<ErrorMessage error={error} />
 			);
 			return;
@@ -134,7 +134,7 @@ async function getRandomQuote(): Promise<Quote> {
 }
 
 function Quote({ quote }: { quote: Quote }, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Prose>
 			<p>{quote.content}</p>
 			<p>{quote.author}</p>
@@ -142,17 +142,17 @@ function Quote({ quote }: { quote: Quote }, { component }: Contexts) {
 	);
 }
 function Loading({}, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<p>Loading...</p>
 	);
 }
 function ErrorMessage(data: { error: unknown }, { component }: Contexts) {
 	if (data.error instanceof Error) {
-		component.renderSync(
+		component.render(
 			<p>{data.error.message}</p>
 		);
 	} else {
-		component.renderSync(
+		component.render(
 			<p>Unknown error</p>
 		);
 	}
@@ -178,7 +178,7 @@ export async function Main({}, { component }: Contexts) {
 	}
 
 	// Render the structure of the html
-	component.renderSync(
+	component.render(
 		<>
 			<Button key="refresh-button" type='button'>Refresh</Button>
 			<Spot key="quote" />
@@ -226,7 +226,7 @@ async function getRandomQuote(): Promise<Quote> {
 }
 
 function Quote({ quote }: { quote: Quote }, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Prose>
 			<p>{quote.content}</p>
 			<p>{quote.author}</p>
@@ -234,17 +234,17 @@ function Quote({ quote }: { quote: Quote }, { component }: Contexts) {
 	);
 }
 function Loading({}, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<p>Loading...</p>
 	);
 }
 function ErrorMessage(data: { error: unknown }, { component }: Contexts) {
 	if (data.error instanceof Error) {
-		component.renderSync(
+		component.render(
 			<p>{data.error.message}</p>
 		);
 	} else {
-		component.renderSync(
+		component.render(
 			<p>Unknown error</p>
 		);
 	}
@@ -281,7 +281,7 @@ export async function Main({}, { component }: Contexts) {
 		})
 	}
 
-	component.renderSync(
+	component.render(
 		<>
 			<Button key="refresh-button" type='button'>Refresh</Button>
 			<Spot key="quote" />
diff --git a/packages/website/src/pages/GetStarted_4configuration.md b/packages/website/src/pages/GetStarted_4configuration.md
index 873e512..2094d0f 100644
--- a/packages/website/src/pages/GetStarted_4configuration.md
+++ b/packages/website/src/pages/GetStarted_4configuration.md
@@ -51,7 +51,7 @@ async function getRandomQuote(baseUrl: string): Promise<Quote> {
 }
 
 function Quote({ quote }: { quote: Quote }, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Prose>
 			<p>{quote.content}</p>
 			<p>{quote.author}</p>
@@ -59,17 +59,17 @@ function Quote({ quote }: { quote: Quote }, { component }: Contexts) {
 	);
 }
 function Loading({}, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<p>Loading...</p>
 	);
 }
 function ErrorMessage(data: { error: unknown }, { component }: Contexts) {
 	if (data.error instanceof Error) {
-		component.renderSync(
+		component.render(
 			<p>{data.error.message}</p>
 		);
 	} else {
-		component.renderSync(
+		component.render(
 			<p>Unknown error</p>
 		);
 	}
@@ -105,7 +105,7 @@ export async function Main({}, { component, app }: Contexts) {
 		})
 	}
 
-	component.renderSync(
+	component.render(
 		<>
 			<Button key="refresh-button" type='button'>Refresh</Button>
 			<Spot key="quote" />
diff --git a/packages/website/src/pages/GetStarted_6domain.md b/packages/website/src/pages/GetStarted_6domain.md
index 7565b42..3f29484 100644
--- a/packages/website/src/pages/GetStarted_6domain.md
+++ b/packages/website/src/pages/GetStarted_6domain.md
@@ -110,7 +110,7 @@ function QuoteProse(
 	{ quote }: ComponentProps<{ quote: Quote }>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<Prose>
 			<blockquote>
 				<p>{quote.content}</p>
@@ -121,14 +121,14 @@ function QuoteProse(
 }
 // Loading component
 function Loading({}, { component }: Contexts) {
-	component.renderSync(<p>Loading...</p>);
+	component.render(<p>Loading...</p>);
 }
 // Show error
 function ErrorMessage(data: { error: unknown }, { component }: Contexts) {
 	if (data.error instanceof Error) {
-		component.renderSync(<p>{data.error.message}</p>);
+		component.render(<p>{data.error.message}</p>);
 	} else {
-		component.renderSync(<p>Unknown error</p>);
+		component.render(<p>Unknown error</p>);
 	}
 }
 // Free spot
@@ -139,7 +139,7 @@ export async function QuoteComponent(
 	_: ComponentProps<unknown>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<>
 			<Spot key="quote" />
 		</>,
@@ -202,7 +202,7 @@ export async function RefreshQuoteButton(
 		});
 	};
 
-	component.renderSync(
+	component.render(
 		<Button key="button" type="button">
 			Refresh
 		</Button>,
@@ -238,7 +238,7 @@ import { RefreshQuoteButton } from "./domains/quotes/components/RefreshQuoteButt
 import { QuoteDomain } from "./domains/quotes/domain";
 
 export async function Main({}, { component, app }: Contexts) {
-	component.renderSync(
+	component.render(
 		<>
 			<QuoteComponent key="quote" />
 			<RefreshQuoteButton key="button" />
diff --git a/packages/website/src/pages/Home.tsx b/packages/website/src/pages/Home.tsx
index 5215bb2..2659a74 100644
--- a/packages/website/src/pages/Home.tsx
+++ b/packages/website/src/pages/Home.tsx
@@ -65,7 +65,7 @@ ${setupArrow.name}();
 		addStackBlitzLinksScriptContent,
 	);
 
-	component.renderSync([
+	component.render([
 		<div id="first-screen">
 			<SeqFlowHero />
 		</div>,
@@ -121,7 +121,7 @@ ${setupArrow.name}();
 }
 
 function Examples(_: ComponentProps<unknown>, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Tabs tabFullWidth>
 			<Tabs.TabHeader label="Counter" defaultChecked />
 			<Tabs.TabContent>
@@ -136,7 +136,7 @@ function Examples(_: ComponentProps<unknown>, { component }: Contexts) {
 }
 
 function SeqFlowHero(_: ComponentProps<unknown>, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Hero style={{ backgroundColor: "#060606" }}>
 			<Hero.Content
 				style={{ minHeight: "max(calc(100vh - 64px), 400px)" }}
@@ -157,7 +157,7 @@ function SeqFlowHero(_: ComponentProps<unknown>, { component }: Contexts) {
 }
 
 function GetStarted(_: ComponentProps<unknown>, { component, app }: Contexts) {
-	component.renderSync(
+	component.render(
 		<Link href="/get-started" showAsButton="primary">
 			Get started
 		</Link>,
@@ -271,7 +271,7 @@ function Features(_: ComponentProps<unknown>, { component }: Contexts) {
 			`.trim(),
 	);
 
-	component.renderSync([...featuresComponent, script]);
+	component.render([...featuresComponent, script]);
 }
 
 function createScript(code: string) {
@@ -310,7 +310,7 @@ function Code(
 	{ component }: Contexts,
 ) {
 	component._el.classList.add("language-tsx", "!text-xs", classes.code);
-	component.renderSync(
+	component.render(
 		<code id={id} className="language-tsx">
 			{code}
 		</code>,
@@ -385,7 +385,7 @@ export async function MyComponent(
   { component }: Contexts
 ) {
   // Render loader
-  component.renderSync(<div>{loadingText ?? 'Loading...'}</div>);
+  component.render(<div>{loadingText ?? 'Loading...'}</div>);
   const data = await fetch('https://quotes.seqflow.dev/api/quotes/random').then(
     async (res) => ({
       statusCode: res.status,
@@ -394,7 +394,7 @@ export async function MyComponent(
   );
 
   // Redraw the whole component
-  component.renderSync(
+  component.render(
     <pre>
       <code>{JSON.stringify(data, null, 2)}</code>
     </pre>
@@ -412,7 +412,7 @@ async function MyComponent(
   {}: ComponentProps<unknown>,
   { component }: Contexts
 ) {
-  component.renderSync(
+  component.render(
     <button key="my-button" type="button">
       Click me
     </button>
@@ -439,7 +439,7 @@ async function MyComponent(
   // The state is a simple Javascript variable
   let counter = 0;
 
-  component.renderSync(
+  component.render(
     <button key="my-button" type="button">
       Click me
     </button>
@@ -463,7 +463,7 @@ async function MyComponent(
   {}: ComponentProps<unknown>,
   { component }: Contexts
 ) {
-  component.renderSync(
+  component.render(
     <>
       <button key="my-button" type="button">
         Now
@@ -504,7 +504,7 @@ async function Counter(
   let counter = initialValue || 0;
 
   // Render
-  component.renderSync(
+  component.render(
     <>
       <Button key="increment-counter-button">Increment</Button>
       <div key="counter">{counter}</div>
@@ -556,18 +556,18 @@ export async function RandomQuote(
   { component }: Contexts
 ) {
   // Render
-  component.renderSync(<Loading />);
+  component.render(<Loading />);
 
   // Async invocation inside the component
   let quote: Quote;
   try {
     quote = await getRandomQuote();
   } catch (error) {
-    component.renderSync(<div>Error: {(error as Error).message}</div>);
+    component.render(<div>Error: {(error as Error).message}</div>);
     return;
   }
 
-  component.renderSync(
+  component.render(
     <blockquote>
       <p>{quote.content}</p>
       <footer>{quote.author}</footer>
diff --git a/packages/website/src/pages/Why.md b/packages/website/src/pages/Why.md
index 30f902b..399dbd7 100644
--- a/packages/website/src/pages/Why.md
+++ b/packages/website/src/pages/Why.md
@@ -46,13 +46,13 @@ From this list, I structured components as asynchronous functions, where the dev
 import { Contexts } from "@seqflow/seqflow";
 
 export async function MyComponent({}, {component}: Contexts) {
-    this.renderSync(<div>Loading...</div>);
+    component.render(<div>Loading...</div>);
 
     const userData: {
         username: string,
     } = await fetchUserData(); // async function
 
-    component.renderSync(<p>Hi, {username}!</p>);
+    component.render(<p>Hi, {username}!</p>);
 }
 ```
 
@@ -68,7 +68,7 @@ import { Contexts } from "@seqflow/seqflow";
 export async function Counter({}, {component}: Contexts) {
     let counter = 0;
 
-	this.renderSync(<button key="click-me-button">Click Me</button>);
+	component.render(<button key="click-me-button">Click Me</button>);
 
 	const events = component.waitEvents(component.domEvent("click-me-button", "click"));
 	for await (const ev of events) {
@@ -133,7 +133,7 @@ function getBadge(user: User | undefined) {
 
 export async function UserBadge({}, { component, app }: Contexts) {
     const user: User | undefined = await app.domains.user.getLoggedUser();
-    component.renderSync(<div>{getBadge(user)}</div>);
+    component.render(<div>{getBadge(user)}</div>);
 
     // Listen to the UserLoggedEvent
 	const events = component.waitEvents(
@@ -143,7 +143,7 @@ export async function UserBadge({}, { component, app }: Contexts) {
     for await (const ev of events) {
         const user: User | undefined = await app.domains.user.getUser()
         // Update the badge
-        component.renderSync(<div>{getBadge(user)}</div>);
+        component.render(<div>{getBadge(user)}</div>);
     }
 }
 ```
diff --git a/packages/website/src/pages/Why.tsx b/packages/website/src/pages/Why.tsx
index 273eae0..e4b399e 100644
--- a/packages/website/src/pages/Why.tsx
+++ b/packages/website/src/pages/Why.tsx
@@ -3,7 +3,7 @@ import { ContentWithToc } from "../components/ContentWithToc";
 import { html, toc } from "./Why.md";
 
 export async function Why(_: ComponentProps<unknown>, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<div id="why">
 			<ContentWithToc toc={toc} html={html} title="Why SeqFlow?" />
 		</div>,
diff --git a/packages/website/src/pages/blog/Blog.tsx b/packages/website/src/pages/blog/Blog.tsx
index 199ddba..1fa61fb 100644
--- a/packages/website/src/pages/blog/Blog.tsx
+++ b/packages/website/src/pages/blog/Blog.tsx
@@ -15,7 +15,7 @@ export async function Blog(
 
 	const segments = app.router.segments;
 	if (segments.length === 1) {
-		component.renderSync(
+		component.render(
 			<Prose className={["m-auto"]} style={{ maxWidth: "786px" }}>
 				<Heading level={1}>Blog</Heading>
 				<ol>
@@ -44,7 +44,7 @@ export async function Blog(
 		case "2024-11-24-theres-a-new-framework-in-town": {
 			const element = getElementFromString(html);
 
-			component.renderSync([
+			component.render([
 				<Prose className={["m-auto", classes.blogPost]}>
 					<Heading className={"text-center"} level={1}>
 						There's a New Framework in Town!

From 5b6171803cf1d49b59cd9b799d651a501e6f8eac Mon Sep 17 00:00:00 2001
From: Tommaso Allevi <tomallevi@gmail.com>
Date: Sat, 5 Apr 2025 15:33:03 +0200
Subject: [PATCH 2/3] Add "matches" method

---
 .../counter/components/SetCounterValue.tsx    | 10 ++-
 .../domains/counter/components/ShowValue.tsx  |  4 +-
 examples/e-commerce/src/components/Header.tsx | 12 +--
 .../src/domains/cart/components/AddToCart.tsx | 42 ++++------
 .../src/domains/cart/components/CartBadge.tsx |  5 +-
 .../cart/components/CartProductList.tsx       | 29 +++----
 .../domains/cart/components/CartTooltip.tsx   | 34 +++-----
 .../product/components/ProductItem.tsx        |  4 +-
 .../user/components/UserProfileBadge.tsx      | 11 ++-
 examples/e-commerce/src/pages/checkout.tsx    |  1 -
 examples/e-commerce/src/pages/login.tsx       |  7 +-
 packages/seqflow/src/component.ts             | 79 +++++++++++++++++++
 packages/seqflow/tests/inner/child.test.tsx   |  2 +-
 packages/seqflow/tests/seqflowjs.test.tsx     | 33 ++++----
 packages/seqflow/types/matches.tsx            | 39 +++++++++
 .../website/src/pages/GetStarted_6domain.md   | 24 +++---
 16 files changed, 217 insertions(+), 119 deletions(-)
 create mode 100644 packages/seqflow/types/matches.tsx

diff --git a/examples/counter/src/domains/counter/components/SetCounterValue.tsx b/examples/counter/src/domains/counter/components/SetCounterValue.tsx
index f392c28..7da8f26 100644
--- a/examples/counter/src/domains/counter/components/SetCounterValue.tsx
+++ b/examples/counter/src/domains/counter/components/SetCounterValue.tsx
@@ -25,9 +25,11 @@ export async function SetCounterValue(
 	const events = component.waitEvents(
 		component.domEvent("form", "submit", { preventDefault: true }),
 	);
-	for await (const _ of events) {
-		const input = component.getChild<HTMLInputElement>("choose-value");
-		const value = input.valueAsNumber;
-		app.domains.counter.set(value);
+	for await (const ev of events) {
+		if (component.matches(ev, "form", "submit")) {
+			const input = component.getChild<HTMLInputElement>("choose-value");
+			const value = input.valueAsNumber;
+			app.domains.counter.set(value);
+		}
 	}
 }
diff --git a/examples/counter/src/domains/counter/components/ShowValue.tsx b/examples/counter/src/domains/counter/components/ShowValue.tsx
index 30b33ca..92fb5dd 100644
--- a/examples/counter/src/domains/counter/components/ShowValue.tsx
+++ b/examples/counter/src/domains/counter/components/ShowValue.tsx
@@ -11,6 +11,8 @@ export async function ShowValue(
 
 	const events = component.waitEvents(component.domainEvent(CounterChanged));
 	for await (const ev of events) {
-		component._el.textContent = `${ev.detail.currentValue}`;
+		if (component.matches(ev, CounterChanged)) {
+			component._el.textContent = `${ev.detail.currentValue}`;
+		}
 	}
 }
diff --git a/examples/e-commerce/src/components/Header.tsx b/examples/e-commerce/src/components/Header.tsx
index 4de25ac..137e757 100644
--- a/examples/e-commerce/src/components/Header.tsx
+++ b/examples/e-commerce/src/components/Header.tsx
@@ -46,19 +46,15 @@ export async function Header(
 	);
 
 	for await (const ev of events) {
-		if (ev instanceof UserLoggedEvent) {
+		if (component.matches(ev, UserLoggedEvent)) {
 			component._el.classList.add(classes.logged);
 			component._el.classList.remove(classes.unlogged);
-		} else if (ev instanceof UserLoggedOutEvent) {
+		} else if (component.matches(ev, UserLoggedOutEvent)) {
 			component._el.classList.add(classes.unlogged);
 			component._el.classList.remove(classes.logged);
-		} else if (
-			component.getChild("sign-in").contains(ev.target as HTMLElement)
-		) {
+		} else if (component.matches(ev, "sign-in", "click")) {
 			app.router.navigate("/login");
-		} else if (
-			component.getChild("store-logo").contains(ev.target as HTMLElement)
-		) {
+		} else if (component.matches(ev, "store-logo", "click")) {
 			app.router.navigate("/");
 		}
 	}
diff --git a/examples/e-commerce/src/domains/cart/components/AddToCart.tsx b/examples/e-commerce/src/domains/cart/components/AddToCart.tsx
index d588e13..5663d60 100644
--- a/examples/e-commerce/src/domains/cart/components/AddToCart.tsx
+++ b/examples/e-commerce/src/domains/cart/components/AddToCart.tsx
@@ -51,8 +51,6 @@ export async function AddToCart(
 	);
 
 	const firstAddToCart = component.getChild("first-add-to-cart");
-	const secondAddToCart = component.getChild("second-add-to-cart");
-	const removeFromCart = component.getChild("remove-from-cart");
 	const otherAddToCartWrapper = component.getChild("other-add-to-cart-wrapper");
 	const counter = component.getChild("counter");
 
@@ -70,31 +68,23 @@ export async function AddToCart(
 		component.domEvent(component._el, "click"),
 	);
 	for await (const ev of events) {
-		const target = ev.target as HTMLElement;
-		switch (true) {
-			case firstAddToCart.contains(target): {
-				const c = app.domains.cart.addToCart({ product: data.product });
-				counter.textContent = `${c}`;
-				otherAddToCartWrapper.classList.add(classes.show);
-				firstAddToCart.classList.remove(classes.show);
-				break;
-			}
-			case removeFromCart.contains(target): {
-				const remain = app.domains.cart.removeFromCart({
-					product: data.product,
-				});
-				counter.textContent = `${remain}`;
-				if (remain === 0) {
-					otherAddToCartWrapper.classList.remove(classes.show);
-					firstAddToCart.classList.add(classes.show);
-				}
-				break;
-			}
-			case secondAddToCart.contains(target): {
-				const c = app.domains.cart.addToCart({ product: data.product });
-				counter.textContent = `${c}`;
-				break;
+		if (component.matches(ev, "first-add-to-cart", "click")) {
+			const c = app.domains.cart.addToCart({ product: data.product });
+			counter.textContent = `${c}`;
+			otherAddToCartWrapper.classList.add(classes.show);
+			firstAddToCart.classList.remove(classes.show);
+		} else if (component.matches(ev, "remove-from-cart", "click")) {
+			const remain = app.domains.cart.removeFromCart({
+				product: data.product,
+			});
+			counter.textContent = `${remain}`;
+			if (remain === 0) {
+				otherAddToCartWrapper.classList.remove(classes.show);
+				firstAddToCart.classList.add(classes.show);
 			}
+		} else if (component.matches(ev, "second-add-to-cart", "click")) {
+			const c = app.domains.cart.addToCart({ product: data.product });
+			counter.textContent = `${c}`;
 		}
 	}
 }
diff --git a/examples/e-commerce/src/domains/cart/components/CartBadge.tsx b/examples/e-commerce/src/domains/cart/components/CartBadge.tsx
index 6196aaf..15f2f87 100644
--- a/examples/e-commerce/src/domains/cart/components/CartBadge.tsx
+++ b/examples/e-commerce/src/domains/cart/components/CartBadge.tsx
@@ -39,7 +39,10 @@ export async function CartBadge(
 		}),
 	);
 	for await (const ev of events) {
-		if (ev instanceof ChangeCartEvent || ev instanceof CheckoutEndedCartEvent) {
+		if (
+			component.matches(ev, ChangeCartEvent) ||
+			component.matches(ev, CheckoutEndedCartEvent)
+		) {
 			const productCount = app.domains.cart.getProductCount();
 			const count = productCount === 0 ? "" : productCount;
 			counter.textContent = `${count}`;
diff --git a/examples/e-commerce/src/domains/cart/components/CartProductList.tsx b/examples/e-commerce/src/domains/cart/components/CartProductList.tsx
index fce4058..bd88c6e 100644
--- a/examples/e-commerce/src/domains/cart/components/CartProductList.tsx
+++ b/examples/e-commerce/src/domains/cart/components/CartProductList.tsx
@@ -56,7 +56,7 @@ export async function CartProductList(
 	const checkoutButton = (
 		<Button
 			color="primary"
-			key="remove-from-cart"
+			key="checkout-button"
 			type="button"
 			className={"mt-4"}
 		>
@@ -67,7 +67,9 @@ export async function CartProductList(
 	const cartLogin = (
 		<Alert color="warning" className={"mt-4"} style={{ display: "block" }}>
 			You have to log in to checkout. Click{" "}
-			<a href="/login">here to go to login page</a>
+			<a key="go-to-login" href="/login">
+				here to go to login page
+			</a>
 		</Alert>
 	) as HTMLElement;
 	const cartTotal = (
@@ -111,19 +113,11 @@ export async function CartProductList(
 		component.domainEvent(ChangeCartEvent),
 	);
 	for await (const ev of events) {
-		if (ev.target instanceof HTMLElement) {
-			if (cartLogin.contains(ev.target)) {
-				ev.preventDefault();
-				app.router.navigate("/login");
-				continue;
-			}
-			if (checkoutButton.contains(ev.target)) {
-				ev.preventDefault();
-				app.router.navigate("/checkout");
-				continue;
-			}
-		}
-		if (ev instanceof ChangeCartEvent) {
+		if (component.matches(ev, "go-to-login", "click")) {
+			app.router.navigate("/login");
+		} else if (component.matches(ev, "checkout-button", "click")) {
+			app.router.navigate("/checkout");
+		} else if (component.matches(ev, ChangeCartEvent)) {
 			switch (ev.detail.action) {
 				case "remove-all-elements-of-a-product":
 					component.replaceChild(ev.detail.product.id, () => <></>);
@@ -139,10 +133,9 @@ export async function CartProductList(
 
 			if (cart.products.length === 0) {
 				component.render(<EmptyCart />);
-				break;
+			} else {
+				cartTotal.innerText = `total: ${cart.total} €`;
 			}
-
-			cartTotal.innerText = `total: ${cart.total} €`;
 		}
 	}
 }
diff --git a/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx b/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx
index 7f8184c..7ab5c1a 100644
--- a/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx
+++ b/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx
@@ -33,31 +33,21 @@ export async function CartTooltip(_: unknown, { component, app }: Contexts) {
 		component.domEvent("cart-tooltip", "click", { preventDefault: true }),
 	);
 	for await (const ev of events) {
-		switch (true) {
-			case ev.type === "click" &&
-				component._el.contains(ev.target as HTMLElement): {
-				app.router.navigate("/cart");
-				break;
-			}
-			// biome-ignore lint/suspicious/noFallthroughSwitchClause: in other page, it depends on the cart state as below
-			case ev instanceof NavigationEvent:
-				if (ev.path === "/cart") {
-					component._el.classList.remove(classes.show);
-					break;
-				}
-			case ev instanceof ChangeCartEvent: {
-				const count = app.domains.cart.getProductCount();
-				if (count === 0) {
-					component._el.classList.remove(classes.show);
-				} else if (count > 0) {
-					component._el.classList.add(classes.show);
-				}
-				break;
+		if (component.matches(ev, "cart-tooltip", "click")) {
+			app.router.navigate("/cart");
+		} else if (component.matches(ev, NavigationEvent)) {
+			if (ev.path === "/cart") {
+				component._el.classList.remove(classes.show);
 			}
-			case ev instanceof CheckoutEndedCartEvent: {
+		} else if (component.matches(ev, ChangeCartEvent)) {
+			const count = app.domains.cart.getProductCount();
+			if (count === 0) {
 				component._el.classList.remove(classes.show);
-				break;
+			} else if (count > 0) {
+				component._el.classList.add(classes.show);
 			}
+		} else if (component.matches(ev, CheckoutEndedCartEvent)) {
+			component._el.classList.remove(classes.show);
 		}
 	}
 }
diff --git a/examples/e-commerce/src/domains/product/components/ProductItem.tsx b/examples/e-commerce/src/domains/product/components/ProductItem.tsx
index 0bf19bf..d715c63 100644
--- a/examples/e-commerce/src/domains/product/components/ProductItem.tsx
+++ b/examples/e-commerce/src/domains/product/components/ProductItem.tsx
@@ -32,9 +32,9 @@ export async function ProductItem(data: Product, { component }: Contexts) {
 		component.domEvent(component._el, "mouseout"),
 	);
 	for await (const e of events) {
-		if (e.type === "mouseover") {
+		if (component.matches(e, component._el, "mouseover")) {
 			tooltip.classList.add(classes.show);
-		} else {
+		} else if (component.matches(e, component._el, "mouseout")) {
 			tooltip.classList.remove(classes.show);
 		}
 	}
diff --git a/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx b/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx
index f5d9ef6..096ab95 100644
--- a/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx
+++ b/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx
@@ -56,12 +56,15 @@ export async function UserProfileBadge(
 		component.domEvent(component._el, "mouseout"),
 	);
 	for await (const ev of events) {
-		if (ev instanceof UserLoggedEvent || ev instanceof UserLoggedOutEvent) {
+		if (
+			component.matches(ev, UserLoggedEvent) ||
+			component.matches(ev, UserLoggedOutEvent)
+		) {
 			const user = (await app.domains.user.getUser()) || {
 				username: "Guest",
 			};
 			profilePicture.src = getProfileUrl(user, size);
-		} else if (ev.type === "click") {
+		} else if (component.matches(ev, component._el, "click")) {
 			ev.preventDefault();
 
 			if (ev.target instanceof HTMLAnchorElement) {
@@ -70,9 +73,9 @@ export async function UserProfileBadge(
 			} else if (ev.target instanceof HTMLImageElement) {
 				app.router.navigate("/profile");
 			}
-		} else if (ev.type === "mouseover") {
+		} else if (component.matches(ev, component._el, "mouseover")) {
 			profileHeaderMenu.classList.add(classes.show);
-		} else if (ev.type === "mouseout") {
+		} else if (component.matches(ev, component._el, "mouseout")) {
 			profileHeaderMenu.classList.remove(classes.show);
 		}
 	}
diff --git a/examples/e-commerce/src/pages/checkout.tsx b/examples/e-commerce/src/pages/checkout.tsx
index 5d2fd62..d6984ef 100644
--- a/examples/e-commerce/src/pages/checkout.tsx
+++ b/examples/e-commerce/src/pages/checkout.tsx
@@ -17,7 +17,6 @@ export async function Checkout(
 
 	const events = component.waitEvents(component.domEvent("go-home", "click"));
 	for await (const ev of events) {
-		ev.preventDefault();
 		app.router.navigate("/");
 	}
 }
diff --git a/examples/e-commerce/src/pages/login.tsx b/examples/e-commerce/src/pages/login.tsx
index 3d32cac..7652cfe 100644
--- a/examples/e-commerce/src/pages/login.tsx
+++ b/examples/e-commerce/src/pages/login.tsx
@@ -42,7 +42,12 @@ export async function Login(
 		component.domEvent("login-form", "submit", { preventDefault: true }),
 	);
 	let user: UserType | undefined;
-	for await (const _ of events) {
+	for await (const ev of events) {
+		// ignore all non-login-form submit events
+		if (!component.matches(ev, "login-form", "submit")) {
+			continue;
+		}
+
 		const username = usernameInput.value;
 		const user = await form.runAsync(async () => {
 			return await app.domains.user.login({ username });
diff --git a/packages/seqflow/src/component.ts b/packages/seqflow/src/component.ts
index b39ef21..a3d4ee3 100644
--- a/packages/seqflow/src/component.ts
+++ b/packages/seqflow/src/component.ts
@@ -676,6 +676,85 @@ export class SeqFlowComponentContext {
 	navigationEvent(): EventAsyncGenerator<NavigationEvent> {
 		return navigationEvent(this.app.router.getEventTarget());
 	}
+
+	// First overload: For DOM event matching
+	matches<K extends keyof HTMLElementEventMap>(
+		event: Event,
+		key: string | HTMLElement | SVGElement | MathMLElement,
+		eventType: K | (string & {}),
+	): boolean;
+	// Second overload: For Domain event matching
+	matches<
+		EventType extends string,
+		DetailType,
+		BEE extends typeof DomainEvent<Inner, DetailType>,
+		Inner extends string & EventType = EventType,
+	>(event: Event, domainEventClass: BEE): event is InstanceType<BEE>;
+	// Third overload: For Navigation event matching
+	matches(
+		event: Event,
+		eventClass: typeof NavigationEvent,
+	): event is NavigationEvent;
+	matches(
+		event: Event,
+		keyOrDomainEventClassOrNavigationEvent:
+			| string
+			| HTMLElement
+			| SVGElement
+			| MathMLElement
+			| typeof DomainEvent<string, unknown>
+			| typeof NavigationEvent,
+		eventType?: string,
+	): boolean {
+		// `MathMLElement` is a well known type on browser, but not in Jest
+		// so we need to check if it is defined
+
+		// Case 1: DOM event matching
+		if (
+			typeof keyOrDomainEventClassOrNavigationEvent === "string" ||
+			keyOrDomainEventClassOrNavigationEvent instanceof HTMLElement ||
+			keyOrDomainEventClassOrNavigationEvent instanceof SVGElement ||
+			(typeof MathMLElement !== "undefined" &&
+				keyOrDomainEventClassOrNavigationEvent instanceof MathMLElement)
+		) {
+			if (!eventType) {
+				throw new Error("eventType is required when matching DOM events");
+			}
+
+			let child: HTMLElement | SVGElement | MathMLElement | null = null;
+			if (keyOrDomainEventClassOrNavigationEvent instanceof HTMLElement) {
+				child = keyOrDomainEventClassOrNavigationEvent;
+			} else if (keyOrDomainEventClassOrNavigationEvent instanceof SVGElement) {
+				child = keyOrDomainEventClassOrNavigationEvent;
+			} else if (
+				typeof MathMLElement !== "undefined" &&
+				keyOrDomainEventClassOrNavigationEvent instanceof MathMLElement
+			) {
+				child = keyOrDomainEventClassOrNavigationEvent;
+			} else {
+				child = this.findChild(
+					keyOrDomainEventClassOrNavigationEvent as string,
+				);
+			}
+			if (!child) {
+				return false;
+			}
+			if (!(event.target instanceof HTMLElement)) {
+				return false;
+			}
+
+			return event.type === eventType && child.contains(event.target);
+		}
+
+		// Case 2: Domain event matching
+		const DomainEventClass = keyOrDomainEventClassOrNavigationEvent;
+		return (
+			event instanceof
+			(DomainEventClass as
+				| typeof NavigationEvent
+				| typeof DomainEvent<string, unknown>)
+		);
+	}
 }
 // @ts-ignore
 SeqFlowComponentContext.prototype.createDOMFragment =
diff --git a/packages/seqflow/tests/inner/child.test.tsx b/packages/seqflow/tests/inner/child.test.tsx
index ba6faf6..83feec5 100644
--- a/packages/seqflow/tests/inner/child.test.tsx
+++ b/packages/seqflow/tests/inner/child.test.tsx
@@ -55,7 +55,7 @@ test("child: replaceChild - not found", async () => {
 	component.render(<div key="div1">A</div>);
 	expect(document.body.innerHTML).toBe('<div data-global-key="0">A</div>');
 
-	expect(async () =>
+	await expect(async () =>
 		component.replaceChild("foo", () => <div key="div1">B</div>),
 	).rejects.toThrow();
 });
diff --git a/packages/seqflow/tests/seqflowjs.test.tsx b/packages/seqflow/tests/seqflowjs.test.tsx
index 653226a..05a7a22 100644
--- a/packages/seqflow/tests/seqflowjs.test.tsx
+++ b/packages/seqflow/tests/seqflowjs.test.tsx
@@ -222,24 +222,23 @@ test("switch on who fire event", async (testContext) => {
 			component.domEvent("increase-by-2", "click"),
 			component.domEvent("increase-by-3", "click"),
 		);
-		const increase1Button = component.getChild("increase-by-1");
-		const increase2Button = component.getChild("increase-by-2");
-		const increase3Button = component.getChild("increase-by-3");
+		console.log("--------------------------------");
 		for await (const ev of events) {
-			if (!(ev.target instanceof Element)) {
-				continue;
+			console.log(".................");
+			try {
+				console.log(component.matches(ev, "increase-by-1", "click"));
+				console.log(component.matches(ev, "increase-by-2", "click"));
+				console.log(component.matches(ev, "increase-by-3", "click"));
+			} catch (e) {
+				console.log(e);
 			}
-
-			switch (true) {
-				case increase1Button.contains(ev.target):
-					counter += 1;
-					break;
-				case increase2Button.contains(ev.target):
-					counter += 2;
-					break;
-				case increase3Button.contains(ev.target):
-					counter += 3;
-					break;
+			console.log(".................");
+			if (component.matches(ev, "increase-by-1", "click")) {
+				counter += 1;
+			} else if (component.matches(ev, "increase-by-2", "click")) {
+				counter += 2;
+			} else if (component.matches(ev, "increase-by-3", "click")) {
+				counter += 3;
 			}
 
 			counterSpan.textContent = `Counter: ${counter.toString()}`;
@@ -254,6 +253,8 @@ test("switch on who fire event", async (testContext) => {
 
 	increase1Button.click();
 
+	await sleep(100);
+
 	await waitFor(() => screen.getByText("Counter: 1"));
 
 	increase2Button.click();
diff --git a/packages/seqflow/types/matches.tsx b/packages/seqflow/types/matches.tsx
new file mode 100644
index 0000000..d397316
--- /dev/null
+++ b/packages/seqflow/types/matches.tsx
@@ -0,0 +1,39 @@
+import { expectType } from "tsd";
+import {
+	NavigationEvent,
+	SeqFlowComponentContext,
+	createDomainEventClass,
+} from "../src/index";
+import { createAppForInnerTest } from "../tests/test-utils";
+
+const component = new SeqFlowComponentContext(
+	document.createElement("div"),
+	new AbortController(),
+	createAppForInnerTest([]),
+	{ local: "root", global: "root" },
+);
+
+// support domain event
+{
+	const ValueChangedEvent = createDomainEventClass<
+		{ value: number },
+		"value-changed"
+	>("counter", "value-changed");
+	const ev = new ValueChangedEvent({ value: 5 });
+
+	if (component.matches(ev, ValueChangedEvent)) {
+		expectType<InstanceType<typeof ValueChangedEvent>>(ev);
+		const detail = ev.detail;
+		expectType<{ value: number }>(detail);
+		expectType<number>(detail.value);
+	}
+}
+
+// support navigation event
+{
+	const ev = new NavigationEvent("/");
+	if (component.matches(ev, NavigationEvent)) {
+		expectType<InstanceType<typeof NavigationEvent>>(ev);
+		expectType<string>(ev.path);
+	}
+}
diff --git a/packages/website/src/pages/GetStarted_6domain.md b/packages/website/src/pages/GetStarted_6domain.md
index 3f29484..668a0f9 100644
--- a/packages/website/src/pages/GetStarted_6domain.md
+++ b/packages/website/src/pages/GetStarted_6domain.md
@@ -152,20 +152,16 @@ export async function QuoteComponent(
 		component.domainEvent(QuoteErrorFetched),
 	);
 	for await (const ev of events) {
-		switch (true) {
-			case ev instanceof FetchingNewQuote:
-				component.replaceChild("quote", () => <Loading key="quote" />);
-				break;
-			case ev instanceof NewQuoteFetched:
-				component.replaceChild("quote", () => (
-					<QuoteProse key="quote" quote={ev.detail} />
-				));
-				break;
-			case ev instanceof QuoteErrorFetched:
-				component.replaceChild("quote", () => (
-					<ErrorMessage key="quote" error={ev.detail} />
-				));
-				break;
+		if (component.matches(ev, FetchingNewQuote)) {
+			component.replaceChild("quote", () => <Loading key="quote" />);
+		} else if (component.matches(ev, NewQuoteFetched)) {
+			component.replaceChild("quote", () => (
+				<QuoteProse key="quote" quote={ev.detail} />
+			));
+		} else if (component.matches(ev, QuoteErrorFetched)) {
+			component.replaceChild("quote", () => (
+				<ErrorMessage key="quote" error={ev.detail} />
+			));
 		}
 	}
 }

From fd092cecc678ae487bbe254c1a60c3f1ac447fbf Mon Sep 17 00:00:00 2001
From: Tommaso Allevi <tomallevi@gmail.com>
Date: Sat, 5 Apr 2025 16:13:29 +0200
Subject: [PATCH 3/3] Use listenEvents instead of waitEvents

---
 .../counter/components/SetCounterValue.tsx    |  2 +-
 .../domains/counter/components/ShowValue.tsx  |  2 +-
 examples/custom-element/src/Counter.tsx       |  4 ++--
 examples/e-commerce/src/components/Header.tsx |  2 +-
 .../src/domains/cart/components/AddToCart.tsx |  2 +-
 .../src/domains/cart/components/CartBadge.tsx |  2 +-
 .../cart/components/CartProductList.tsx       |  4 ++--
 .../domains/cart/components/CartTooltip.tsx   |  2 +-
 .../components/ProductCategoryList.tsx        |  2 +-
 .../product/components/ProductItem.tsx        |  2 +-
 .../user/components/UserProfileBadge.tsx      |  2 +-
 examples/e-commerce/src/pages/checkout.tsx    |  2 +-
 examples/e-commerce/src/pages/login.tsx       |  2 +-
 examples/e-commerce/src/router.tsx            |  2 +-
 examples/random-quote/src/Main.tsx            |  2 +-
 .../quote/components/RefreshQuoteButton.tsx   |  2 +-
 packages/components/src/Form/Form.stories.tsx |  8 +++----
 packages/components/src/FormField/index.tsx   |  2 +-
 packages/components/src/Menu/Menu.stories.tsx |  2 +-
 .../components/src/Modal/Modal.stories.tsx    |  2 +-
 .../components/src/Navbar/Navbar.stories.tsx  |  4 ++--
 packages/components/src/NumberInput/index.tsx |  2 +-
 packages/components/src/TextInput/index.tsx   |  2 +-
 packages/seqflow/src/component.ts             | 11 ++++++++++
 packages/seqflow/src/domains.ts               |  2 +-
 .../tests/inner/unmount-checks.test.tsx       | 12 +++++-----
 packages/seqflow/tests/seqflowjs.test.tsx     | 22 +++++++++----------
 packages/seqflow/types/component.tsx          |  4 ++--
 packages/website/src/Main.tsx                 |  2 +-
 .../src/pages/GetStarted_3refreshQuote.md     |  6 ++---
 .../src/pages/GetStarted_4configuration.md    |  2 +-
 .../website/src/pages/GetStarted_6domain.md   |  4 ++--
 packages/website/src/pages/Home.tsx           |  8 +++----
 packages/website/src/pages/Why.md             |  4 ++--
 34 files changed, 73 insertions(+), 62 deletions(-)

diff --git a/examples/counter/src/domains/counter/components/SetCounterValue.tsx b/examples/counter/src/domains/counter/components/SetCounterValue.tsx
index 7da8f26..df02141 100644
--- a/examples/counter/src/domains/counter/components/SetCounterValue.tsx
+++ b/examples/counter/src/domains/counter/components/SetCounterValue.tsx
@@ -22,7 +22,7 @@ export async function SetCounterValue(
 		</Form>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent("form", "submit", { preventDefault: true }),
 	);
 	for await (const ev of events) {
diff --git a/examples/counter/src/domains/counter/components/ShowValue.tsx b/examples/counter/src/domains/counter/components/ShowValue.tsx
index 92fb5dd..17404f5 100644
--- a/examples/counter/src/domains/counter/components/ShowValue.tsx
+++ b/examples/counter/src/domains/counter/components/ShowValue.tsx
@@ -9,7 +9,7 @@ export async function ShowValue(
 
 	component.render(`${app.domains.counter.get()}`);
 
-	const events = component.waitEvents(component.domainEvent(CounterChanged));
+	const events = component.listenEvents(component.domainEvent(CounterChanged));
 	for await (const ev of events) {
 		if (component.matches(ev, CounterChanged)) {
 			component._el.textContent = `${ev.detail.currentValue}`;
diff --git a/examples/custom-element/src/Counter.tsx b/examples/custom-element/src/Counter.tsx
index 7862051..144e335 100644
--- a/examples/custom-element/src/Counter.tsx
+++ b/examples/custom-element/src/Counter.tsx
@@ -59,7 +59,7 @@ async function ChangeCounterButton(
 			{data.text}
 		</Button>,
 	);
-	const events = component.waitEvents(component.domEvent("button", "click"));
+	const events = component.listenEvents(component.domEvent("button", "click"));
 
 	for await (const _ of events) {
 		app.domains.counter.applyDelta(data.delta);
@@ -90,7 +90,7 @@ export async function Counter(
 		</Card>,
 	);
 
-	const events = component.waitEvents(component.domainEvent(CounterChanged));
+	const events = component.listenEvents(component.domainEvent(CounterChanged));
 	for await (const ev of events) {
 		component.getChild("counter").textContent = `${ev.detail.counter}`;
 	}
diff --git a/examples/e-commerce/src/components/Header.tsx b/examples/e-commerce/src/components/Header.tsx
index 137e757..c871ed1 100644
--- a/examples/e-commerce/src/components/Header.tsx
+++ b/examples/e-commerce/src/components/Header.tsx
@@ -37,7 +37,7 @@ export async function Header(
 	const className = user ? classes.logged : classes.unlogged;
 	component._el.classList.add(className);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domainEvent(UserLoggedEvent),
 		component.domainEvent(UserLoggedOutEvent),
 		component.domEvent(component._el, "click", {
diff --git a/examples/e-commerce/src/domains/cart/components/AddToCart.tsx b/examples/e-commerce/src/domains/cart/components/AddToCart.tsx
index 5663d60..7da0b0f 100644
--- a/examples/e-commerce/src/domains/cart/components/AddToCart.tsx
+++ b/examples/e-commerce/src/domains/cart/components/AddToCart.tsx
@@ -64,7 +64,7 @@ export async function AddToCart(
 		otherAddToCartWrapper.classList.remove(classes.show);
 	}
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "click"),
 	);
 	for await (const ev of events) {
diff --git a/examples/e-commerce/src/domains/cart/components/CartBadge.tsx b/examples/e-commerce/src/domains/cart/components/CartBadge.tsx
index 15f2f87..4728b32 100644
--- a/examples/e-commerce/src/domains/cart/components/CartBadge.tsx
+++ b/examples/e-commerce/src/domains/cart/components/CartBadge.tsx
@@ -31,7 +31,7 @@ export async function CartBadge(
 	);
 
 	const counter = component.getChild("counter") as HTMLSpanElement;
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domainEvent(ChangeCartEvent),
 		component.domainEvent(CheckoutEndedCartEvent),
 		component.domEvent(component._el, "click", {
diff --git a/examples/e-commerce/src/domains/cart/components/CartProductList.tsx b/examples/e-commerce/src/domains/cart/components/CartProductList.tsx
index bd88c6e..efff7c6 100644
--- a/examples/e-commerce/src/domains/cart/components/CartProductList.tsx
+++ b/examples/e-commerce/src/domains/cart/components/CartProductList.tsx
@@ -36,7 +36,7 @@ export async function CartProduct(
 		</>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent("remove-from-cart", "click"),
 	);
 	for await (const ev of events) {
@@ -106,7 +106,7 @@ export async function CartProductList(
 		cartLogin.remove();
 	}
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "click", {
 			preventDefault: true,
 		}),
diff --git a/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx b/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx
index 7ab5c1a..0d22c6e 100644
--- a/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx
+++ b/examples/e-commerce/src/domains/cart/components/CartTooltip.tsx
@@ -26,7 +26,7 @@ export async function CartTooltip(_: unknown, { component, app }: Contexts) {
 		</Alert>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domainEvent(ChangeCartEvent),
 		component.domainEvent(CheckoutEndedCartEvent),
 		component.navigationEvent(),
diff --git a/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx b/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx
index 54638e3..e1a18e0 100644
--- a/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx
+++ b/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx
@@ -27,7 +27,7 @@ async function CategoryItem(
 		</a>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "click", {
 			preventDefault: true,
 		}),
diff --git a/examples/e-commerce/src/domains/product/components/ProductItem.tsx b/examples/e-commerce/src/domains/product/components/ProductItem.tsx
index d715c63..f0d28e9 100644
--- a/examples/e-commerce/src/domains/product/components/ProductItem.tsx
+++ b/examples/e-commerce/src/domains/product/components/ProductItem.tsx
@@ -27,7 +27,7 @@ export async function ProductItem(data: Product, { component }: Contexts) {
 		</Card>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "mouseover"),
 		component.domEvent(component._el, "mouseout"),
 	);
diff --git a/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx b/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx
index 096ab95..84d50ae 100644
--- a/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx
+++ b/examples/e-commerce/src/domains/user/components/UserProfileBadge.tsx
@@ -48,7 +48,7 @@ export async function UserProfileBadge(
 	);
 
 	const profilePicture = component.getChild("logo") as HTMLImageElement;
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domainEvent(UserLoggedEvent),
 		component.domainEvent(UserLoggedOutEvent),
 		component.domEvent(component._el, "click"),
diff --git a/examples/e-commerce/src/pages/checkout.tsx b/examples/e-commerce/src/pages/checkout.tsx
index d6984ef..2fe8156 100644
--- a/examples/e-commerce/src/pages/checkout.tsx
+++ b/examples/e-commerce/src/pages/checkout.tsx
@@ -15,7 +15,7 @@ export async function Checkout(
 		</>,
 	);
 
-	const events = component.waitEvents(component.domEvent("go-home", "click"));
+	const events = component.listenEvents(component.domEvent("go-home", "click"));
 	for await (const ev of events) {
 		app.router.navigate("/");
 	}
diff --git a/examples/e-commerce/src/pages/login.tsx b/examples/e-commerce/src/pages/login.tsx
index 7652cfe..37717b5 100644
--- a/examples/e-commerce/src/pages/login.tsx
+++ b/examples/e-commerce/src/pages/login.tsx
@@ -38,7 +38,7 @@ export async function Login(
 
 	const usernameInput = component.getChild<TextInputComponent>("username");
 	const form = component.getChild<FormComponent>("login-form");
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent("login-form", "submit", { preventDefault: true }),
 	);
 	let user: UserType | undefined;
diff --git a/examples/e-commerce/src/router.tsx b/examples/e-commerce/src/router.tsx
index 5ec0035..6828c63 100644
--- a/examples/e-commerce/src/router.tsx
+++ b/examples/e-commerce/src/router.tsx
@@ -55,7 +55,7 @@ export async function Router(
 		</div>,
 	);
 
-	const events = component.waitEvents(component.navigationEvent());
+	const events = component.listenEvents(component.navigationEvent());
 	for await (const ev of events) {
 		if (ev instanceof NavigationEvent) {
 			component.replaceChild("main", () => {
diff --git a/examples/random-quote/src/Main.tsx b/examples/random-quote/src/Main.tsx
index c676d39..db657b7 100644
--- a/examples/random-quote/src/Main.tsx
+++ b/examples/random-quote/src/Main.tsx
@@ -30,7 +30,7 @@ export async function Main({}, { component }: Contexts) {
 		</>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domainEvent(FetchingNewQuote),
 		component.domainEvent(NewQuoteFetched),
 		component.domainEvent(QuoteErrorFetched),
diff --git a/examples/random-quote/src/domains/quote/components/RefreshQuoteButton.tsx b/examples/random-quote/src/domains/quote/components/RefreshQuoteButton.tsx
index bd5512e..6b1de70 100644
--- a/examples/random-quote/src/domains/quote/components/RefreshQuoteButton.tsx
+++ b/examples/random-quote/src/domains/quote/components/RefreshQuoteButton.tsx
@@ -29,7 +29,7 @@ export async function RefreshQuoteButton(
 
 	await f();
 
-	const events = component.waitEvents(component.domEvent("button", "click"));
+	const events = component.listenEvents(component.domEvent("button", "click"));
 	for await (const _ of events) {
 		await f();
 	}
diff --git a/packages/components/src/Form/Form.stories.tsx b/packages/components/src/Form/Form.stories.tsx
index 1644dfb..04b0d1f 100644
--- a/packages/components/src/Form/Form.stories.tsx
+++ b/packages/components/src/Form/Form.stories.tsx
@@ -35,7 +35,7 @@ async function FormExample(
 		</Form>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "submit", { preventDefault: true }),
 	);
 	for await (const ev of events) {
@@ -69,7 +69,7 @@ async function RequiredNumberInputForm(_: unknown, { component }: Contexts) {
 		</>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "submit", { preventDefault: true }),
 	);
 	for await (const _ of events) {
@@ -136,7 +136,7 @@ async function RequiredTextInputForm(_: unknown, { component }: Contexts) {
 		</>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "submit", { preventDefault: true }),
 	);
 	for await (const _ of events) {
@@ -207,7 +207,7 @@ async function AsyncSubmitionForm(_: unknown, { component }: Contexts) {
 
 	const form = component.getChild<FormComponent>("form");
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "submit", { preventDefault: true }),
 	);
 	for await (const _ of events) {
diff --git a/packages/components/src/FormField/index.tsx b/packages/components/src/FormField/index.tsx
index 2e56d14..4def212 100644
--- a/packages/components/src/FormField/index.tsx
+++ b/packages/components/src/FormField/index.tsx
@@ -102,7 +102,7 @@ export async function FormField(
 	}
 
 	if (input instanceof HTMLInputElement) {
-		const events = component.waitEvents(
+		const events = component.listenEvents(
 			component.domEvent(input, "valid"),
 			component.domEvent(input, "invalid"),
 		);
diff --git a/packages/components/src/Menu/Menu.stories.tsx b/packages/components/src/Menu/Menu.stories.tsx
index 74c845b..2bd0706 100644
--- a/packages/components/src/Menu/Menu.stories.tsx
+++ b/packages/components/src/Menu/Menu.stories.tsx
@@ -14,7 +14,7 @@ async function MenuStory(
 			</Menu.Item>
 		</Menu>,
 	);
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "click"),
 	);
 	for await (const ev of events) {
diff --git a/packages/components/src/Modal/Modal.stories.tsx b/packages/components/src/Modal/Modal.stories.tsx
index 84485bb..ac85b15 100644
--- a/packages/components/src/Modal/Modal.stories.tsx
+++ b/packages/components/src/Modal/Modal.stories.tsx
@@ -37,7 +37,7 @@ async function ModalStory(
 
 	const modal = component.getChild<HTMLDialogElement>("modal");
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent("open-modal", "click"),
 	);
 	for await (const event of events) {
diff --git a/packages/components/src/Navbar/Navbar.stories.tsx b/packages/components/src/Navbar/Navbar.stories.tsx
index 91f08f5..bb29b52 100644
--- a/packages/components/src/Navbar/Navbar.stories.tsx
+++ b/packages/components/src/Navbar/Navbar.stories.tsx
@@ -126,7 +126,7 @@ export const NavbarResponsive: StoryFn = async (
 		</Navbar>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "click", {
 			fn: (e) => {
 				if (e.target instanceof HTMLElement && e.target.closest("a")) {
@@ -199,7 +199,7 @@ export const WithDropdownAndLinkStory: StoryFn =
 			</Navbar>,
 		);
 
-		const events = component.waitEvents(
+		const events = component.listenEvents(
 			component.domEvent(component._el, "click", {
 				fn: (e) => {
 					if (e.target instanceof HTMLElement && e.target.closest("a")) {
diff --git a/packages/components/src/NumberInput/index.tsx b/packages/components/src/NumberInput/index.tsx
index dc0cf15..097b5e5 100644
--- a/packages/components/src/NumberInput/index.tsx
+++ b/packages/components/src/NumberInput/index.tsx
@@ -58,7 +58,7 @@ export async function NumberInput(
 		el.ariaRequired = "true";
 	}
 
-	const ev = component.waitEvents(component.domEvent(component._el, "input"));
+	const ev = component.listenEvents(component.domEvent(component._el, "input"));
 	for await (const _ of ev) {
 		if (el.validity.valid) {
 			el.dispatchEvent(new Event("valid"));
diff --git a/packages/components/src/TextInput/index.tsx b/packages/components/src/TextInput/index.tsx
index d4a8982..5356780 100644
--- a/packages/components/src/TextInput/index.tsx
+++ b/packages/components/src/TextInput/index.tsx
@@ -91,7 +91,7 @@ export async function TextInput(
 		}
 	};
 
-	const ev = component.waitEvents(component.domEvent(component._el, "input"));
+	const ev = component.listenEvents(component.domEvent(component._el, "input"));
 	for await (const _ of ev) {
 		if (validationFunction) {
 			const error = validationFunction(el.value);
diff --git a/packages/seqflow/src/component.ts b/packages/seqflow/src/component.ts
index a3d4ee3..33a90ed 100644
--- a/packages/seqflow/src/component.ts
+++ b/packages/seqflow/src/component.ts
@@ -621,8 +621,19 @@ export class SeqFlowComponentContext {
 		wrapper.replaceWith(a as Node);
 	}
 
+	/**
+	 * @deprecated Use listenEvents instead. This method will be removed in a future version.
+	 */
 	async *waitEvents<
 		Fns extends EventAsyncGenerator<GetYieldType<Fns[number]>>[],
+	>(...fns: Fns): AsyncGenerator<GetYieldType<Fns[number]>> {
+		for await (const ev of this.listenEvents(...fns)) {
+			yield ev;
+		}
+	}
+
+	async *listenEvents<
+		Fns extends EventAsyncGenerator<GetYieldType<Fns[number]>>[],
 	>(...fns: Fns): AsyncGenerator<GetYieldType<Fns[number]>> {
 		for await (const ev of combineEventAsyncGenerators(this.ac, ...fns)) {
 			yield ev;
diff --git a/packages/seqflow/src/domains.ts b/packages/seqflow/src/domains.ts
index 85bca44..a137dcd 100644
--- a/packages/seqflow/src/domains.ts
+++ b/packages/seqflow/src/domains.ts
@@ -13,7 +13,7 @@ import type { Domains } from "./types";
  * We want to create the following developer experience:
  * ```ts
  * const CounterChangedEvent = createDomainEventClass('counter', 'changed')
- * const g = component.waitEvents(
+ * const g = component.listenEvents(
  * 		component.domainEvent(CounterChangedEvent)
  * )
  * for await (const ev of g) {
diff --git a/packages/seqflow/tests/inner/unmount-checks.test.tsx b/packages/seqflow/tests/inner/unmount-checks.test.tsx
index 7830f60..bb605ce 100644
--- a/packages/seqflow/tests/inner/unmount-checks.test.tsx
+++ b/packages/seqflow/tests/inner/unmount-checks.test.tsx
@@ -96,7 +96,7 @@ test("track component lifecycle: replaceChild direct child", async (testContext)
 			</>,
 		);
 
-		const events = component.waitEvents(component.domEvent("button", "click"));
+		const events = component.listenEvents(component.domEvent("button", "click"));
 		for await (const _ of events) {
 			c++;
 			component.replaceChild("Button", () => (
@@ -166,7 +166,7 @@ test("track component lifecycle: replaceChild nested in div / child", async (tes
 			</>,
 		);
 
-		const events = component.waitEvents(component.domEvent("button", "click"));
+		const events = component.listenEvents(component.domEvent("button", "click"));
 		for await (const _ of events) {
 			c++;
 			component.replaceChild("Button", () => (
@@ -236,7 +236,7 @@ test("track component lifecycle: replaceChild nested in div / wrapper", async (t
 			</>,
 		);
 
-		const events = component.waitEvents(component.domEvent("button", "click"));
+		const events = component.listenEvents(component.domEvent("button", "click"));
 		for await (const _ of events) {
 			c++;
 			component.replaceChild("wrapper", () => (
@@ -305,7 +305,7 @@ test("track component lifecycle: replaceChild nested in div / nested component",
 	) {
 		component.render(<Button key="Button" label={label} />);
 
-		const events = component.waitEvents(component.domEvent("Button", "click"));
+		const events = component.listenEvents(component.domEvent("Button", "click"));
 		for await (const _ of events) {
 		}
 
@@ -322,7 +322,7 @@ test("track component lifecycle: replaceChild nested in div / nested component",
 			</>,
 		);
 
-		const events = component.waitEvents(component.domEvent("button", "click"));
+		const events = component.listenEvents(component.domEvent("button", "click"));
 		for await (const _ of events) {
 			c++;
 			component.replaceChild("Nested", () => (
@@ -416,7 +416,7 @@ async function Button(
 		</button>,
 	);
 
-	const events = component.waitEvents(component.domEvent("button", "click"));
+	const events = component.listenEvents(component.domEvent("button", "click"));
 	for await (const _ of events) {
 		app.log.debug({
 			message: "Button clicked",
diff --git a/packages/seqflow/tests/seqflowjs.test.tsx b/packages/seqflow/tests/seqflowjs.test.tsx
index 05a7a22..e00e824 100644
--- a/packages/seqflow/tests/seqflowjs.test.tsx
+++ b/packages/seqflow/tests/seqflowjs.test.tsx
@@ -93,7 +93,7 @@ test("listen dom event using key", async (testContext) => {
 		);
 
 		const counterSpan = component.getChild("counter");
-		const events = component.waitEvents(component.domEvent("button", "click"));
+		const events = component.listenEvents(component.domEvent("button", "click"));
 		for await (const _ of events) {
 			counter += 1;
 			counterSpan.textContent = `Counter: ${counter.toString()}`;
@@ -126,7 +126,7 @@ test("listen dom event using element", async (testContext) => {
 		);
 
 		const counterSpan = component.getChild("counter");
-		const events = component.waitEvents(
+		const events = component.listenEvents(
 			component.domEvent(incrementButton, "click"),
 		);
 		for await (const _ of events) {
@@ -167,7 +167,7 @@ test("listen more dom events", async (testContext) => {
 		);
 
 		const counterSpan = component.getChild("counter");
-		const events = component.waitEvents(
+		const events = component.listenEvents(
 			component.domEvent("button1", "click"),
 			component.domEvent("button2", "click"),
 			component.domEvent("button3", "click"),
@@ -217,7 +217,7 @@ test("switch on who fire event", async (testContext) => {
 		);
 
 		const counterSpan = component.getChild("counter");
-		const events = component.waitEvents(
+		const events = component.listenEvents(
 			component.domEvent("increase-by-1", "click"),
 			component.domEvent("increase-by-2", "click"),
 			component.domEvent("increase-by-3", "click"),
@@ -280,7 +280,7 @@ test("prevent default", async (testContext) => {
 		);
 
 		const counterSpan = component.getChild("counter");
-		const events = component.waitEvents(
+		const events = component.listenEvents(
 			component.domEvent("submit-button", "click", { preventDefault: true }),
 			component.domEvent("increment-form", "submit"),
 		);
@@ -321,7 +321,7 @@ test("stop propagation", async (testContext) => {
 		);
 
 		const counterSpan = component.getChild("counter");
-		const events = component.waitEvents(
+		const events = component.listenEvents(
 			component.domEvent("button", "click", { stopPropagation: true }),
 			component.domEvent("button", "click"),
 			component.domEvent("wrapper", "click"),
@@ -363,7 +363,7 @@ test("stop immediate propagation", async (testContext) => {
 		);
 
 		const counterSpan = component.getChild("counter");
-		const events = component.waitEvents(
+		const events = component.listenEvents(
 			component.domEvent("button", "click"),
 			component.domEvent("button", "click", { stopImmediatePropagation: true }),
 			component.domEvent("button", "click"),
@@ -403,7 +403,7 @@ test("listen domain event", async (testContext) => {
 			</button>,
 		);
 
-		const events = component.waitEvents(component.domEvent("button", "click"));
+		const events = component.listenEvents(component.domEvent("button", "click"));
 		for await (const _ of events) {
 			app.domains.counter.applyDelta(1);
 		}
@@ -420,7 +420,7 @@ test("listen domain event", async (testContext) => {
 		);
 
 		const counterSpan = component.getChild("counter");
-		const events = component.waitEvents(
+		const events = component.listenEvents(
 			component.domainEvent(CounterChangedEvent),
 		);
 		for await (const _ of events) {
@@ -447,7 +447,7 @@ test("listen navigation event", async (testContext) => {
 	) {
 		component.render(<a href="/another-page">Go to another page</a>);
 
-		const events = component.waitEvents(
+		const events = component.listenEvents(
 			component.domEvent(component._el, "click", { preventDefault: true }),
 		);
 		for await (const _ of events) {
@@ -463,7 +463,7 @@ test("listen navigation event", async (testContext) => {
 		);
 
 		const counterSpan = component.getChild("current-path");
-		const events = component.waitEvents(component.navigationEvent());
+		const events = component.listenEvents(component.navigationEvent());
 		for await (const ev of events) {
 			counterSpan.textContent = `Path: ${ev.path}`;
 		}
diff --git a/packages/seqflow/types/component.tsx b/packages/seqflow/types/component.tsx
index b5c198b..39f67f3 100644
--- a/packages/seqflow/types/component.tsx
+++ b/packages/seqflow/types/component.tsx
@@ -75,7 +75,7 @@ const component = new SeqFlowComponentContext(
 	const detail: {
 		value: number;
 	} = ev.detail;
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domainEvent(MyDomainEventClass),
 	);
 	for await (const ev of events) {
@@ -88,7 +88,7 @@ const component = new SeqFlowComponentContext(
 		const eventType2: "another-event-type" = ev.t;
 	}
 
-	const events2 = component.waitEvents(
+	const events2 = component.listenEvents(
 		component.domainEvent(MyDomainEventClass),
 		component.domEvent(document.body, "click"),
 	);
diff --git a/packages/website/src/Main.tsx b/packages/website/src/Main.tsx
index 03d52db..a0fb0e4 100644
--- a/packages/website/src/Main.tsx
+++ b/packages/website/src/Main.tsx
@@ -46,7 +46,7 @@ export async function Main(
 		</>,
 	);
 
-	const events = component.waitEvents(component.navigationEvent());
+	const events = component.listenEvents(component.navigationEvent());
 	for await (const _ of events) {
 		const Component = getComponent(app.router.segments);
 		component.replaceChild("main", () => <Component key="main" />);
diff --git a/packages/website/src/pages/GetStarted_3refreshQuote.md b/packages/website/src/pages/GetStarted_3refreshQuote.md
index 98f0ce0..9d6df86 100644
--- a/packages/website/src/pages/GetStarted_3refreshQuote.md
+++ b/packages/website/src/pages/GetStarted_3refreshQuote.md
@@ -76,7 +76,7 @@ export async function Main({}, { component }: Contexts) {
 	);
 
 	// Create an async iterator to wait for the button click
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		// We use the "key" to reference the button
 		component.domEvent('refresh-button', 'click')
 	)
@@ -188,7 +188,7 @@ export async function Main({}, { component }: Contexts) {
 	// Fetch and render the quote
 	await fetchAndRender();
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent('refresh-button', 'click')
 	)
 	for await (const _ of events) {
@@ -290,7 +290,7 @@ export async function Main({}, { component }: Contexts) {
 
 	await fetchAndRender();
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent('refresh-button', 'click')
 	)
 	for await (const _ of events) {
diff --git a/packages/website/src/pages/GetStarted_4configuration.md b/packages/website/src/pages/GetStarted_4configuration.md
index 2094d0f..bf7189a 100644
--- a/packages/website/src/pages/GetStarted_4configuration.md
+++ b/packages/website/src/pages/GetStarted_4configuration.md
@@ -114,7 +114,7 @@ export async function Main({}, { component, app }: Contexts) {
 
 	await fetchAndRender();
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent('refresh-button', 'click')
 	)
 	for await (const _ of events) {
diff --git a/packages/website/src/pages/GetStarted_6domain.md b/packages/website/src/pages/GetStarted_6domain.md
index 668a0f9..cff33f3 100644
--- a/packages/website/src/pages/GetStarted_6domain.md
+++ b/packages/website/src/pages/GetStarted_6domain.md
@@ -146,7 +146,7 @@ export async function QuoteComponent(
 	);
 
 	// Listen to the domain events
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domainEvent(FetchingNewQuote),
 		component.domainEvent(NewQuoteFetched),
 		component.domainEvent(QuoteErrorFetched),
@@ -207,7 +207,7 @@ export async function RefreshQuoteButton(
 	// Refresh the quote at the start
 	await refresh();
 
-	const events = component.waitEvents(component.domEvent("button", "click"));
+	const events = component.listenEvents(component.domEvent("button", "click"));
 	for await (const _ of events) {
 		// Refresh the quote when the button is clicked
 		await refresh();
diff --git a/packages/website/src/pages/Home.tsx b/packages/website/src/pages/Home.tsx
index 2659a74..60ce703 100644
--- a/packages/website/src/pages/Home.tsx
+++ b/packages/website/src/pages/Home.tsx
@@ -419,7 +419,7 @@ async function MyComponent(
   );
 
   // create AsyncGenerator
-  const events = component.waitEvents(component.domEvent('my-button', 'click'));
+  const events = component.listenEvents(component.domEvent('my-button', 'click'));
   // Wait for events
   for await (const ev of events) {
     window.alert('Button clicked: ' + ev.type);
@@ -445,7 +445,7 @@ async function MyComponent(
     </button>
   );
 
-  const events = component.waitEvents(component.domEvent('my-button', 'click'));
+  const events = component.listenEvents(component.domEvent('my-button', 'click'));
   for await (const ev of events) {
     // Update the counter
     counter++;
@@ -472,7 +472,7 @@ async function MyComponent(
     </>
   );
 
-  const events = component.waitEvents(component.domEvent('my-button', 'click'));
+  const events = component.listenEvents(component.domEvent('my-button', 'click'));
   for await (const ev of events) {
     // Replace the counter div element
     component.replaceChild('counter', () => (
@@ -512,7 +512,7 @@ async function Counter(
   );
 
   // create AsyncGenerator
-  const events = component.waitEvents(
+  const events = component.listenEvents(
     // listen "click" event on element tagged by the 'increment-counter-button' key
     component.domEvent('increment-counter-button', 'click')
   );
diff --git a/packages/website/src/pages/Why.md b/packages/website/src/pages/Why.md
index 399dbd7..c72db8a 100644
--- a/packages/website/src/pages/Why.md
+++ b/packages/website/src/pages/Why.md
@@ -70,7 +70,7 @@ export async function Counter({}, {component}: Contexts) {
 
 	component.render(<button key="click-me-button">Click Me</button>);
 
-	const events = component.waitEvents(component.domEvent("click-me-button", "click"));
+	const events = component.listenEvents(component.domEvent("click-me-button", "click"));
 	for await (const ev of events) {
 		counter++;
         window.alert(\`Clicked \${counter} times\`);
@@ -136,7 +136,7 @@ export async function UserBadge({}, { component, app }: Contexts) {
     component.render(<div>{getBadge(user)}</div>);
 
     // Listen to the UserLoggedEvent
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.app.domainEvent(UserLoggedEvent),
 	);
     // Every time the event is emitted, the \`for\` loop is executed