HTML

Display HTML and CSS or embed an external HTTPS document.

Quick start

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

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();

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

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.

API in code

clear(): void;

Html1.clear();

focus(options?: FocusOptions): void;

show(): void;

hide(): void;

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

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

dispose(): void;

Events

Link methods in Interaction. How to use events.

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);
  }
}