Basic Components: HTML View
Embed HTML content within a container.
The HTML View is a component that allows you to embed arbitrary HTML content within a container, making it a valuable tool for displaying content from third-party APIs (e.g., product details from an e-commerce platform).
Platform Behavior
The way the content is rendered is determined by the user's platform:
- Native Application (iOS/Android): The provided HTML will be rendered using a webview, which is essentially an embedded web browser within the native application.
- PWA (Web Application): The HTML is added directly to the page's structure. For server-side rendered (SSR) applications, the HTML is pre-rendered on the server, allowing search engines like Google to index the content for improved SEO.
In all cases, any inline CSS provided with the HTML will be rendered. Otherwise, the content's appearance is determined by the device's default browser styling.
Available Properties
- HTML (Settings Panel): This property is where you enter or bind the HTML content that will be displayed on the screen.
Technical Implementation
The HTML View component uses different rendering approaches depending on the deployment context:
- Client-Side Rendering: When rendering in the browser, the component uses DOMPurify to sanitize HTML content, providing protection against cross-site scripting (XSS) attacks.
- Server-Side Rendering: When rendering on the server for SEO purposes, the component renders HTML directly without client-side sanitization, allowing search bots to index the pre-rendered content in the initial page response. Client-side XSS protection is maintained once the page hydrates in the browser.
Did this answer your question?
