Quickstart
Create a presentation
Generate a starter presentation:
php artisan make:slidewire demo/product-launch --title="Product Launch"
This creates a Blade file in your first configured presentation root.
Build your slides
You may keep a presentation as a simple Blade file, or use the generated Livewire single-file component format.
<?php
use Livewire\Component;
new class extends Component {
public string $headline = 'Product Launch';
public function with(): array
{
return [
'metrics' => [
'Activation: 62%',
'Churn: 1.8%',
],
];
}
}; ?>
<x-slidewire::deck theme="aurora" transition="fade">
<x-slidewire::slide>
<div class="mx-auto max-w-5xl space-y-6">
<h1 class="text-4xl font-semibold tracking-tight">{{ $headline }}</h1>
<x-slidewire::fragment :index="0">
<p class="text-lg text-slate-200">Private beta is complete.</p>
</x-slidewire::fragment>
<x-slidewire::fragment :index="1">
<p class="text-lg text-slate-200">Pilot customers are now live.</p>
</x-slidewire::fragment>
</div>
</x-slidewire::slide>
<x-slidewire::slide theme="white">
<div class="mx-auto max-w-4xl space-y-6">
<x-slidewire::markdown>
## Launch metrics
@foreach ($metrics as $metric)
- {{ $metric }}
@endforeach
</x-slidewire::markdown>
</div>
</x-slidewire::slide>
</x-slidewire::deck>
The compiler supports public Livewire properties and render data returned from with().
Register the presentation route
use Illuminate\Support\Facades\Route;
Route::slidewire('/slides/product-launch', 'demo/product-launch');
Present the deck
Open /slides/product-launch and navigate with the keyboard, by clicking the stage, or by swiping on touch devices.
If you want to customize the deck further, continue with components reference and presentation features.