Features

Everything in this chapter is a feature you can add to a diagram. The core building blocks (elements, links, ports, events) ship with the free @joint/react. The editor conveniences (selection, undo and redo, palettes, minimaps) come from JointJS+ (@joint/react-plus) and are marked with a + badge in the sidebar.

If you are new here, Elements and Links are the natural starting points; most other pages build on them.

Elements

Learn how to define and render custom elements in @joint/react with the ElementRecord type, the HTMLHost and HTMLBox components, the useHTMLOverlay Paper prop, and raw SVG.

Links

Learn how to define and style links in @joint/react with link records, LinkStyle, labelMap, and renderLink.

Ports

Learn how to define declarative ports in @joint/react with portMap, portStyle, passive magnets, and port labels.

Event Handling

Learn how to respond to user interactions and graph changes in @joint/react with Paper event props, useOnPaperEvents, and useOnGraphEvents.

Interactivity

Control which interactions a @joint/react Paper allows with the interactive prop: read-only mode, per-interaction flags, and toggling interactivity dynamically at runtime.

Containers & Grouping

Learn how to group elements and links into parent-child hierarchies in @joint/react with parent, embeddingMode, and embedding callbacks.

Collapse & Expand

Learn how to build subtree collapse and expand behavior in @joint/react with graph state, cellVisibility, and inline node buttons.

The Diagram Component

The Diagram component is the JointJS+ root: a GraphProvider that also owns the diagram-level models (selection, undo/redo, clipboard, spatial index) and wires up the built-in interactions, each toggled by a single prop.

Zoom & Scroll

Wrap a Paper with PaperScroller from @joint/react-plus to add panning, zooming, sheets mode, and programmatic viewport control.

Selection

Add Selection to a Paper in @joint/react-plus to track selected cells, react to selection changes from React, and render custom React UI around the current selection.

Undo & Redo

Record and reverse graph edits with the Diagram history model, via useGraphHistory and useGraphHistoryStack from @joint/react-plus.

Overlays

Use Overlay and ElementOverlay from @joint/react-plus to render React content at paper coordinates or anchored to diagram elements.

Halo

Use Halo from @joint/react-plus to render a contextual ring of handles (rotate, remove, clone, fork, link, unlink) around the selected element.

Resize & Rotate

Mount FreeTransform from @joint/react-plus to give the selected element interactive resize and rotation handles.

Snap to Objects

Draw alignment guides while dragging with Snaplines from @joint/react-plus, tune the snap distance, and control which elements snap to which.

Element Palette

Build a custom React palette with the headless Stencil from @joint/react-plus and drag elements onto a Paper.

Minimap

Use Navigator from @joint/react-plus to add a minimap for a PaperScroller-backed paper.

Copy & Paste

Enable the clipboard on a @joint/react-plus Diagram for copy, cut, paste, paste-at-cursor, and keyboard shortcuts.

Custom Keyboard Shortcuts

Register custom keyboard shortcuts on a @joint/react-plus Diagram with the useOnKeyboardEvents hook.

Theming

Learn how to theme @joint/react or @joint/react-plus diagrams using vanilla CSS variables and classes or Tailwind CSS.

Automatic Layouts

Use JointJS automatic layouts in @joint/react. Run a layout once your elements are measured and it positions the graph, shown with the directed-graph layout.

Export & Import

2 items

Performance

Render large JointJS+ diagrams efficiently in @joint/react-plus with a quad-tree spatial index and virtual rendering.