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..df02141 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" />
@@ -22,12 +22,14 @@ export async function SetCounterValue(
 		</Form>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		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 9856834..17404f5 100644
--- a/examples/counter/src/domains/counter/components/ShowValue.tsx
+++ b/examples/counter/src/domains/counter/components/ShowValue.tsx
@@ -7,10 +7,12 @@ 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));
+	const events = component.listenEvents(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/custom-element/src/Counter.tsx b/examples/custom-element/src/Counter.tsx
index 50c361e..144e335 100644
--- a/examples/custom-element/src/Counter.tsx
+++ b/examples/custom-element/src/Counter.tsx
@@ -54,12 +54,12 @@ 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>,
 	);
-	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);
@@ -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"}
@@ -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/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..c871ed1 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="/">
@@ -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", {
@@ -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 2b32a41..7da0b0f 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"]}
@@ -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");
 
@@ -66,35 +64,27 @@ 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) {
-		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 d5fffce..4728b32 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"
@@ -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", {
@@ -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 7d5f034..efff7c6 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
@@ -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) {
@@ -49,14 +49,14 @@ export async function CartProductList(
 	{ component, app }: Contexts,
 ) {
 	if (data.cart.products.length === 0) {
-		component.renderSync(<EmptyCart />);
+		component.render(<EmptyCart />);
 		return;
 	}
 
 	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 = (
@@ -75,7 +77,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 }) => {
@@ -104,26 +106,18 @@ export async function CartProductList(
 		cartLogin.remove();
 	}
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "click", {
 			preventDefault: true,
 		}),
 		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, () => <></>);
@@ -138,11 +132,10 @@ export async function CartProductList(
 			const cart = app.domains.cart.getCart();
 
 			if (cart.products.length === 0) {
-				component.renderSync(<EmptyCart />);
-				break;
+				component.render(<EmptyCart />);
+			} 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 0496fdb..0d22c6e 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"
@@ -26,38 +26,28 @@ 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(),
 		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/ProductCategoryList.tsx b/examples/e-commerce/src/domains/product/components/ProductCategoryList.tsx
index 788fef9..e1a18e0 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>
@@ -27,7 +27,7 @@ async function CategoryItem(
 		</a>,
 	);
 
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domEvent(component._el, "click", {
 			preventDefault: true,
 		}),
@@ -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..f0d28e9 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
@@ -27,14 +27,14 @@ 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"),
 	);
 	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 007ff55..84d50ae 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"
@@ -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"),
@@ -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/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..2fe8156 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="/">
@@ -15,9 +15,8 @@ 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) {
-		ev.preventDefault();
 		app.router.navigate("/");
 	}
 }
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..37717b5 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>
@@ -38,11 +38,16 @@ 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;
-	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/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..6828c63 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} />
@@ -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/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..db657b7 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,14 +23,14 @@ 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" />
 		</>,
 	);
 
-	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/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..6b1de70 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>,
@@ -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/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..04b0d1f 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
@@ -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) {
@@ -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"}>
@@ -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) {
@@ -122,7 +122,7 @@ export const NumberInputStory: StoryFn = {
 };
 
 async function RequiredTextInputForm(_: unknown, { component }: Contexts) {
-	component.renderSync(
+	component.render(
 		<>
 			<Form>
 				<FormField label={"Choose a value"}>
@@ -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) {
@@ -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"}>
@@ -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/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..4def212 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}
@@ -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/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..2bd0706 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>
@@ -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/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..ac85b15 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
@@ -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/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..bb29b52 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"]}>
@@ -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")) {
@@ -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>
@@ -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/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/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/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/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/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..33a90ed 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;
@@ -608,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;
@@ -663,6 +687,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/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/child.test.tsx b/packages/seqflow/tests/inner/child.test.tsx
index b5475c4..83feec5 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,22 +45,22 @@ 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 () =>
+	await expect(async () =>
 		component.replaceChild("foo", () => <div key="div1">B</div>),
 	).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..bb605ce 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
@@ -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", () => (
@@ -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
@@ -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", () => (
@@ -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
@@ -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", () => (
@@ -303,9 +303,9 @@ 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"));
+		const events = component.listenEvents(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
@@ -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", () => (
@@ -410,13 +410,13 @@ async function Button(
 	{ label }: ComponentProps<{ label: string }>,
 	{ component, app }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<button key="button" type="button">
 			{label}
 		</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 cc44cda..e00e824 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
@@ -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()}`;
@@ -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>
@@ -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) {
@@ -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
@@ -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"),
@@ -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
@@ -217,29 +217,28 @@ 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"),
 		);
-		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();
@@ -269,7 +270,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">
@@ -279,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"),
 		);
@@ -310,7 +311,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
@@ -320,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"),
@@ -352,7 +353,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
@@ -362,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"),
@@ -396,13 +397,13 @@ test("listen domain event", async (testContext) => {
 		_: ComponentProps<unknown>,
 		{ component, app }: Contexts,
 	) {
-		component.renderSync(
+		component.render(
 			<button key="button" type="button">
 				Increment
 			</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);
 		}
@@ -411,7 +412,7 @@ test("listen domain event", async (testContext) => {
 		_: ComponentProps<unknown>,
 		{ component, app }: Contexts,
 	) {
-		component.renderSync(
+		component.render(
 			<div>
 				<IncrementCounterButton />
 				<span key="counter">Counter: 0</span>
@@ -419,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) {
@@ -444,9 +445,9 @@ 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(
+		const events = component.listenEvents(
 			component.domEvent(component._el, "click", { preventDefault: true }),
 		);
 		for await (const _ of events) {
@@ -454,7 +455,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>
@@ -462,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/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/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..a0fb0e4 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}>
@@ -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/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..9d6df86 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>
@@ -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')
 	)
@@ -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" />
@@ -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) {
@@ -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" />
@@ -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 873e512..bf7189a 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" />
@@ -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 7565b42..cff33f3 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,33 +139,29 @@ export async function QuoteComponent(
 	_: ComponentProps<unknown>,
 	{ component }: Contexts,
 ) {
-	component.renderSync(
+	component.render(
 		<>
 			<Spot key="quote" />
 		</>,
 	);
 
 	// Listen to the domain events
-	const events = component.waitEvents(
+	const events = component.listenEvents(
 		component.domainEvent(FetchingNewQuote),
 		component.domainEvent(NewQuoteFetched),
 		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} />
+			));
 		}
 	}
 }
@@ -202,7 +198,7 @@ export async function RefreshQuoteButton(
 		});
 	};
 
-	component.renderSync(
+	component.render(
 		<Button key="button" type="button">
 			Refresh
 		</Button>,
@@ -211,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();
@@ -238,7 +234,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..60ce703 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,14 +412,14 @@ async function MyComponent(
   {}: ComponentProps<unknown>,
   { component }: Contexts
 ) {
-  component.renderSync(
+  component.render(
     <button key="my-button" type="button">
       Click me
     </button>
   );
 
   // 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);
@@ -439,13 +439,13 @@ 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>
   );
 
-  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++;
@@ -463,7 +463,7 @@ async function MyComponent(
   {}: ComponentProps<unknown>,
   { component }: Contexts
 ) {
-  component.renderSync(
+  component.render(
     <>
       <button key="my-button" type="button">
         Now
@@ -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', () => (
@@ -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>
@@ -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')
   );
@@ -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..c72db8a 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,9 +68,9 @@ 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"));
+	const events = component.listenEvents(component.domEvent("click-me-button", "click"));
 	for await (const ev of events) {
 		counter++;
         window.alert(\`Clicked \${counter} times\`);
@@ -133,17 +133,17 @@ 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(
+	const events = component.listenEvents(
 		component.app.domainEvent(UserLoggedEvent),
 	);
     // Every time the event is emitted, the \`for\` loop is executed
     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!