<HTMLHost />

Renders a graph element as an unstyled HTML node you fully control. Reach for this inside <Paper renderElement={...}> when you want plain DOM (a <div>, inputs, your own components) instead of SVG shapes, with no default theme.

All props are spread onto the inner <div> (children, style, className, event handlers, data-*, etc.), and a forwarded ref lands on that same inner <div> — so a parent can focus or measure the host directly. By default the host measures its content via useMeasureElement and syncs that size back to the graph element; set useModelGeometry to skip measurement and size the host from the element's model geometry instead.

Applies no default styling. For a ready-themed box driven by --jj-box-* CSS variables, use HTMLBox instead.

Example

import { Paper, HTMLHost } from '@joint/react';

// Render each element as your own HTML node and style it via CSS.
<Paper renderElement={({ label }) => (
  <HTMLHost className="my-node">{label}</HTMLHost>
)} />

Props

useModelGeometry?

readonly optional useModelGeometry?: boolean;

Skip measuring the rendered content and size the host from the graph element's stored geometry instead. Cheaper, but the element no longer auto-resizes when the React subtree changes.

Default

false