jsx()

function jsx(element): MarkupJSON;

Converts a JSX tree into static JointJS markup (dia.MarkupJSON), ready to assign as a cell's markup. Intrinsic SVG/HTML tags become markup nodes; function components are rendered once and their output is converted; fragments (and any non-string element type) are unwrapped so their children flow through without a wrapper node.

Text, number, boolean, and null children become text content; any other child type throws. This is a one-time, static conversion with no hooks, no state, and no React lifecycle, so author plain markup here rather than interactive components.

Parameters

Parameter	Type	Description
element	Element	The JSX tree to convert, typically authored inline as <g>…</g>.

Returns

MarkupJSON

The equivalent JointJS markup array.

Remarks

Two prop conventions are translated for you:

• className is emitted as the SVG class attribute.
• Any joint-* prop is lifted onto the markup node itself, e.g. joint-selector="body" sets the node's selector (the same selector names that useMarkup registers at runtime).

Example

import { jsx } from '@joint/react';

const markup = jsx(
  <g>
    <rect width={80} height={40} fill="white" stroke="black" />
    <text x={10} y={25}>Hello</text>
  </g>
);