🪜Markdown Embed
Markdown Embed converts Markdown to HTML and enables styling it.
Why Markdown Embed is needed
Some APIs (or users) provide rich text in Markdown format, which can't be rendered in the web browser. Markdown Embed converts Markdown to HTML and enables applying styles to the various tags contained within HTML.
How to use Markdown Embed
Markdown Embed is located in Components > Data.
1. Add Markdown
Once added to the canvas, the right panel will show a Code field. You can either add Markdown directly to it or, more commonly, bind Markdown to it from a Resource.
2. Style
In the Navigator, Markdown Embed has various HTML tags nested. Expand Markdown 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 Markdown 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 optimizes images contained in Markdown with the same responsive image pipeline as the Image component. It generates the appropriate srcset and sizes attributes and lazy-loads images by default.
Data URL images are served as-is without optimization.
Similar components
⌨️HTML Embed🪜Content EmbedRelated
Content Embed – Render rich text/HTML
HTML Embed – Custom HTML code
Collection – Loop through CMS data
Last updated
Was this helpful?