Visual Preview in Symfony

Connect the local project with Storyblok's Visual Editor to enhance the editorial and development experience.

Set the default environment

Open Settings → Visual Editor and set the default environment to the URL of the local development server: https://localhost:8000/

Restart the development server if necessary.

To render the home story at the root, open Home story. In the Visual Editor, select the Config section and type / in the Real path field.

In the code editor, add a home page controller to reroute the home slug.

<?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']);
  }
}

Set up Storyblok’s Bridge

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

Adapt the Feature block and template.

<?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)) {
      $editable = new Editable($values['_editable']);
    }
    $this->editable = $editable;
  }
}

In the template, use the storyblok_attributes filter to make content editable in the Visual Editor:

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

Add the Storyblok Bridge script to the base template.

<!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 Bridge only in draft mode.

In Storyblok, click a component and its corresponding block opens up in the editor. Try to change a field value and it renders in real-time.

Deploy the preview environment

We recommend having a separate preview environment with different tokens than the production one. Set the version parameter to draft in the Storyblok client and use published only in production.

Concept: Visual Editor

Was this page helpful?

This site uses reCAPTCHA and Google's Privacy Policy. Terms of Service apply.

Get in touch with the Storyblok community