Sign Up

Updated: May 14, 2026

Using HTML in the Website Builder

Article Contents

Notice: This article covers the Website Builder, which is continuously evolving based on customer feedback. Some details shown here may differ from what you see in-app.

The Website Builder supports custom HTML blocks, giving you the flexibility to embed interactive content, third-party widgets, and custom-styled components directly on your site. This article includes a video tutorial that walks you through how to create custom website components using AI in the Website Builder, plus covers how HTML blocks work, what's supported, and what to keep in mind when working with custom code.

Watch and learn: How to create custom website components with AI

Disclaimer: The beehiiv platform has evolved since this video was recorded, so parts of the interface will look slightly different from what you see in your account.

Things you can do with HTML blocks

HTML blocks in the Website Builder let you go beyond the built-in elements to add truly custom experiences to your site. Some popular use cases include:

  • Embedding third-party widgets like social proof tools, social posts, or video players.
  • Adding a stock ticker or live data feed.
  • Creating custom-styled sections with Tailwind CSS classes.
  • Embedding iFrames from external sources.

Be sure to check out Very Good Components for inspiration on what’s possible with HTML in the beehiiv Website Builder. 

Tech Note: Embedded subscribe forms are for external sites only and cannot be used in HTML blocks in the Website Builder. To add a subscribe form to your site, use the native subscribe form block instead. No code required.

What's supported in an HTML block

FeatureSupportedNotes
iFrames✓Fully supported
<video> tag✓Fully supported
Custom Tailwind CSS✓Scoped to your HTML block
Interactive widgets (ticker tape, Senja, X posts, YouTube)✓Test in Preview to confirm behavior
<!DOCTYPE>, <html>, <head>, <body> tags✗Full document structure not allowed
Global CSS resets (*, body, html)✗May break page layout
Viewport-controlling styles (100vh, position: fixed)✗May conflict with page structure
Tech Note: Because custom HTML allows you to import content created outside of the beehiiv ecosystem, beehiiv cannot guarantee that it will function or appear as expected. Always test your HTML in preview before publishing.

Adding an HTML block to your site

  1. From the left panel, go to Website > Builder. The Website Builder will open with your site on the canvas.
  2. Navigate to the page and section where you want to add your custom HTML.
  3. Click the + icon in the left panel to open the Elements modal. Under Advanced blocks, select HTML and drag it onto the canvas.

Using AI to configure the HTML

  1. With the HTML block selected on the canvas, click on Configure in the right design panel to open the code editor.

  2. The HTML modal will open on the AI HTML Block option. Describe what you want to create on the right, and see the preview on the left. 


    The AI will ask you questions to ensure you get exactly what you want. As you chat, you’ll be switched over to the Code tab, where your custom code will populate. 

  3. Return to the preview tab to see your new custom code creation in action. If you like what you see, click on Save to return to your canvas, or continue chatting until satisfied. 


    To start over, simply click on Reset. 


    For more on using the AI in the website builder as well as info on the AI credits included with your beehiiv plan, read Using AI chat to build your website.

Using your own HTML code

  1. If you prefer to code manually, click into the Code tab. Enter your code, and when it’s as you prefer, return to the Preview tab to test how your code renders. 

  2. Once you’re happy with your code snippet, click on Save to return to your canvas. 
Pro Tip: Always use Preview mode to test your HTML before publishing. Interactive elements do not execute inside the editor itself — only in Preview and Live mode. For more details on using the Website Builder, see Customizing your site in the Website Builder.

Structural requirements to consider

HTML blocks are not full web pages — they are fragments injected into an existing page. Keep the following requirements in mind when writing your code.

Use a single container div

Your HTML must begin with a single container <div> that wraps all of your content and styles. This keeps your code scoped and prevents it from affecting other elements on the page.

No full document structure

Do not include <!DOCTYPE>, <html>, <head>, or <body> tags. These are already part of the page your HTML block lives within, and including them will cause rendering issues.

Avoid global CSS resets

Styles that target *, body, or html can override the rest of your site's design. Always scope your styles to your container class to avoid unintended side effects. Similarly, avoid viewport-controlling styles like 100vh or position: fixed, as these may conflict with the overall page structure.

Adding stylesheets

The HTML block does not support a <head> tag, so you cannot link external stylesheets using the standard document <head> approach. As a workaround, you can add <link> tags directly inside your HTML block.

Character and size limits

The editor has a 50,000 character limit, which applies to the total content in the editor — not to individual HTML blocks. Very large HTML blocks may also experience rendering issues independently of this limit.

Pro Tip: If you're working with a large or complex HTML embed, try splitting it across multiple HTML blocks on your page. This can help avoid rendering issues and makes your code easier to manage.

Frequently asked questions about HTML blocks in the Website Builder

    Can I use iFrames in the Website Builder?
    Yes. iFrames are fully supported in HTML blocks in the Website Builder. Note that iFrame behavior differs from the legacy builder. If you're migrating from a legacy site, be sure to test your iFrame embeds in Preview before publishing.
    My styles are affecting other parts of the page. How do I fix this?
    Scope all of your styles to a unique class on your container <div> and avoid global CSS selectors like *, body, or p to keep your styles contained to your HTML block only.
    How do I add an external stylesheet?
    You can include a <link> tag directly inside your HTML block to add an external stylesheet. You don't need to place it inside a <head> tag. The browser will process it regardless of its position in the block.
    Can I use Tailwind CSS in HTML blocks?
    Yes, custom Tailwind CSS is supported in HTML blocks in the Website Builder.
    My HTML block looks broken in the editor, how do I fix it?
    If your HTML block includes interactive elements, it may not render fully in the editor. This is expected behavior. Switch to Preview to see how your block will look and behave on the live site.

Was this article helpful?

Related Articles

Using HTML in the Website Builder | beehiiv Help