Iframe

The Iframe block embeds another web page — or a snippet of raw HTML — inside your app. You point it at a URL or paste HTML to embed, control what the embedded content can do through permission toggles, and react to messages the embedded page sends your app. Inline HTML embeds can additionally be made editable, turning the block into a live HTML editing surface.

Tip: When to use Iframe: Embed an external tool, dashboard, map or documentation page without leaving your app. Render raw HTML you already have (email preview, generated markup). Build a two-way integration with an embedded page via postMessage. For displaying a single image or video, use Image or Video blocks instead — they're lighter and not sandboxed.

Properties

Content — Source

Content — Sandbox Permissions (Attributes)

All permissions start off. Enable only what the embedded content requires.

Appearance

Events

Methods

Behavior & Gotchas

Warning: Many external sites block iframe embedding. If the target site sends an X-Frame-Options: DENY or a restrictive Content-Security-Policy, the browser refuses to embed it and the block shows a blank frame with no error. Test embedding before designing a flow around it.

Warning: Storage and Cookies is effectively always on. The sandbox attribute removes the storage restriction by default to allow basic page functionality. Toggling it off in the inspector restores the restriction but can break embedded pages that rely on cookies.

Note: ContentEditable only appears for inline HTML embeds. The option is hidden while a URL is set. The Get HTML Content method reads back the user's edits.

Examples

Code Editor

The Code Editor block provides a syntax-highlighted code editor for viewing or editing code and structured text in your app. It supports nine languages (JSON, JavaScript, TypeScript, Java, Python, Shell, SQL, Markdown, YAML), optional line numbers, light or dark theme, and an editable or read-only mode.

Tip: When to use: Show API responses, configuration, or logs with proper syntax highlighting (turn Editable off for a read-only viewer). Let users author a script, query, or JSON payload inside your app. Prefer a plain text area when the content isn't code.

Properties

Events

Exposed State

Examples

JSON Schema Editor

The JSON Schema Editor block gives your users a visual editor for building an object schema — they add, nest, reorder and configure fields in a tree view instead of writing JSON by hand. You seed it with a starting schema through the Input property, the user edits it on screen, and every edit updates the block's state and fires On Change so you can save the result. A freshly dropped block arrives pre-filled with a sample schema containing a single name text field.

Tip: When to use: Let end users define or edit a data structure — custom object fields, API payload shapes, form schemas — without writing JSON. Build admin screens where the schema authored here is saved and later drives another surface (e.g. a Form block bound to it). For collecting plain values rather than designing a schema, use a Form block instead.

Properties

Events

Exposed State

Behavior & Gotchas

Note: The Input binding seeds the editor; it doesn't override edits. If you bind Input to a data source value, the editor is populated on first load. But subsequent changes by the user are tracked in the block's state ({{ id.input }}), not written back to your data source. Save explicitly on On Change.

Examples

Related Blocks

Frequently Asked Questions

Why does my Iframe show "Refused to connect" instead of the page?

The most common cause is an X-Frame-Options or Content-Security-Policy: frame-ancestors header on the target site that blocks embedding in iframes. This is a browser security policy enforced on the embedded page, not a configuration in UnifyApps. You cannot override it in the Iframe block settings. Use srcDoc with inline HTML instead of src, or contact the target site's owner for an embeddable URL. Sites like Google, GitHub and most social platforms block iframe embedding.

How do I pass data from my page into the embedded Iframe and receive responses?

Use the Send Message method on the Iframe block to post a JavaScript object to the iframe's window. The embedded page receives it via a standard window.addEventListener('message', ...) handler. Conversely, when the embedded page calls window.parent.postMessage(data, '*'), the Iframe block fires its On Message Received event with the payload — use that event to update page variables or call automations in response.

Can I let users edit the Code Editor's content and save it?

Yes. Set the Editable property to true. The block exposes {{ id.value }} in state, which updates on every change (On Change event also fires). Bind a Save button to read {{ codeEditor1.value }} and pass it to your data source. To programmatically set content, bind the payload property to a string expression — note that once the user edits the content, changes to the payload binding do not overwrite what the user typed.

Does the JSON Schema Editor work as a form field I can bind to save the schema?

The JSON Schema Editor exposes the full schema object as {{ id.input }} in state, and fires On Change on every edit. You can read that state at any time — for example, on a Save button's On Click — and write it to your data source. To seed the editor with an existing schema, bind the Input property to that schema object. Note that binding changes do not override edits the user has already made in the current session — the user's edits always take precedence.