Optional ReadonlyanchorNamespace used to resolve element anchor names.
Optional ReadonlybackgroundPaper background color, image, or pattern. Pass an object such as
{ color: 'lightblue', image: '/bg.png', repeat: 'flip-xy' }.
Optional ReadonlycellNamespace of cell-view constructors used to resolve a cell's view by type.
Optional ReadonlycellPredicate deciding whether a cell should be rendered. Receives
{ model, isMounted, paper, graph }; return false to hide the cell.
Native positional form is reachable via the options escape hatch.
Optional ReadonlyclassCSS classes applied to the paper host element. Combine with width / height rules to size the paper.
Optional ReadonlyclickMaximum pointer travel (in px) still treated as a click rather than a drag.
Moving farther than this between press and release suppresses the
pointerclick event.
Optional ReadonlyconnectionNamespace used to resolve connection point names.
Optional ReadonlyconnectionDecides how the end JSON is stored when the user drops a link end.
{ end, model, magnet, dropPoint, endType, link, paper, graph }
and returns the modified EndJSON.pin preset and/or customize callback.Options for the connectionStrategy prop of <Paper>: pick how a dropped link
end is pinned and, optionally, post-process the resulting end definition.
Optional Readonlycustomize?: ConnectionStrategyRuns after pinning; receives the already-pinned end (or the original when pin is 'none') and returns the final end definition.
Optional Readonlypin?: ConnectionStrategyPinHow to anchor the dropped end, see ConnectionStrategyPin.
Optional ReadonlyconnectorNamespace used to resolve connector names referenced by links.
Optional ReadonlydefaultDefines the link created when the user starts dragging from a port or element.
Can be a factory function receiving connection context, a static LinkRecord,
or a dia.Link instance.
Optional ReadonlydrawDraws a grid pattern on the paper background. Pass true for the default
grid or an object to style it (e.g. { color: 'red', thickness: 2 }).
Optional ReadonlydrawSpacing of the rendered grid lines in px. Falls back to gridSize when not
set.
Optional ReadonlyembeddingEnables embedding: dropping an element onto another re-parents it (the
child then moves with its parent). Pair with the validateEmbedding prop to
control which parents are allowed.
Optional ReadonlyfrontWhen embedding, only the frontmost element under the pointer is considered a parent; otherwise candidates are tested front-to-back.
Optional ReadonlygridGrid step in px that element positions snap to while dragging.
Optional ReadonlyhighlighterNamespace used to resolve highlighter names referenced by highlighting.
Optional ReadonlyhighlightingHighlighter definitions keyed by highlight type (connecting, embedding, magnet/element availability). Override to restyle these visual cues.
Optional ReadonlyidUnique identifier used by joint-react to track the paper instance.
Optional ReadonlyinteractiveWhich pointer interactions are enabled on cells. Accepts a boolean to toggle
everything, an InteractivityOptions object for granular control per
interaction kind, or a CellInteractivity callback returning either
form per cell. The native (cellView, event) callback is reachable via the
options escape hatch.
Optional ReadonlylabelsRenders link labels into a dedicated top layer (so they are not occluded by
later cells). Pass true, or a layer name to target a specific layer.
Optional ReadonlylayerNamespace of layer-view constructors used to resolve custom paper layers.
Optional ReadonlylinkNamespace used to resolve link anchor names.
Optional ReadonlylinkAllows dropping a link end on blank paper, pinning it to a fixed point instead of requiring an element/port.
Optional ReadonlylinkBundle of link routing defaults (router, connector, anchor, connection point). Use a preset (linkRoutingStraight, linkRoutingOrthogonal, linkRoutingSmooth) or pass a custom object of the same shape.
defaultLinkAnchor is reachable via the options escape hatch.
Values inside options override matching keys here.
Optional ReadonlymagnetPointer travel (in px) before a link is created from a magnet, or
'onleave' to create it once the pointer leaves the magnet.
Optional ReadonlymarkHighlights valid drop targets (magnets and elements) while a link is being dragged.
Optional ReadonlymovePointer travel (in px) required before pointermove events start firing.
Optional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyonOptional ReadonlyoptionsRaw dia.Paper.Options passthrough for anything joint-react doesn't
expose as a dedicated prop (e.g. allowLink, validateMagnet,
restrictTranslate, onViewPostponed).
Values set here override top-level props of the same name, treat this
as the authoritative form for users who need direct access to the raw
JointJS API. Avoid overriding joint-react-controlled options
(async, sorting, viewManagement, frozen, autoFreeze), the
portal rendering depends on their set values.
Optional ReadonlyoverflowLets cell content spill outside the paper viewport instead of being clipped.
Optional ReadonlypaperPre-created paper instance to adopt. When provided, the Paper component wraps this paper instead of creating a new one. The paper's DOM is assumed to be managed externally (e.g. by a stencil).
PaperView is an internally-managed instance, not a public, importable type;
you normally receive it from another joint-react construct (such as a stencil)
rather than constructing it yourself.
Optional ReadonlyportalPaper-level override for the React portal target selector.
By default, each cell uses its own portalSelector field.
ElementModel renders into its '__portal__' group, LinkModel into its
root <g>. Built-in JointJS shapes have no portalSelector field and
are skipped. Set this prop to force a single selector or a dynamic one
across all cells.
A function receives { model, paper, graph } and may return:
Element, use that DOM node directly,null, skip rendering for this cell,undefined (or no return), fall back to the cell's own portalSelector.Optional ReadonlypreventSuppresses the browser context menu over the paper so contextmenu events
can drive your own UI.
Optional ReadonlypreventPrevents the browser default action on blank-area pointer events.
Optional ReadonlypreventPrevents the browser default action on cell pointer events.
Optional ReadonlyrenderRenders each element from its data slice.
Note: JointJS works with SVG by default, so renderElement is appended inside an SVG node.
To render HTML elements, use the experimental useHTMLOverlay prop or an SVG foreignObject.
Receives the element's data slice only. Derive its type from your cells
with InferElement<typeof cells>['data'].
Optional Readonly ExperimentalrenderRenders each link's content from its data slice. Re-runs when the link's
data changes.
Note: JointJS works with SVG by default, so renderLink content is appended inside an SVG node.
To render HTML elements, use an SVG foreignObject.
Receives the link's data slice only. Derive its type from your cells with
InferLink<typeof cells>['data']. When you need the source, target, or id,
read them with useCell() from inside the renderer.
type LinkData = InferLink<typeof initialCells>['data']
function RenderLink(data: LinkData) {
return <text>{data.label}</text>;
}
Optional ReadonlyrouterNamespace used to resolve router names referenced by links.
Optional ReadonlysnapSnaps a dragged link label to the closest point on the link path.
Optional ReadonlysnapSnaps a dragged link end to nearby ports/elements. Pass { radius } to set
the snapping distance in px.
Optional ReadonlysnapAllows a link end to snap to its own source/target element.
Optional ReadonlystyleInline styles applied to the paper host element. Use style.width and
style.height (or CSS via className) to size the paper, Paper does
not expose dedicated width/height props.
Optional ReadonlytransformSets the paper's viewport transform via paper.matrix(...). Accepts
either a CSS transform string (e.g. 'scale(0.5)',
'translate(10px, 20px) rotate(15deg)') or a DOMMatrix. Useful for
zoom, minimap, and arbitrary viewport transforms.
Optional Readonly ExperimentaluseRenders elements as real HTML in an overlay instead of inside an SVG node.
By default renderElement output is mounted in SVG, so plain HTML needs a
foreignObject (or an HTMLBox); enable this to skip that wrapping.
Known issues with HTML element rendering — use at your own risk.
Optional ReadonlyvalidateValidates whether a connection between two elements/ports is allowed.
{ source, target, endType, paper, graph }.validate callback.When omitted, defaults to canConnect() (no self-loops, no link-to-link, no multi-links).
Options for the validateConnection prop of <Paper> — declarative rules
that toggle the common connection constraints (self-loops, link-to-link,
duplicate links, root connections) and optionally layer your own check on top.
Reach for this object instead of a ValidateConnection callback when the
built-in rules already cover what you need.
Optional ReadonlyallowLinkToLink?: booleanAllow links to start or end on another link, not just on elements.
Optional ReadonlyallowRootConnection?: boolean | "auto"Whether a link may attach to an element's root (its body) instead of a port or magnet.
true — always allow root connections.false — never allow them; require a port or magnet.'auto' — allow a root connection only when the element has no ports.Optional ReadonlyallowSelfLoops?: booleanAllow a cell to connect to itself.
Optional ReadonlylinkLimit?: "none" | "one-per-direction" | "one-per-pair"How many links may connect the same source+port and target+port. Matching is port/magnet aware, so links on different ports never collide.
'none' — no limit; any number of links, in either direction.'one-per-direction' — one link each way: a second A→B is blocked, but
the reverse B→A is allowed.'one-per-pair' — one link per element pair: A→B blocks both another
A→B and the reverse B→A.Optional Readonlyvalidate?: (context: ValidateConnectionParams) => booleanExtra check run only after every built-in rule passes; receives the same ValidateConnectionParams context as ValidateConnection.
Optional ReadonlyvalidateValidates whether an element can be embedded into another element.
Receives { child, parent, paper, graph }.
Optional ReadonlyvalidateValidates whether an element can be unembedded from its parent.
Receives { child, paper, graph }.
Props for Paper — the React-friendly surface over
dia.Paper.Options, plus joint-react extras such as custom cell rendering, a controlled viewporttransform, and portal targeting.Paper events are exposed directly as props (
onBlankContextMenu,onElementPointerClick,onLinkMouseEnter, …). Each handler receives a single params object, e.g.onBlankContextMenu={({ paper, event, x, y }) => …}.Handlers are always-latest: the paper subscribes once and each event reads the current handler, so inline arrows (
onBlankContextMenu={() => …}) are fine, nouseCallbackneeded and no re-subscription on render. For raw native event names or events without anon*form (render:done,cell:highlight, …), use the useOnPaperEvents hook.See
https://docs.jointjs.com/api/dia/Paper