Visual Preview in Symfony

Visual Preview

Enhance your editorial and development experience by connecting your local project with Storyblok's visual editor.

Set the default environment

First, go to Settings > Visual Editor and set the default environment to the URL of the local dev server: https://localhost:8000

Go to Settings > Visual Editor and set the default environment to the URL of the local development server, for example localhost:8000.

The preview environment requires an https connection. The Symfony CLI command symfony server:start automatically provides starts a secure local server for usage.

Restart the dev server if necessary.

To render the home story at the root of your server, in the Visual Editor, go to the Config section and write / into the Real path field.

In your project, add a homepage controller to reroute the home slug.

src/Controller/HomepageController.php

<?php

declare(strict_types=1);

namespace App\\\\Controller;

use Symfony\\\\Bundle\\\\FrameworkBundle\\\\Controller\\\\AbstractController;
use Symfony\\\\Component\\\\HttpFoundation\\\\RedirectResponse;
use Symfony\\\\Component\\\\HttpFoundation\\\\Request;
use Symfony\\\\Component\\\\Routing\\\\Attribute\\\\Route;

final class HomepageController extends AbstractController
{
	#[Route('/', name: 'homepage', priority: 100)]
	public function index(Request $request): RedirectResponse
	{
		return $this->redirectToRoute(\\\\Storyblok\\\\Bundle\\\\Routing\\\\Route::CONTENT_TYPE, ['slug' => 'home']);
	}
}

Bridge with the Visual Editor

Connect block classes with their Storyblok counterparts via the EditableInterface and use the EditableTrait modules.

src/Block/Feature.php

<?php

declare(strict_types=1);

namespace App\\\\Block;

use Storyblok\\\\Bundle\\\\Block\\\\Attribute\\\\AsBlock;
use Storyblok\\Api\\Domain\\Type\\Editable;
use Storyblok\\Bundle\\Editable\\EditableInterface;
use Storyblok\\Bundle\\Editable\\EditableTrait;

#[AsBlock]
final readonly class Feature implements EditableInterface
{
	use EditableTrait;
	public string $name;

	public function __construct(array $values)
	{
		$this->name = $values['name'] ?? '';
		$editable = null;
		if (\\array_key_exists('_editable', $values['content'])) {
			$editable = new Editable($values['content']['_editable']);
		}
		$this->editable = $editable;
	}
}

templates/blocks/feature.html.twig

<div class="feature">
<div {{ block|storyblok_attributes }} class="feature">
	<span>{{ block.name }}</span>
</div>

Add the Storyblok Bridge script to the base template.

templates/base.html.twig

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		{% block stylesheets %}
		{% endblock %}
		{% block javascripts %}
		{% endblock %}
	</head>
	<body>
		<div class="container">
		{% block body %}{% endblock %}
	</div>

		{% block storyblok_scripts %}
			{{ storyblok_js_bridge_scripts() }}
		{% endblock %}
	</body>
</html>

The storyblok_js_bridge_scripts() function automatically loads the Storyblok JavaScript Bridge only in draft mode.

Now, click on a component and see its corresponding block open up in the editor, or change a field value and see it rendered in real-time.

Use the storyblok_attributes filter to make content editable in the Visual Editor:

Deploy the preview environment

We recommend setting up a second deploy environment and setting the version parameter to ‘draft’ in the Storyblok client and generating different tokens for each environment.

Use ‘published’ on your production deployment process.

Learn more about preview and production environments in this tutorial.

Next Part

Dynamic Routing in Symfony

Previous Part

Integrate Symfony with Storyblok

Storyblok Visual Editor Documentation

Visual Preview in Symfony

Visual Preview

Set the default environment

Bridge with the Visual Editor

Deploy the preview environment

Related Links