Skip to main content

JSX Markers

The WebSpatial SDK can turn most ordinary HTML elements into spatialized HTML elements, but for performance, compatibility with the open-source ecosystem, and similar reasons, developers currently need to add special markers to these HTML elements in JSX code.

enable-xr​

This special marker turns an HTML element into a spatialized HTML element.

To remain compatible with third-party open-source libraries, the SDK supports three marking styles:

  1. Pass the enable-xr attribute as an HTML attribute on the element:
<div className="card" enable-xr></div>
  1. Add __enableXr__ to the element's className:
<div className="card __enableXr__"></div>
  1. Add enableXr: true in the element's inline style:
<div className="card" style={{ enableXr: true, marginTop: "10px" }}></div>
What this enables on <Model>

Using this marker on <Model> upgrades the element from the Web standard model element, which can only render a 3D model inside a flat canvas, into a static 3D container element that can render a 3D model in space.

enable-xr-monitor​

Adding this special marker to a parent element of a spatialized HTML element allows WebSpatial SDK to monitor changes to the content inside that parent. If those changes affect the size or X/Y layout position of the spatialized HTML element, the SDK can synchronize the updates to the spatialized HTML element in time.

function CardList() {
  const [showFirstCard, setShowFirstCard] = useState(true);

  const onClick = () => {
    setShowFirstCard(prevState => !prevState);
  };

  return (
    <div enable-xr-monitor>
      {showFirstCard && <div>first card</div>}
      <div enable-xr>second card</div>
      <button onClick={onClick}>toggle</button>
    </div>
  );
}