Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.
src/app/page.tsx2 files · signals · runs in your browser
import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";
// A normal PRISM server page. The island below is rendered to HTML on the
// server, then hydrated on the client - only the signal-bound nodes update.
export default function Page() {
return (
<main style="max-width:680px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif;color:#0a0a0a">
<h1 style="letter-spacing:-0.02em;margin-bottom:4px">Toast</h1>
<p style="color:#64748b;margin-top:0">A button pushes onto a list signal; each toast self-removes after ~3s.</p>
{signalsIsland("Showcase", Showcase, {})}
</main>
);
}
Pure PRISM + real bext signals — fine-grained, no re-render.
src/app/page.tsx2 files · react · runs in your browser
import Showcase from "../components/Showcase";
// A button that pushes a transient toast notification, which
// auto-dismisses after a few seconds (useState + setTimeout).
export default function Page() {
return (
<main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
<h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Toast</h1>
<p style={{ color: "#64748b", marginTop: 0 }}>A brief notification that dismisses itself.</p>
<Showcase />
</main>
);
}