Designful Launch editor

HTML Embed Elements

All Tags /ObjectsHTMLSecurity

Overview

HTML elements render custom HTML content above the canvas via an overlay. The editor provides APIs to edit HTML content, preview sanitized output, and toggle interaction mode.

API

editHTMLContent

editor.editHTMLContent(htmlId)
editor.editHTMLContent(htmlId, {
  htmlContent: '<div>Updated</div>',
  sanitize: true,
  historyLabel: 'Edit HTML content',
})
  • When htmlContent is provided, the editor sanitizes and saves the content immediately.
  • When htmlContent is omitted (browser mode), a built-in HTML editor dialog opens.

previewHTML

editor.previewHTML(htmlId)
editor.previewHTML(htmlId, { target: 'dialog' })
editor.previewHTML(htmlId, { target: 'none', csp: "default-src 'none'" })
  • Returns the sanitized HTML document string used for preview.
  • In browser mode, it opens a preview window or dialog (unless target: 'none').

toggleHTMLInteraction

editor.toggleHTMLInteraction(htmlId)
editor.toggleHTMLInteraction(htmlId, { value: true })
  • Toggles (or forces) the allowInteraction flag and records history.

Behavior

  • HTML content is sanitized before preview/rendering: scripts, forms, dangerous tags, and inline event handlers are removed.
  • External resources are blocked by default (only data:/blob: URLs are allowed for src/href).
  • Preview uses a CSP meta tag and a sandboxed iframe.
  • Updates are recorded in history and trigger a re-render of the HTML overlay.

Editor Dialog

  • Format runs a simple HTML formatter (DOMParser-based) and updates the editor.
  • Validate reports parse errors or unsafe markup removals.
  • Syntax highlight shows a read-only highlighted view of the current HTML.
  • Preview updates live using the sanitized output.

Interaction

  • Double-click a non-interactive HTML object to toggle interaction on.
  • When interaction is enabled, double-click inside the overlay to exit interaction mode.

Example

const html = editor.addHTML({
  htmlContent: '<div style="padding: 12px;">Hello</div>',
})

editor.editHTMLContent(html.id, {
  htmlContent: '<div><strong>Updated</strong></div>',
})

editor.previewHTML(html.id, { target: 'dialog' })
editor.toggleHTMLInteraction(html.id)