Portal & ErrorBoundary in SolidJS

From the SolidJS cheat sheet · Portals & Error Boundaries · verified Jul 2026

Portal & ErrorBoundary

Render components into a different DOM node and catch errors in the component tree.

tsx

// Quick Reference
import { Portal } from "solid-js/web";
import { ErrorBoundary, Suspense } from "solid-js";

<Portal><div class="modal">Modal Content</div></Portal>
<ErrorBoundary fallback={<p>Error!</p>}><App /></ErrorBoundary>

💡 Portal renders children into a target DOM element outside the component hierarchy

⚡ ErrorBoundary fallback receives the error and a reset function to retry rendering

📌 Combine ErrorBoundary with Suspense for complete async error and loading handling

🟢 Portal defaults to document.body — pass mount prop to target a specific element

portalerror-boundarysuspense

Back to the full SolidJS cheat sheet