Examples
Interactive demos of basic teleporting, modes, modals, toasts, context through In, and popovers.
Basic portal
Edit the message or toggle the source. The outlet updates live.
Content mounted here travels to the outlet below.
Modes
single keeps the latest In; multiple stacks them all.
single
Only the last mounted In appears.
multiple
Every mounted In appears at the outlet.
Modal dialog
Trigger from nested UI. The overlay teleports to a host outlet.
Open a dialog from nested UI. The overlay renders at the host outlet, not where the trigger lives.
Profile settings sit deep in the tree.
Toast tray
Nested actions push content into shared chrome through a multiple-mode tunnel.
Fire toasts from nested UI. They render in the top bar via a tunnel.
Context through In
Context set above In is available inside teleported content.
Context is set on the parent of In. The consumer reads it from inside the tunnel
content.
Teleported content still sees the context from above In.
Popover
Tunnel renders popover at a host outlet to avoid overflow/z-index clipping.
Open a menu from a clipped, low-z panel. The popover teleports to the host outlet so it isn't
cut off by overflow: hidden.
Without a tunnel, a local popover would be clipped here.
Snippet
import { tunnel } from '@bridge-stack/svelte-tunnel';
const Modal = tunnel();
// host / overlay root
<Modal.Out />
// deep in the tree
{#if open}
<Modal.In>
<div role="dialog">…</div>
</Modal.In>
{/if}