This sample contains a draggable HTML element (using jQuery UI), which houses a GoJS Palette.
A DIV to the right of the diagram houses the GoJS Data inspector extension, which displays some editable information about each Node.
A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.
More information can be found in the GoJS Intro.
GoJS Diagrams can be used alongside other HTML elements in a webapp. For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the HTMLInfo class.
More information can be found in the GoJS Intro.
Using a premade GoJS extension, you can create an HTML-based inspector that displays and allows editing of data for the selected Part (if any), or for a particular JavaScript object, or for the shared Model.modelData object, which exists even if there are no nodes or links.
The inspector code lies in DataInspector.js and DataInspector.css. This code is meant to be a starting point for making your own model data inspector.
A generic demonstration of this extension can be found in the GoJS Intro.
GoJS is intended to run in any environment that executes JavaScript. This includes on browsers and within browser frameworks, and also in headless contexts such as Node.js.
We maintain examples for common frameworks:
More information, including usage on frameworks including Electron, Blazor, and node.js, can be found at the GoJS Intro.