Live Preview

Live Preview gives you the ability to see what your entry will look like in real time as you write and edit. You can configure and switch the preview screen size, pop it out into a new window, and even switch to AMP mode if enabled.

Overview

The ability to preview what your content looks like in real-time is practically a super power. You can be confident you won't have any layout surprises.

Live Preview will render your work-in-progress content with whichever template you have currently loaded. You can even switch between templates while previewing.

Statamic Live Preview
And he's still touring, ladies and gentlemen.

Device Sizes

You can customize the list of device sizes in config/statamic/live_preview.php.

'devices' => [
'Laptop' => ['width' => 1440, 'height' => 900],
'Tablet' => ['width' => 1024, 'height' => 786],
'Mobile' => ['width' => 375, 'height' => 812],
],
Device Size Switcher
This dropdown will obey you better than any puppy will, guaranteed.

Customizing the Toolbar

You may add extra input fields to Live Preview's header toolbar using custom Vue components. The values of these fields will be available in the data injected into the template.

Define these inputs using an array of key/value pairs of field handles and vue component names in config/statamic/live_preview.php:

'inputs' => [
'show_ads' => 'live-preview-ads',
]

Similar to fieldtypes, this component will be given a value prop and expect any changes to emit an input event.

Statamic.$components.register('live-preview-ads', require('./LivePreviewAds.vue'));
<template>
<div>
<label>
<input type="checkbox"
:value="value"
@input="$emit('input', $event.target.checked)" />
Show Advertisements
</label>
</div>
</template>
 
<script>
export default {
props: ['value']
}
</script>

These values are available in your views, scoped into the live_preview array:

{{ if live_preview:show_ads }}
<div class="ad"> ... </div>
{{ /if }}

Preview Targets

On a Collection, you may define one or more preview targets which lets you choose which page should viewed in the Live Preview window.

For example, you may want to preview how an entry looks on the entry's page itself, as well as a listing page.

# content/collections/blog.yaml
preview_targets:
-
label: Entry
url: /blog/{slug}
-
label: Index
url: /blog

You may use entry's variables in the URL, just like defining a route.

If you don't define any targets, it will use the entry's URL.

Headless / Front-end Frameworks

To use Live Preview with a front-end framework, you may use a preview target that points to a custom URL.

For example, Nuxt.js's Preview Mode requires that you point to a URL with a preview=true query parameter.

preview_targets:
-
label: Entry
url: https://your-nuxt-app.com/blog/{slug}?preview=true

A token query parameter will be appended to the URL automatically, which you can then pass back to Statamic in a GraphQL query, where it will know to replace the entry with the Live Preview version.

Custom Rendering

If you need even more control, you may create your own route that retrieves the Live Preview entry through the token manually. Whatever you return from the route will be displayed within Live Preview.

preview_targets:
-
label: Entry
url: /render-live-preview
use Facades\Statamic\CP\LivePreview;
use Illuminate\Http\Request;
 
Route::get('/render-live-preview', function (Request $request) {
$entry = LivePreview::item($request->statamicToken());
$entry->title; // The edited title
$entry->foo; // The edited foo field, etc.
$entry->live_preview; // All the "extra" data from the custom toolbar fields are in here.
 
return view('whatever');
});
Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →