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

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

Restart the dev server if necessary.

To render the home story at the root of your server, in the Visual Editor, select the Config section and type / in the Real path field.

In your project, add a homepage 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']);
  }
}

Bridge with the Visual Editor

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

<?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;
  }
}

<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 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.

Concept: Visual Editor

Get in touch with the Storyblok community