How to Embed HTML inside the Notion (step-by-step)

We explain how to add HTML in Notion using Bullet in simple 3 steps

Nagarathinammal

Mar 27, 2026

How to Embed HTML inside the Notion (step-by-step)

TABLE OF CONTENTS

What You'll Need

Step-by-Step: Embedding HTML Inside Notion

Step 1: Create a Code Block in Notion

Step 2: Open the Caption

Step 3: Add the Magic Caption - bullet:HTML

Going Further: Dynamic HTML with Merge Tags

Things to Keep in Mind about embedding HTML inside the Notion

Quick Recap

Wrapping Up

If you've spent any time building a website or documentation site with Notion, you've probably run into a frustrating wall; Notion is fantastic for writing and organizing content, but it doesn't natively let you drop in raw HTML. So what do you do when you want to add a custom contact form, a newsletter signup widget, or a fancy image layout that goes beyond Notion's built-in blocks?

That's where Bullet comes in. With Bullet, you can write real HTML directly inside your Notion pages and have it render beautifully on your published website. Let's walk through exactly how to do it.

What You'll Need

Before diving in, make sure you have:

A Notion account with a page you're working on

A Bullet account with your Notion page connected as a website

Some HTML code you'd like to embed (could be a snippet from a third-party tool, or something you wrote yourself)

Step-by-Step: Embedding HTML Inside Notion

The process is refreshingly simple once you know the trick. Here's how it works:

Step 1: Create a Code Block in Notion

Navigate to the Notion page where you want to embed your HTML. Type /code to insert a code block. This is the same block you'd normally use to display snippets of code - but here, we're going to use it in a slightly different way.

Paste your HTML code directly into the code block. Don't worry about selecting a specific language - just drop your HTML in there.

Step 2: Open the Caption

Once your HTML is in the code block, click on the Caption option that appears beneath it. This is the small text field that normally lets you add a description or label to a code block.

Step 3: Add the Magic Caption - `bullet:HTML`

Here's the key step that makes everything work. In the caption field, type exactly:

bullet:HTML

That's it! This caption tells Bullet, "Hey, don't display this as a regular code block - render it as real HTML on the webpage." Bullet will automatically pick up any code block with this caption and embed it as live HTML in the corresponding section of your published page.

Going Further: Dynamic HTML with Merge Tags

Here's where things get genuinely powerful. Bullet's HTML embedding doesn't just render static code - it supports merge tags, which are dynamic placeholders that pull in live data from your Notion page properties.

Take this example from Bullet's own documentation. If you use the https://assets.bullet.site/files?id=330206a2-d525-8005-a03f-e72afef62dca&url=attachment:1890d801-b5f1-46e7-8e1e-003f088450f2:EMBED_HTML_IN_NOTION.png tag inside an <img> element like this:

html

Bullet automatically replaces https://assets.bullet.site/files?id=330206a2-d525-8005-a03f-e72afef62dca&url=attachment:1890d801-b5f1-46e7-8e1e-003f088450f2:EMBED_HTML_IN_NOTION.png with the actual cover image from that specific Notion page. No hardcoding required.

This matters a lot if you're building something like:

A blog where each post has its own cover, title, and author that you want in a custom layout

A portfolio where project properties like tech stack or client name appear in styled badges

A docs site where page metadata renders in a custom header

Your HTML adapts to each page's content automatically — write the template once, and it works everywhere.

Things to Keep in Mind about embedding HTML inside the Notion

A few helpful tips as you start experimenting:

The caption is case-sensitive. Make sure you type "bullet:HTML" exactly as shown - no extra spaces, no different capitalization.

Your HTML renders in place. The code block (and its embedded HTML) will appear in the exact spot on the page where you placed it in Notion. So if you want your form at the bottom of a page, put the code block at the bottom in Notion.

You can combine HTML with regular Notion blocks. There's no need to build your entire page in HTML. Mix and match — use Notion's native blocks for the bulk of your content and drop in an HTML code block only where you need something custom.

Test after publishing. Notion's editor won't render the HTML — it'll still look like a plain code block inside Notion itself. You'll see the magic only once the page is published and viewed on your Bullet website.

Quick Recap

Here's the whole process in a nutshell:

Add a Code block in Notion and paste your HTML into it

Click "Caption” on the code block

Type bullet:HTML as the caption

Publish your page via Bullet

Visit your website - your HTML is now live! 🎉

Wrapping Up

The ability to embed HTML directly inside Notion is one of those features that might seem small at first but opens up a ton of possibilities. Whether you're adding a simple signup form or building out a fully custom layout with dynamic merge tags, Bullet makes the whole process surprisingly painless.

Give it a try on your next Notion page - once you start using custom HTML embeds, you'll wonder how you ever managed without them!

9 Elementor Alternatives in 2026 for Non-Developers (Ranked & Reviewed)

Nagarathinammal