### Install Portl Library

Source: https://github.com/falkz/portl/blob/main/README.md

This command installs the Portl library using npm. It's the first step to using Portl in your Svelte 5 project.

```bash
npm install portl
```

--------------------------------

### Conditional Rendering with Portl

Source: https://github.com/falkz/portl/blob/main/README.md

Demonstrates how to conditionally render content within a Portl portal. This example shows a modal that only appears when a state variable `isOpen` is true. It highlights the seamless integration of Portl with Svelte's reactive nature and conditional logic.

```svelte
<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>
```

--------------------------------

### Basic Portl Usage in Svelte

Source: https://github.com/falkz/portl/blob/main/README.md

Demonstrates the fundamental usage of Portl in Svelte. It shows how to create a portal with `createPortal`, define a receiver for the content, and then render content within the portal. This is useful for moving DOM elements across different locations in the component tree.

```svelte
<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>
```

--------------------------------

### Creating Multiple Portals

Source: https://github.com/falkz/portl/blob/main/README.md

Illustrates how to create multiple, independent portals using `createPortal`. This allows for managing different content streams, such as headers and footers, separately. Each created portal can be imported and used throughout the application.

```javascript
import { createPortal } from "portl";

export const Header = createPortal();
export const Footer = createPortal();
```

--------------------------------

### Portl Rendering Order (Preferred)

Source: https://github.com/falkz/portl/blob/main/README.md

Illustrates the preferred method for managing rendering order with multiple portals. By placing conditional logic directly inside each `Portal`, you ensure that the order of rendering is consistent and predictable, regardless of when the portals are mounted.

```svelte
<Title.Portal>
    {#if condition}✅ This will always render first{/if}
</Title.Portal>
<Title.Portal>✅ This will always render second</Title.Portal>
```

--------------------------------

### Portl with Placeholder Content

Source: https://github.com/falkz/portl/blob/main/README.md

Shows how to provide fallback content for a portal receiver using a placeholder. If no content is actively being rendered by the portal, the specified placeholder content will be displayed instead. This is useful for ensuring a consistent UI even when dynamic content is absent.

```svelte
<script>
    import { createPortal } from "portl";

    const Modal = createPortal();
</script>

<Title.Receiver>
    {#snippet placeholder()}
        <h1>Default Title</h1>
    {/snippet}
</Title.Receiver>
```

--------------------------------

### Portl Rendering Order (Avoid)

Source: https://github.com/falkz/portl/blob/main/README.md

Highlights a less desirable approach to managing rendering order with conditional logic applied outside the `Portal` component. This method can lead to unpredictable rendering sequences because the order depends on when the conditional `Portal` is mounted, making it less reliable.

```svelte
{#if condition}<Title.Portal>❌ This will NOT always render first</Title.Portal>{/if}
<Title.Portal>❌ This will NOT always render second</Title.Portal>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.