Webflow sync, pageviews & more.
NEW

How can I fix the issue with my code in Webflow's HTML embed component that causes it to display all tags instead of replicating a specific result from the CMS?

TL;DR
  • Use the Rich Text element to bind and render CMS HTML content safely instead of using the Embed block.
  • If dynamic HTML must be rendered in an Embed, store it in a data attribute and inject it into the DOM using JavaScript.

You're seeing raw HTML tags in your embed component because Webflow's HTML Embed does not automatically interpret CMS dynamic fields as active HTML. Here's how to fix it.

1. Use embed with Proper Binding

  • When using CMS fields in an Embed, Webflow injects them as strings. If your dynamic content includes HTML, it will display as text unless properly rendered.
  • This happens because Webflow escapes special characters in CMS fields, preventing XSS (cross-site scripting).

2. Replace CMS Field Inside Markup, Not As Markup

  • Let’s say you have a CMS Rich Text field that includes HTML formatting. If you insert it like this in an embed:
    <div>{{cmsField}}</div>, it will show HTML as plain text.
  • To fix it, use Webflow’s built-in Rich Text element instead of trying to render raw HTML through the Embed.

3. Use the Rich Text Element for HTML Rendering

  • If you're passing formatted content (like bold text, links, etc.), bind it to a Rich Text element in Webflow. This natively renders the HTML structure.
  • Go to your Webflow Designer:
  • Add a Rich Text block
  • Bind it to your CMS Rich Text field
  • Style it as needed

This ensures Webflow parses and renders the underlying HTML instead of escaping it.

4. Limited Workaround: Use Custom Attributes and JavaScript

If you must use the Embed Code block and need to insert real HTML via CMS:

  • Bind your CMS field in a data-* attribute:
  • Example: <div data-html="{{cmsField}}"></div>
  • Then, use custom JavaScript (added via your Webflow custom code area or Embed):
  • On page load, read the data-html value with JavaScript and inject it as real HTML.
  • Example:
    document.querySelector('[data-html]').innerHTML = document.querySelector('[data-html]').dataset.html;
  • Important: This bypasses Webflow’s sanitization, so only use this if you trust your CMS content completely.

Summary

Webflow escapes CMS content in Embed blocks to prevent security issues. To render CMS HTML properly:

  • Use the Rich Text element when working with rich content.
  • Avoid using the Embed block for injecting dynamic HTML unless absolutely necessary.
  • If required, use data-* and JavaScript to safely inject HTML at runtime.
Rate this answer

Other Webflow Questions