Skip to main content

HTML Code

The HTML Code element lets you add custom HTML directly to your page without any wrapper elements. HTML Code element renders exactly the code you write, giving you complete control over the HTML output.

Non-Container Element

This is a non-container element - it doesn't wrap your content in additional HTML and has no styling controls. It renders only the code you provide. Learn more about element types →

HTML Code Editor Interface​

Screenshot showing HTML Code element with code editor area and syntax highlighting

The HTML Code element provides a simple code editor where you can write any valid HTML. Under the hood, it uses the widely known Monaco Code Editor, which is also used by professional code editing tools like VS Code. This means you get autocomplete, validation, and even tools like Emmet that allow you to use shorthand syntax to write code faster.

Your code is rendered directly on the page with no modifications or wrapper elements added.

Common Use Cases​

Third-party widgets: Embed external services like maps, calendars, or social media feeds:

<!-- Google Maps embed -->
<iframe src="https://www.google.com/maps/embed?pb=..." 
        width="600" height="450" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy">
</iframe>

Custom JavaScript functionality: Add simple interactive features:

<!-- Simple scroll-to-top button -->
<button id="scroll-top" style="position: fixed; bottom: 20px; right: 20px;">
  ↑ Top
</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('scroll-top').onclick = function() {
    window.scrollTo({top: 0, behavior: 'smooth'});
  };
});
</script>

Security Considerations​

Validate external code: Be cautious when copying HTML from external sources. Ensure scripts and iframes come from trusted domains.

XSS prevention: Avoid using user-generated content directly in HTML Code elements without proper sanitization.

Script execution: JavaScript within HTML Code elements will execute on your page. Only use scripts from sources you trust.

Best Practices​

Valid HTML: Ensure your HTML is properly formatted and uses valid syntax to avoid rendering issues.

Responsive design: Consider how your custom HTML will display on different screen sizes.

Accessibility: Include proper ARIA labels, alt text, and semantic markup for screen readers.

Performance: Minimize external resources and optimize any included scripts or styles.

Limitations​

No styling controls: The HTML Code element has no built-in styling options. But you can create selectors to target the elements inside your code.

No responsive controls: Responsive behavior must be handled within your HTML/CSS code.

When to Use HTML Code​

Use HTML Code when you need:

  • Third-party widget integration
  • Add JavaScript for simple enhancements

Use other elements when you need:

  • Visual styling options
  • Content management through the builder interface

Next steps: