The PreviewBundle provides the feature of preview for custom-entities. It is build on top of the route-bundle and can only be introduced for entities which have a RouteDefaultsProvider.

This Provider will be used to determine which controller should be used to render the HTML of the entity. This HTML should contain the definition property=”...” which will be used to find the place where the content takes place. See the documentation for that in How to include live-preview in my template?.


This is a simple (and not complete) example of a news-entity form.

Sulu-Admin form

define(['services/sulupreview/preview'], function(Preview) {

    return {

        header: { ... },

        layout: function() {
            return {
                content: {
                    width: 'fixed',
                    leftSpace: true,
                    rightSpace: true
                sidebar: (!! ? 'max' : false

        initialize: function() {


        render: function() { ... },

        save: function(action) { ... },

        loadComponentData: function() {
            if (! {
                return {};

            return this.sandbox.util.load(this.options.url).done(function(data) {
                this.preview = Preview.initialize({});
                    'AppBundle\\Entity\\News', // your entity-class

                return data;

When binding DOM Events by calling this.preview.bindDomeEvents(this.$el) you need to add the class preview-update to your elements.


The PreviewObjectProvider is the interface which will be used to load, bind and de/serialize the object.


namespace News\Preview;

use Sulu\Bundle\PreviewBundle\Preview\Object\PreviewObjectProviderInterface;

class NewsObjectProvider implements PreviewObjectProviderInterface
    public function getObject($id, $locale)
        return ...; // load the object by id

    public function getId($object)
        return $object->getId();

    public function setValues($object, $locale, array $data)
        ... // bind data-array to the object

    public function setContext($object, $locale, array $context)
        ... // context change is for example a template change (e.g. in pages or articles)

    public function serialize($object)
        return serialize($object);

    public function deserialize($serializedObject, $objectClass)
        return unserialize($serializedObject);

After registering a service with this class and the tag <tag name=”sulu_preview.object_provider” class=”AppBundleEntityNews”/> you should be able to see the live-preview in your form.