Skip to content
svelte-tunnel

bridge-kit

svelte-tunnel

Render markup from deep in your tree into a distant outlet. No prop drilling. No global DOM hacks.

View examples Source on GitHub

Live tunnel

Source / Portal.In

Content mounted here travels to the outlet below.

Outlet / Portal.Out

Install

Install 
pnpm add @bridge-stack/svelte-tunnel

Usage

Svelte 
import { tunnel } from '@bridge-stack/svelte-tunnel';

const Portal = tunnel();

<Portal.Out />
<Portal.In>Hello</Portal.In>

Why a tunnel?

Keep content next to the logic that owns it, while rendering into headers, toast trays, drawers, or any shared chrome.

  • Paired portals

    Each tunnel() call returns a matched In / Out pair scoped to that instance.

  • Single or multiple

    Last-wins for menus and tabs, or stack every In for toasts and trays.

  • Svelte 5 native

    Built with runes, snippets, and mount / unmount. No extra runtime.