A lightweight portal library for Svelte 5.
npm install portl
Portl lets you render content in different locations than where it's defined. Using Portal
to define the content and Receiver
to define where it is rendered.
<script>
import { createPortal } from "portl";
const Title = createPortal();
</script>
<!-- Define the rendering location (e.g. in a +layout.svelte) -->
<Title.Receiver />
<!-- Define the content elsewhere (e.g. in a +page.svelte) -->
<Title.Portal>
<h1>This content will be rendered at the Receiver location</h1>
</Title.Portal>
You can create as many portals as you like:
import { createPortal } from "portl";
export const Header = createPortal();
export const Footer = createPortal();
Header
and Footer
can be used anywhere in your application.
You can provide a placeholder when no portal content is present:
<script>
import { createPortal } from "portl";
const Modal = createPortal();
</script>
<Title.Receiver>
{#snippet placeholder()}
<h1>Default Title</h1>
{/snippet}
</Title.Receiver>
Portals work seamlessly with Svelte's conditional rendering:
<script>
import { createPortal } from "portl";
const Modal = createPortal();
let isOpen = $state(false);
</script>
<Modal.Receiver />
<Modal.Portal>
{#if isOpen}
<div class="modal">
<h2>Modal Content</h2>
<button on:click={() => (isOpen = false)}>Close</button>
</div>
{/if}
</Modal.Portal>
You can render as many portals as you want in a receiver. If you render multiple portals they will be rendered in the order the portals where mounted:
<Title.Portal>This is shown first</Title.Portal>
<Title.Portal>This is shown second</Title.Portal>
Therefore it is better to define conditional rendering inside of the portal when ever possible:
<Title.Portal>
{#if condition}✅ This will always render first{/if}
</Title.Portal>
<Title.Portal>✅ This will always render second</Title.Portal>
Rather than:
{#if condition}<Title.Portal>❌ This will NOT always render first</Title.Portal>{/if}
<Title.Portal>❌ This will NOT always render second</Title.Portal>