How to Embed a Widget in DEV.to
DEV.to uses markdown with Liquid Tags for embedding content from approved providers. Custom HTML and arbitrary iframes are not supported -- the editor strips all HTML tags. However, DEV.to has a native CodePen liquid tag, making the CodePen workaround the best way to display your Embeddy widget in a DEV.to article.
Important limitation
DEV.to does not allow custom HTML, iframes, or JavaScript in articles. All HTML tags are stripped from the markdown editor. This is a deliberate security restriction. You cannot paste iframe embed code directly into a DEV.to post.
1. Prerequisites
- 1An active Embeddy account with at least one published widget.
- 2A DEV.to account at dev.to.
- 3A free CodePen account (required for the embed workaround).
2. How DEV.to Handles Embeds
DEV.to articles are written in markdown with a custom extension called Liquid Tags. These tags allow embedding content from specific approved providers. The syntax looks like this:
{% codepen https://codepen.io/yourusername/pen/abcXYZ %}
{% youtube dQw4w9WgXcQ %}
{% github https://github.com/user/repo %}
{% codesandbox abc123 %}Supported liquid tag providers include: CodePen, YouTube, Vimeo, GitHub (repos, issues, comments), Twitter/X, CodeSandbox, Glitch, Replit, StackBlitz, JSFiddle, Instagram, Spotify, SoundCloud, and several others.
There is no generic "iframe" or "embed" liquid tag. If your URL is not from a supported provider, there is no way to embed it inline. This is why the CodePen workaround is essential for Embeddy widgets on DEV.to.
3. Key Limitations
No custom HTML or iframes
DEV.to's markdown parser strips all HTML tags. Pasting <iframe> code will result in it being removed entirely from the published article.
No arbitrary URL embedding
Only URLs from DEV.to's approved liquid tag providers render as interactive embeds. An embeddy.ai URL pasted directly will appear as plain text or a link, not an embedded widget.
CodePen embed includes pen UI
When you embed a CodePen via liquid tag, the resulting embed includes CodePen's UI (tabs for HTML/CSS/JS, and the result pane). Your Embeddy widget will be visible in the Result tab. You can set thedefault-tab=result parameter to show the result pane by default.
4. Method 1: CodePen Liquid Tag (Recommended)
This is the most reliable way to display an interactive Embeddy widget in a DEV.to article.
Why this works
CodePen is a fully supported DEV.to liquid tag provider. You create a CodePen pen containing your Embeddy iframe, then embed that CodePen in your DEV.to article using the liquid tag syntax.
- 1
Create a new CodePen pen with your Embeddy iframe.
Go to codepen.io, create a new pen, and paste this in the HTML tab:
<div style="width:100%;height:500px;"> <iframe src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID" width="100%" height="100%" frameborder="0" style="border:none;border-radius:8px;"> </iframe> </div>Replace
WIDGET_IDandPROPS_IDwith your actual values from the Embeddy dashboard. - 2
Save the pen as public.
Click Save and ensure visibility is set to Public. Copy the pen URL from your browser (e.g.,
https://codepen.io/yourusername/pen/abcXYZ). - 3
Add the CodePen liquid tag in your DEV.to article.
In the DEV.to markdown editor, add the following on its own line:
{% codepen https://codepen.io/yourusername/pen/abcXYZ default-tab=result %}The
default-tab=resultparameter ensures the Result pane (showing your widget) is displayed by default instead of the code tabs. - 4
Preview and publish.
Click Preview in the DEV.to editor to verify the CodePen embed renders with your Embeddy widget visible. Then click Publish.
5. Method 2: Direct Link (Fallback)
If you prefer simplicity over an inline embed, include a direct markdown link to your Embeddy widget. Readers click through to interact with the widget in a new tab.
[Try the interactive widget](https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID)
When to use a direct link
A direct link is the simplest option and always works. Use it when the CodePen embed feels too heavy, or when you want to link to your widget alongside other content in your article.
6. Troubleshooting
Liquid tag shows as plain text
Ensure the liquid tag is on its own line with no extra spaces. The syntax must be exactly {% codepen URL %} with the correct CodePen URL format. Also verify you are using the V2 editor on DEV.to.
CodePen embed shows code instead of result
Add default-tab=result after the URL in your liquid tag to show the result pane by default. Without this parameter, DEV.to may show the HTML tab first.
Widget not loading inside the CodePen embed
Verify your Embeddy widget URL is correct and the widget is published. Also make sure the CodePen pen is public -- private pens cannot be embedded via liquid tags.
7. FAQ
Can I paste iframe code directly in a DEV.to article?
No. DEV.to strips all HTML tags from articles. Iframes, script tags, and any other HTML elements are removed during publishing. You must use liquid tags for embeds.
Which embed providers does DEV.to support?
DEV.to supports CodePen, CodeSandbox, JSFiddle, Glitch, Replit, StackBlitz, YouTube, Vimeo, Twitter/X, GitHub, Instagram, Spotify, SoundCloud, and several others via liquid tags. There is no generic iframe or arbitrary URL embed support.
Will updating the CodePen automatically update the DEV.to article?
Yes. The liquid tag embeds the live CodePen pen. Any changes you make to the pen's HTML (such as updating the widget URL) will be reflected in the DEV.to article without needing to edit the article.
Can I use JSFiddle or CodeSandbox instead of CodePen?
Yes. DEV.to supports liquid tags for JSFiddle ({% jsfiddle URL %}) and CodeSandbox ({% codesandbox ID %}). Create your Embeddy iframe in any of these playgrounds and embed it using the corresponding liquid tag.
Ready to share your widget on DEV.to?
Build and publish your widget in minutes with embeddy.ai -- then share it with the developer community.