HtmlElement

The HtmlElement widget renders HTML elements with CxJS data binding support. The CxJS JSX runtime automatically converts all lowercase elements (like div, span, p) to HtmlElement instances with the corresponding tag property set.

You can also use HtmlElement directly when you need to specify the tag dynamically or prefer explicit syntax.

HTML elements can be freely mixed with CxJS widgets like TextField, allowing you to build forms and layouts that combine standard HTML with rich interactive components.

<div>
  <h4 class="font-bold text-2xl">Heading</h4>
  <p>Paragraph with some text.</p>
  <HtmlElement tag="span">Using HtmlElement directly</HtmlElement>
  <hr />
  <TextField value={m.name} label="Name" />
  <p text={tpl(m.name, "Hello, {0|Stranger}!")} />
</div>

export const model = {
  name: "World",
};

import { createModel } from "cx/data";
import { tpl } from "cx/ui";
import { HtmlElement, TextField } from "cx/widgets";

Key Features

• Lowercase JSX elements are automatically converted to HtmlElement by the JSX runtime
• All standard HTML attributes and events work as expected
• CxJS-specific attributes like visible, layout, controller are supported
• Use text prop with tpl() for data-bound text content
• Mix freely with CxJS widgets

Configuration