Embedding GuideHashnode

How to Embed a Widget in Hashnode

Hashnode's editor supports embed blocks that can render content from supported providers (YouTube, CodePen, CodeSandbox, Glitch, and more). While Hashnode does not support pasting raw HTML or iframes directly into markdown, you can use the embed block with a supported URL or the CodePen workaround to display your Embeddy widget inline.

Partial HTML support

Hashnode's markdown editor does not allow raw HTML iframes in article content. HTML tags in markdown are sanitized. However, Hashnode supports embed blocks for approved providers, and CodePen is one of them -- making the CodePen workaround a reliable option.

1. Prerequisites

1An active Embeddy account with at least one published widget.
2A Hashnode account with a blog at hashnode.com.
3For the CodePen method: a free CodePen account.

2. How Hashnode Handles Embeds

Hashnode uses a block-based markdown editor. To embed external content, you use the Embed block(triggered by typing /embed or using the%[url] markdown syntax).

The embed block supports URLs from providers like YouTube, CodePen, CodeSandbox, Glitch, GitHub Gist, Twitter/X, Spotify, and others. When you paste a supported URL, Hashnode fetches the oEmbed data and renders the content inline.

%[https://codepen.io/yourusername/pen/abcXYZ]

If the URL is not from a supported provider, the embed block will render a simple link card instead of an interactive embed. This means pasting an embeddy.ai URL directly may show as a link card rather than an interactive widget.

3. Method 1: Embed Block (Try First)

Try pasting your Embeddy widget URL directly in the embed block. If Hashnode recognizes it, it will render as an interactive embed.

1
Open the Hashnode editor.
Log in to Hashnode, go to your blog dashboard, and create a new article or open a draft.
2
Insert an embed block.
On a new line, type / to open the block menu, then select Embed. Alternatively, type the embed markdown syntax directly:
%[https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID]
3
Check the preview.
Click Preview to see if the widget renders interactively. If it shows as a link card instead, proceed to Method 2 (CodePen workaround).

4. Method 2: CodePen Workaround (Reliable)

CodePen is a fully supported embed provider on Hashnode. By placing your Embeddy iframe inside a CodePen pen and embedding the CodePen URL in Hashnode, your widget renders inline.

Why this works

Hashnode supports CodePen embeds natively. The CodePen pen renders your Embeddy iframe in its preview pane, and Hashnode displays the full CodePen embed in your article.

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>

2
Save the pen as public.
Make sure the pen is set to Public visibility so Hashnode can access it.
3
Embed the CodePen URL in Hashnode.
In your Hashnode article, use the embed syntax with your CodePen URL:
%[https://codepen.io/yourusername/pen/abcXYZ]
4
Preview and publish.
The CodePen embed will appear in your article with the Embeddy widget visible inside it.

5. Method 3: Direct Link

The simplest fallback is to include a direct link to your Embeddy widget URL in your article text. 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 this method

Use a direct link when you want maximum simplicity or when the embed block does not render your widget interactively. This always works regardless of Hashnode's embed provider list.

6. Troubleshooting

Embed shows as a link card instead of interactive widget

This means Hashnode does not recognize the URL as a supported embed provider. Use the CodePen workaround (Method 2) instead, since CodePen is always supported.

CodePen embed shows blank preview

Ensure the CodePen pen is set to Public visibility. Private and unlisted pens may not render in Hashnode embeds. Also verify the Embeddy widget URL inside the pen is correct.

Raw HTML tags visible in published article

Hashnode sanitizes HTML in markdown content. If you see raw HTML tags displayed as text, it means the editor stripped them. Use the embed block (%[url]) instead of pasting HTML directly.

7. FAQ

Does Hashnode support raw HTML iframes in articles?

No. Hashnode's markdown editor sanitizes raw HTML, so pasting an iframe tag directly will not work. Use the embed block with a supported URL (like CodePen) or a direct link instead.

Can I use the widget embed on my Hashnode custom domain?

Yes. Hashnode's embed blocks work the same whether your blog is on yourblog.hashnode.dev or a custom domain. The embedding behavior is identical.

Will updating my CodePen automatically update the Hashnode article?

Yes. Since the Hashnode embed references your live CodePen URL, any changes you make to the pen's HTML content will be reflected in the published article without needing to edit the article itself.

Ready to embed your widget on Hashnode?

Build and publish your widget in minutes with embeddy.ai -- then share it in your Hashnode articles.

Open Dashboard Browse All Docs