Presentation workflow

• Presentation structure
• Blade presentations
• Markdown presentations
• Composed presentations
• Livewire single-file presentations
• Deck defaults
• Vertical stacks
• Render data

Presentation structure

Each deck resolves from a presentation key and typically compiles into one <x-slidewire::deck> worth of slide metadata plus one or more slides.

The default conventions are:

resources/views/pages/slides/{presentation-key}.blade.php
resources/views/pages/slides/{presentation-key}.md
resources/views/pages/slides/{presentation-key}/

Blade presentations

The simplest presentations can be plain Blade files:

<x-slidewire::deck>
    <x-slidewire::slide class="bg-slate-900 text-white">
        <div class="mx-auto max-w-5xl space-y-6">
            <h1 class="text-4xl font-semibold tracking-tight">Kickoff</h1>
            <p class="text-lg text-slate-300">Welcome to SlideWire.</p>
        </div>
    </x-slidewire::slide>

    <x-slidewire::slide class="bg-white text-slate-900">
        <div class="mx-auto max-w-4xl space-y-6">
            <x-slidewire::markdown>
## Agenda

- Goals
- Milestones
- Risks
            </x-slidewire::markdown>
        </div>
    </x-slidewire::slide>
</x-slidewire::deck>

This format works well for static presentations and lightweight content that does not need component state.

Markdown presentations

If you prefer writing a content-first deck, you may author the presentation as a standalone Markdown file.

---
theme: black
transition: fade
highlight-theme: catppuccin-mocha
---

# Intro

Welcome to SlideWire.

<!-- slide -->

---
theme: white
auto-slide: 3000
---

## Code

```php
echo 'Hello';
```

SlideWire reads optional deck frontmatter from the top of the file, splits slides on <!-- slide -->, and lets each slide define its own frontmatter before the Markdown body.

Markdown decks are a good fit for talks that are mostly prose, lists, and highlighted code samples.

Composed presentations

When a presentation grows, you may split it into a directory of ordered slide parts.

resources/views/pages/slides/team/kickoff/
    deck.blade.php
    01-intro.blade.php
    02-agenda.md
    03-demo.blade.php

deck.blade.php is optional and defines deck-level defaults. Ordered part files are compiled in lexicographic order, and each part may be a Blade file or a Markdown slide.

Blade part files may still use normal Blade includes when you want to reuse fragments inside a slide or share repeated sections across multiple parts.

Livewire single-file presentations

SlideWire also supports Livewire single-file component presentations. This is the format generated by make:slidewire.

<?php

use Livewire\Component;

new class extends Component {
    public string $title = 'Quarterly Review';

    public function mount(): void
    {
        $this->title = 'Quarterly Review';
    }

    public function with(): array
    {
        return [
            'subtitle' => 'Public properties and render data compile correctly.',
        ];
    }
}; ?>

<x-slidewire::deck theme="black">
    <x-slidewire::slide>
        <div class="space-y-4">
            <h1 class="text-4xl font-semibold tracking-tight">{{ $title }}</h1>
            <p class="text-lg text-slate-300">{{ $subtitle }}</p>
        </div>
    </x-slidewire::slide>
</x-slidewire::deck>

During compilation, SlideWire renders the component view, includes public properties, and merges array data returned by with().

This approach is useful when your presentation needs computed values, reusable data, or setup logic during mount().

Deck defaults

Deck attributes provide defaults for all slides in the presentation:

<x-slidewire::deck theme="black" transition="fade" auto-slide="3000">
    <x-slidewire::slide>
        <h2>Inherits deck defaults</h2>
    </x-slidewire::slide>

    <x-slidewire::slide theme="white" transition="zoom">
        <h2>Overrides selected settings</h2>
    </x-slidewire::slide>
</x-slidewire::deck>

The common runtime precedence is slide attribute, then deck attribute, then config fallback.

This keeps shared settings at the deck level while still allowing individual slides to opt into different behavior.

Vertical stacks

Use <x-slidewire::vertical-slide> to create a vertical group inside a horizontal deck:

<x-slidewire::deck>
    <x-slidewire::slide>
        <h2>Horizontal Slide 1</h2>
    </x-slidewire::slide>

    <x-slidewire::vertical-slide>
        <x-slidewire::slide>
            <h2>Stack Top</h2>
        </x-slidewire::slide>

        <x-slidewire::slide>
            <h2>Stack Bottom</h2>
        </x-slidewire::slide>
    </x-slidewire::vertical-slide>

    <x-slidewire::slide>
        <h2>Horizontal Slide 3</h2>
    </x-slidewire::slide>
</x-slidewire::deck>

Horizontal navigation moves between columns, while vertical navigation moves within a stack. Hash deep-linking uses #/slide/H for flat slides and #/slide/H/V for stacked slides, with both indexes starting at 1.

Render data

If you need dynamic content, keep the presentation in a Livewire single-file component and expose values through public properties or with().

This is a good fit for:

• computed metrics
• shared labels and headings
• lightweight presentation state prepared during mount()