--- title: Visual Preview in Symfony description: Learn how to connect your Symfony project to Storyblok’s Visual Editor for a seamless, intuitive content editing experience. url: https://storyblok.com/docs/guides/symfony/visual-preview --- # 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/` > [!NOTE] > Storyblok's preview environment requires an `https` connection. The Symfony CLI command `symfony server:start` automatically runs a secure local server. 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. src/Controller/HomepageController.php ```php 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. src/Block/Feature.php ```php 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: templates/blocks/feature.html.twig ```html
{{ block.name }}
``` Add the Storyblok Bridge script to the base template. templates/base.html.twig ```html {% block stylesheets %} {% endblock %} {% block javascripts %} {% endblock %}
{% block body %}{% endblock %}
{% block storyblok_scripts %} {{ storyblok_js_bridge_scripts() }} {% endblock %} ```   {% block stylesheets %} {% endblock %} {% block javascripts %} {% endblock %}    {% block body %}{% endblock %}  {% block storyblok\_scripts %} {{ storyblok\_js\_bridge\_scripts() }} {% endblock %}