Webflow CMS & Collection Lists

How to Store Custom Code in a CMS Text Field

#wfu

Whether you are needing to store a chunk of CSS, some custom script, or a Soundcloud podcast embed, sometimes you need to store custom code in a CMS field.

Currently [ Nov-2022 ], Webflow does not have an HTML Embed field time for the CMS, which means you probably want to use a multiline text field. But there's a problem...

Whatever content you put into that field gets HTML-encoded in the final result. This is a result of the way Webflow handles embedded fields in HTML Embeds- any fields you insert will be HTML encoded.

In most situations, this is the right behavior, but not when you want functioning code, or structured JSON data.

Fortunately, there are solutions.

Solution #1 - Use the "Rich Text Embed" Quick Hack

The CMS does not yet have an HTML Embed field type, however it does have a Rich Text field type, and Rich Text content can contain HTML Embed content.

Therefore one way to do this is to create a Rich Text field in your CMS Collection, and then in that Rich Text field content, you add an embed and paste your content in there.

Jeff ( @webdev )in the Webflow forums detailed this approach;

Add a rich text field to your CMS Collection
In the CMS view ( designer or editor ) edit that field and drop in a custom code embed
Paste your html / css / script / JSON in there
Bind that Rich text field to a rich text element

It's hacky, and inconvenient to see or edit the code as it requires an extra couple of clicks, but in this setup Webflow will render that custom code without HTML encoding it, and it should work fine.

Solution #2 - NOCODE solution

Sygnal Attributes decode-html Attribute

Add one library reference, and one custom attribute, and your text contents will be automatically decoded for you.

Downside here is performance. The decode happens after the page has loaded, so there is a brief delay before the decoded content will appear.

Docs are here.

Solution #3 - Decode your Encoded HTML Content w/ Script

Another approach is to bind your plain text field to an element, and allow Webflow to HTML encode it. Then in your resulting page, use script to decode it.

This is a funky approach I’ve used before, which is a self-replacing script. Place your HTML Embed where you want the decoded content to go. Drop this script in and put your embedded field that allows you to easily position the decoded content.

When the document renderer hits the script, it will process it, decode your HTML, and then replace the script element with the newly decoded element.

Restrictions- in this approach, your encoded content cannot contains any backticks (_`), because it will likely break the script.

<script>
(function() { // IIFE

    // Replace this string with the CMS field you are decoding
    var htmlString = `YOUR CMS FIELD EMBED HERE`;

    // Prepare your decoded content
    function decodeHtml(html) {
        var doc = new DOMParser().parseFromString(html, "text/html");
        return doc.documentElement.textContent;
    }
    var decodedString = decodeHtml(htmlString);

    // Create a new element to hold it
    var newElement = document.createElement('div');
    newElement.innerHTML = decodedString;
    
    // Replace this script with the new element
    var scriptElement = document.currentScript;   
    scriptElement.parentNode.replaceChild(newElement, scriptElement);
})();
</script>

Manual Scripting Solution

Another solution ( similar, but manual setup ) is shared here;

Render Custom Code from Webflow CMS Item's Value

Precise Conversion

If you are working with precise data, such as a JSON payload, and you need it to be 100% cross-browser support, I recommend that you instead use the HTML Entity ( he ) library on Github.