Live Preview

Preview example Preview example

The first killer feature has found its place in Sulu with the completion of the latest sprint 15. The so called Sulu Live Preview enables an instant view any changes applied by a content manager in the actual layout of a website.

Preview architecture Preview architecture

This live preview functionality is achieved by continuously sending the current content form data to a server in order to update the live preview window. An innovative integration of an online cache enables only updates to be rendered on the fly without having to reload the entire page.

Take a look under the hood

The pivotal component generating this live preview is a service enabling an html page for rendering and caching any updates.

Supporting web browsers communicate the web form data directly to the corresponding web socket server based on the Ratchet Open Source Library. Leveraging this direct connection between the web form, the server and the preview pane, updates can be instantly displayed.

In order to also support older browsers and servers without web sockets, a fallback via polling has been implemented. In this scenario the live preview window will send an HTTP-request to a controller in a defined interval in order to display the latest modifications.

Conclusion

The latest version of Sulu has been issued with the fallback version. The completion of the next development sprint 16 will introduce the standard version featuring the web socket connection and split screen live preview pane. This major feature addition to Sulu dramatically simplifies the online content editing process and we can’t wait to see if the Sulu users are going consider the live preview function the next killer feature!

Stay tuned for more updates on Sulu!