Custom Code Element

The Custom Code element enables advanced users to inject raw HTML, CSS, and JavaScript directly into the canvas for unique integrations and scripts.

Live Preview

Preview how your custom code snippets render on the canvas below.

Custom Code Preview

Specifications

The Custom Code element provides an escape hatch for deep integrations:

  • Raw HTML: Inject any Valid HTML Markup, including external script tags or complex visual structures.
  • Custom CSS: Define Scoped Styles that target the HTML inside the element for unique visual effects.
  • JavaScript Execution: Include Scripts that run upon the element's mount, perfect for tracking widgets or interactive canvas logic.
  • Layout Integrity: Wraps the injected code in a controlled div to preserve the canvas structure.
  • Thematic Isolation: Allows for design behaviors that go beyond the built-in properties of other elements.

AI Guidance

How to prompt for Custom Code:

  • Add a custom code block with a widget script for a chat service.
  • Create a section using raw HTML that shows a moving SVG background.
  • Insert custom CSS to style all text inside this container with a unique gradient.