Webflow CMS & Collection Lists

How to Store Custom Code in a CMS Text Field

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;

  1. Add a rich text field to your CMS Collection
  2. In the CMS view ( designer or editor ) edit that field and drop in a custom code embed
  3. Paste your html / css / script / JSON in there
  4. 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 - Decode your Encoded HTML Content

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.

WFU's decode-html Attribute

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

Docs are here.

Manual Scripting Solution

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

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.


CMS Basics
Strongly-typed Data-binding
Sorting Collection Lists
Sorting by OPTION & REF Fields
Random, Dynamic List Sorting
Filtering Collection Lists
Filtering Collection Lists
Working with Collection Lists
How Collection List Pagination Works
Unbinding Collection Lists
Hide an Entire Section w/ Empty Collection Lists
Nesting Collection Lists
Display Filename for Download
Collection Lists & Custom Code
How to Store Custom Code in a CMS Text Field
How to Bind CMS fields to Custom Attributes
Collection Pages
Collection Pages
No items found.
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.