elyra/canvas

Elyra Canvas is an open-source library, which provides React objects that enable applications to quickly create a fully functional flow editor. Users can easily create and edit the flows of linked nodes by using the flow editor.

Elyra Canvas Modules

The elyra-ai/canvas repo contains three main modules: Common Canvas, Common Properties and Test Harness. For more details, see this documentation.

Elyra Canvas Components Overview

The Elyra Canvas package delivers two decoupled React objects: Common Canvas and Common Properties. For more details, see this documentation.

Try Elyra Canvas

The "Tiny App" is a demonstration application that is produced with only a few lines of code. You can use it to try these features of Elyra Canvas:

• Dragging a node
• Editing a comment (by double clicking on it)
• Dragging a node from the palette
• Clicking a button on the toolbar
• Zooming in and out using the scroll gesture

Getting started

Elyra Canvas requires react, react-dom, react-intl, and react-redux libraries to be installed. For versions requirements, see peerDependencies in package.json.

To install @elyra/canvas in your project, run the following command using npm:

npm install @elyra/canvas --save-dev

For more details about installation and getting started in Elyra Canvas, check out:

• Elyra Canvas Initial Setup
• Getting started with Common Canvas
• Getting started with Common Properties

📖 Documentation

If you're looking for @elyra/canvas documentation, check out:

• Documentation
• Test Harness Playground