Palette
Info

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.

### GoJS Features in this sample

#### Palette

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.

Related samples

#### HTML Interaction

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.

Related samples

#### Data Inspector

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.

Related samples

#### GoJS on Different Platforms

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:

- React: We provide a React Component as an NPM package and a usage sample. See the intro page Using GoJS with React for more information on React integration.
- Angular: We provide an Angular Component as an NPM package and a usage sample. See the intro page Using GoJS with Angular for more information on Angular integration.
- Vue: We provide a Vue.js Sample.

More information, including usage on frameworks including Electron, Blazor, and node.js, can be found at the GoJS Intro.

Related samples