SlideWire: Build Presentations with Livewire and Blade

SlideWire is a Laravel package for building browser-based presentation decks with Livewire and Blade components. Slides are Blade templates rendered as full-page Livewire components, allowing use of public properties, with(), and the complete Livewire component model.

#Authoring Slides

A deck uses <x-slidewire::deck> and <x-slidewire::slide> components. The example below makes a simple presentation that uses the neon theme and a fade transition:

<x-slidewire::deck theme="neon" transition="fade">
    <x-slidewire::slide>
        <x-slidewire::markdown>
## Hello, SlideWire
Presentations built with Blade and Livewire.
        </x-slidewire::markdown>
    </x-slidewire::slide>
 
    <x-slidewire::slide>
        <x-slidewire::code language="php">
Route::slidewire('/slides/hello', 'demo/hello');
        </x-slidewire::code>
    </x-slidewire::slide>
</x-slidewire::deck>

#Fragments

Use the <x-slidewire::fragment> component to reveal content progressively within a slide. SlideWire steps through each fragment before showing the next slide:

<x-slidewire::slide>
    <x-slidewire::fragment>First point</x-slidewire::fragment>
    <x-slidewire::fragment>Second point</x-slidewire::fragment>
    <x-slidewire::fragment>Third point</x-slidewire::fragment>
</x-slidewire::slide>

#Vertical Slide Stacks

For two-dimensional decks, <x-slidewire::vertical-slide> groups slides into a vertical stack beneath a horizontal position, letting you drill down into a topic without leaving the main flow:

<x-slidewire::deck>
    <x-slidewire::slide>Overview</x-slidewire::slide>
 
    <x-slidewire::vertical-slide>
        <x-slidewire::slide>Deep Dive: Part One</x-slidewire::slide>
        <x-slidewire::slide>Deep Dive: Part Two</x-slidewire::slide>
    </x-slidewire::vertical-slide>
 
    <x-slidewire::slide>Wrap Up</x-slidewire::slide>
</x-slidewire::deck>

#Code Highlighting and Diagrams

Syntax highlighting is bundled via Phiki — no extra setup required. The <x-slidewire::code> component accepts a language attribute along with optional theme, font, and font size overrides:

<x-slidewire::code language="php">
public function handle(): void
{
    $this->info('Hello from SlideWire!');
}
</x-slidewire::code>

Mermaid diagrams are also supported and render in the browser when the slide becomes active:

<x-slidewire::diagram>
flowchart LR
    A[Request] --> B[Route] --> C[Controller]
</x-slidewire::diagram>

#Features

• Seven built-in themes — default, black, white, aurora, sunset, neon, and solarized — with six transition presets and adjustable speeds
• Two-dimensional navigation — horizontal and vertical slide stacks, with keyboard, click, tap, swipe, and hash-based deep linking
• Fragments — progressive content reveals within a single slide before advancing
• Syntax highlighting — bundled via Phiki, no extra setup required
• Mermaid diagram support — renders client-side when the slide becomes active
• And more...

#Installation

SlideWire requires PHP 8.4, Laravel 12, and Livewire 4.2 or higher. Install via Composer:

composer require wendelladriel/slidewire

Full documentation is available at slidewire.dev and the source is on GitHub.