# HTML

Display HTML and CSS or embed an external HTTPS document.

URL: https://webrad.atentor.com/docs/html
Updated: 2026-11-07

WebHtml · Standard · Visual · 1 events

## Quick start

Add **Html1** in the Designer. Use the example in a page method.

```ts
Html1.title = 'Welcome information';
Html1.html = '<style>body { margin: 0; font-family: sans-serif; } article { padding: 16px; }</style>'
  + '<article><h2>Welcome</h2><p>Content with its own styling.</p></article>';
Html1.aspectRatio = '16:9';
Html1.onLoad = (sender) => { console.log(sender.title); };
// Html1.clear();
```

Inline HTML runs in an isolated document. Scripts are disabled and project styles do not cascade into it. A standalone external HTTPS iframe uses the remote embed mode.

## Configure HTML

1. Drag **HTML** from **Builder → Standard** onto the page or reusable component.
2. In **Content → HTML**, enter a fragment or a complete HTML document. The editor preserves line breaks and indentation.
3. Set **Accessibility → Title** to describe the embedded content.
4. Configure dimensions and **Size & position → Aspect ratio**. A fixed ratio derives height from width.

HTML elements are edited inside the markup, rather than as Designer child components. Outer styles apply to the frame. Declare fonts, colors, spacing, and CSS inside the embedded document.

## Inline content and external embeds

Inline markup supports HTML and CSS. Its sandbox disables scripts, inline JavaScript handlers, form submission, popups, and top navigation. Relative URLs follow the host URL; asset references inside the string are not automatically rewritten or included in exports.

For an external player, paste a single cross-origin HTTPS iframe into **HTML**, with only optional surrounding whitespace or comments. WebRAD uses it as the component frame, preserving the provider's origin and permitted script/media behavior. Configure the component's dimensions or aspect ratio in the Inspector. Mixed markup continues to use the inline sandbox.

External content requires network access and the provider's embedding permission. Serve the exported application over HTTP(S). Use **F9 Preview** to interact with it; Designer frames remain inert.

## Code and loading

- html reads or replaces the content. Assigning the same string preserves the current document.
- title changes the accessible name; clear() empties the content.
- **OnLoad** runs when the embedded document finishes loading. Events inside that document remain inside it.
- Runtime changes affect the current instance; edit the Inspector to save content in the project.

## More examples

External HTTPS iframe

```ts
Html1.title = 'Embedded video';
Html1.aspectRatio = '16:9';
Html1.html = '<iframe src="https://www.youtube.com/embed/VIDEO_ID"'
  + ' title="Video player" allow="autoplay; encrypted-media; picture-in-picture"'
  + ' referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>';
// Replace VIDEO_ID with a video that permits embedding.
```

## Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `x` — Left · Size & position | `number` | `0` | x |
| `y` — Top · Size & position | `number` | `0` | y |
| `width` — Width · Size & position | `number` | `320` | width |
| `height` — Height · Size & position — A fixed aspect ratio derives height from width. Choose none to edit the saved height rules. | `number` | `180` | height — Conditional availability in the Inspector |
| `itemWidth` — Responsive width · Responsive size — Fit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemHeight` — Responsive height · Responsive size — A fixed aspect ratio derives height from width. Choose none to edit the saved height rules. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration — Conditional availability in the Inspector |
| `itemMinWidth` — Minimum width · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxWidth` — Maximum width · Responsive size | `number` | `null` | Inspector / configuration |
| `itemMinHeight` — Minimum height · Responsive size — A fixed aspect ratio derives height from width. Choose none to edit the saved height rules. | `number` | `0` | Inspector / configuration — Conditional availability in the Inspector |
| `itemMaxHeight` — Maximum height · Responsive size — A fixed aspect ratio derives height from width. Choose none to edit the saved height rules. | `number` | `null` | Inspector / configuration — Conditional availability in the Inspector |
| `itemGrow` — Grow · Responsive size | `number` | `0` | Inspector / configuration |
| `itemShrink` — Shrink · Responsive size — Allows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed. | `boolean` | `true` | Inspector / configuration |
| `itemAlignSelf` — Item alignment · Responsive size — Cross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior. | `enum` — `auto` `start` `center` `end` `stretch` | `"auto"` | Inspector / configuration |
| `itemHorizontalAnchor` — Horizontal anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemVerticalAnchor` — Vertical anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemLeft` — Left inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemRight` — Right inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemTop` — Top inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemBottom` — Bottom inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `margin` — Margin · Spacing — Outer spacing on all four sides, in pixels. Row and column layouts include this spacing between components. | `number` | `0` | margin |
| `marginTop` — Margin top · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginTop |
| `marginRight` — Margin right · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginRight |
| `marginBottom` — Margin bottom · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginBottom |
| `marginLeft` — Margin left · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginLeft |
| `visible` — Visible · Behavior | `boolean` | `true` | visible |
| `collapseWhenHidden` — Collapse when hidden · Behavior — Removes the component from the layout while it is not visible. | `boolean` | `true` | collapseWhenHidden |
| `enabled` — Enabled · Behavior | `boolean` | `true` | enabled |
| `aspectRatio` — Aspect ratio · Size & position — none allows free dimensions. A fixed ratio derives height from the responsive width. | `enum` — `none` `1:1` `4:3` `3:4` `16:9` `9:16` | `"none"` | aspectRatio |
| `html` — HTML · Content — HTML and CSS, or a standalone HTTPS iframe embed. Inline markup scripts do not execute. | `string` | `"<p>HTML content</p>"` | html |
| `title` — Title · Accessibility — Accessible name of the embedded HTML document. | `string` | `"HTML content"` | title |
| `currentRowBindings` — Current row · Data — Bind writable visual values to fields of this repeated row. | `current-row-bindings` — Editor: current-row-bindings | `[]` | currentRowBindings |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `aspectRatio` — A fixed ratio derives height from width; none restores the saved height rules. | `get aspectRatio(): WebAspectRatio;` | Read and write |
| `html` — A fragment or complete HTML document, preserved exactly as authored. | `get html(): string;` | Read and write |
| `title` — Accessible name for the embedded document. | `get title(): string;` | Read and write |
| `enabled` | `get enabled(): boolean;` | Read and write |
| `onLoad` | `set onLoad(handler: WebComponentEventHandler<this> \| null);` | Read and write |

### `clear`

method

```ts
clear(): void;
```

Example

```ts
Html1.clear();
```

Inherited members (26)

| Member | Signature | Access |
| --- | --- | --- |
| `currentRowBindings` | `currentRowBindings: readonly WebCurrentRowBinding[];` | Read and write |
| `element` | `readonly element: TElement;` | Read-only |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |
| `visible` | `visible: boolean;` | Read and write |
| `collapseWhenHidden` | `collapseWhenHidden: boolean;` | Read and write |
| `x` | `x: number;` | Read and write |
| `y` | `y: number;` | Read and write |
| `width` | `width: number;` | Read and write |
| `height` | `height: number;` | Read and write |
| `margin` — Outer spacing on all four sides, in pixels. | `margin: number;` | Read and write |
| `marginTop` | `marginTop: number;` | Read and write |
| `marginRight` | `marginRight: number;` | Read and write |
| `marginBottom` | `marginBottom: number;` | Read and write |
| `marginLeft` | `marginLeft: number;` | Read and write |
| `alignSelf` | `alignSelf: RuntimeLayoutAlignSelf;` | Read and write |
| `tabIndex` | `tabIndex: number;` | Read and write |
| `backgroundColor` | `backgroundColor: string;` | Read and write |
| `color` | `color: string;` | Read and write |
| `borderColor` | `borderColor: string;` | Read and write |

### `focus`

method

```ts
focus(options?: FocusOptions): void;
```

### `show`

method

```ts
show(): void;
```

### `hide`

method

```ts
hide(): void;
```

### `bindEvent`

method

```ts
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;
```

### `emit`

method

```ts
emit(eventName: string, detail?: unknown): boolean;
```

### `dispose`

method

```ts
dispose(): void;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnLoad

Standard event (Event).

Signature and example

```ts
import type { WebHtml } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Html1Load(
    sender: WebHtml,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```