'%20width='128'%20height='128'%20xlink:href='data:image/jpeg%3bbase64%2c/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCABAAEADASIAAhEBAxEB/8QAGwAAAQUBAQAAAAAAAAAAAAAABQIDBAYHAAH/xAAzEAACAQMCBAMHAgcBAAAAAAABAgMABBEFEgYhMUETUWEHFCNCYnGBFSIyM1KRobHB8P/EABsBAAEFAQEAAAAAAAAAAAAAAAQAAQMFBgIH/8QAJhEAAQQBBAEDBQAAAAAAAAAAAQACAxEEBRIhQTFCUYEGMmHB4f/aAAwDAQACEQMRAD8AxeKN5ZFjiUs7HAUdSau2h6DDZqstyFluevPmqfb19ai8J6eIoPfJV%2bJJyTPyr5/mrGDV9HHxZUGRuIoJ4Gg1xr4guJYjblijFch%2btStXuHttKu5ov5kcTMvocUU4P9kbX2jWd/d626C6iWcxRwBtu4Z6k9edC5uYzFALzVoPH085DiALpCrLXbO4kSN2MMrnCq/QnyBouDSOLvY%2bLLRr7ULXW5ZTaxNN4UsAG4KM4yDyP4ofw7cyXWiWU8xJkeIFie/bP%2bKbEzGZQOw3SrdU0s4tEirUTXuHIL9WmtAsN115clf7%2bR9aoM0TwyvFKhSRDhlPUGtcBqs8a6UJ7b3%2bFfixDEmPmXz/AB/qiHt7CbS9QdG8QSmwfB9v4icYVEVVGFUYA8hTgNNA0oGi6WtmhU2w0ldenOlvMYBcoyCQLuwceVbHBBd213BBBKgsUiH7PAAVVH7dqsDkNyB5gjFYvZ3lxYzrc2TKtygJjLDIBwQOVa9peqXGuaRp19pD2SxTqDNJclxsI5OqgDmc7hknHLvWV%2boI5DIx3pIr5U2nhrQ4d/pP6lDeTzyRNIvuLxklBAGUgYyrsTnJycADoDmsg/Tl0c/p0cniLbfDDYx69PzitQ4m1m60DR9Rur17KRcGOyaAsS0rZCIwIxnPcHHLoKy%2baaSeVpZ2DyucuwGAT54paDFIHPcftqvlAa9scxrPVd/CUDXOqyRsjgMjAqQe4NIBpQNaQhYyWKkLBpQNDLLUUl0sXTEZVcOPqHb/AN50Cub6e4J8WQ7f6RyFdyTNYB%2bV6NlSsYAfNq0yahbo4QSB5D8q86MjhviuPhw3nB2qubLVIj7zZs4Xw3Jw5jJ/h5g9MHn3rPLa4WDc%2bNz4wo7fetM9mXtAtdMhXStY%2bFbs5ZJ%2boQnqG%2bnPftVJqT5pIw6MXXXlAQPa%2bSpOAfZNDh/iR9IbVeM9UaRdMg22lmrBlD42q7kci3P1PrQiDUraR/DMgSQcircv7Ub9pnH9pqULaVowElsrhpJ8YWRh0A%2bnPfvWZ3Nws%2b18bXxhh2%2b9NprpWRl0gq%2bvFBQ5rI3v2s5rtX8Glg1QrTUrm0I8KVto%2bRuYNWi/1SODRjeIRl1%2bGPqPb8f8q3bIHBU02IbAHaoVvK6xugYhGIJXsSKXvqMpwK93c6FPKvHC1I3V2%2bmN1dupUudqf315upjdXu6lSW1P76TczyPDFEzkxoSVXsCetM7udcxyKQ4ThtFf/9k='%20/%3e%3c/svg%3e)
In this article, you’ll learn about some common issues that can come up while implementing and working with the real-time preview feature in Mattrbld—and what you can do in order to mitigate them.
Setting the Correct Security Headers
The preview page is opened in an iFrame when it is being shown within the Mattrbld content editing UI. This means that it needs to be allowed to do so.
If your preview page doesn’t load at all from within the Mattrbld UI, you may have to check that your X-Frame-Options and Content-Security-Policy HTTP headers are set up correctly to allow your preview page to be opened within an iFrame on the Origin of your Mattrbld instance.
The X-Frame-Options header is obsolete and should be replaced with an appropriate Content-Security-Policy header.
A correct CSP header may look like this:
Content-Security-Policy: frame-ancestors 'self' https://app.mattrbld.comYou can learn more about these headers on MDN:
Caching Issues
Depending on the caching settings of your server, the preview iFrame might load an outdated version of the preview page with no obvious way to clear the cache and reload the page.
This may lead to Mattrbld being unable to connect to the preview, prompting you to check whether the preview page implements the preview protocol correctly.
If you have the option, you could always set the Cache-Control HTTP header of your preview page to no-cache to avoid this issue, or, if you cannot or don’t want to change the cache control header, you can fall back to manually appending a random query string such as ?rand=123 to your preview URL in the General Settings tab.
Future versions of Mattrbld may automatically add a random query for “cache-busting” purposes on the first re-try, but this is not implemented at the moment.
You can learn more about Cache-Control on this article from MDN.
Refreshing the Preview Page
Sometimes you may want to simply reload the preview page without having to open and close the preview itself. You can do so by right-clicking somewhere on the preview page and selecting “Reload frame” (or the equivalent of your browser). If the preview protocol is implemented correctly, Mattrbld should be able to reconnect to the page after a refresh.
Conclusion
This article concludes the section on real-time previews in Mattrbld. In it, you have learned how previews work, what limitations they have, how to implement the preview protocol itself and its optional features, as well as what can go wrong and how to fix it.
In the final content section of this documentation, you will find all the necessary information you need to host your own instance of Mattrbld.