Customising Toolbar Widget

[nate-vukovich]

Introduction

Hi all.

I've been dabbling with jointjs-plus for a bit and I've been using it for a POC and I'm struggling to find a good solution to customise the widgets.

I would like to integrate with React - use the Toolbar widget but also add additional ( react-tabs example ) functionality to it.

Is there any documentation of achieving it? Or any docs how to create custom widgets with custom rendering?

Steps to reproduce

Any JointJS version in React.

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[MartinKanera]

Hi, thanks for the question!

JointJS+ widgets, such as Toolbar, are built using vanilla JavaScript and manipulate the DOM directly, which can make integration with React’s rendering model a bit tricky. That said, it’s possible to use them alongside React, and you can customize or extend existing widgets by extending the Widget class and supplying your own logic.

You can find examples of this approach in the KitchenSink application (e.g., the navigator toolbar) or in this demo:
🔗 https://codepen.io/jointjs/pen/abPjNdK/8e380bba4b4d1d63e1fac0562807c270

For full control over rendering, the most flexible solution is to build the toolbar entirely in React from scratch.

That said, we’ve just released a JointJS React Alpha:
🧪 #3010
We’re actively working on expanding JointJS+ to include official UI widgets built with React components in the future.