How To Preserve Empty Elements

By Cory LaViska on April 17, 2019

By default, the editor removes empty elements as part of its cleanup process. This post will show you how to preserve them when needed.

Coffee cup being poured out

If you've stumbled across this post, you probably know that the editor removes empty elements as part of its cleanup process. For example, this will be removed by the editor because it's empty:

<span style="background-image: url(bg.png);">
</span>

 The goal of the cleanup process is to ensure that Surreal CMS outputs well-formed HTML, and empty elements tend to litter up the code.

However, there are some use cases where a seemingly empty element isn't actually empty and shouldn't be removed. There's a trick to make this happen, and it's as simple as adding an HTML comment inside the empty element.

<span style="background-image: url(bg.png);">
  <!-- not empty -->
</span>

This will prevent the "empty" element from being removed, which is great to keep in mind when you're creating templates or blocks that use empty elements for whatever reason.