LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • Why Content Embed is needed
  • How to use Content Embed
  • 1. Add HTML
  • 2. Style
  • Image handling
  • HTML Embed vs. Content Embed
  • Similar components

Was this helpful?

Edit on GitHub
  1. university
  2. Core Components

Content Embed

Content Embed allows styling HTML, which can be provided via the Code property statically or loaded dynamically from any Resource, for example, from a CMS.

PreviousCollectionNextMarkdown Embed

Last updated 10 months ago

Was this helpful?

Why Content Embed is needed

When designing most components on the site, you click on them and style them. However, this can’t be the case for HTML code because the HTML component is all that can be clicked on, not any of the headers, paragraphs, or other tags within.

Content Embed enables applying styles to the various tags contained within HTML.

How to use Content Embed

Content Embed is located in Components > Data.

1. Add HTML

Once added to the canvas, the right panel will show a Code field. You can either add HTML directly to it or, more commonly, bind HTML to it from a Resource.

2. Style

In the Navigator, Content Embed has various HTML tags nested. Expand Content Embed, and you’ll see tags such as Heading 1, Link, Image, and much more.

Styles applied to each of these tags will apply to all occurrences of that tag within the Content Embed. For example, if you apply a border on the Image tag, then all images contained within the HTML will have a border.

Image handling

Webstudio does NOT optimize images contained in the markup.

On the other hand, images bound to the Image Component are optimized by default.

The difference is in markup, we are not mapping every element to a Webstudio Component; rather, the element is served as-is with the exception of your custom styles applied to it.

HTML Embed vs. Content Embed

While very similar, there is one distinct difference: Content Embed enables styling the contained HTML.

If there is no need to apply styles to the contained HTML, then use the HTML Embed Component. However, if you need to style the contents (which is typically the case if fetching HTML from a CMS), then use Content Embed.

Similar components

🧩
🪜
⌨️HTML Embed
🪜Markdown Embed
CMS data bound to Content Embed Code
Heading 2 selected and styled
Content Embed Component
HTML bound to Content Embed component
Content Embed H2 styled