# @projectstorm/react-canvas-core

Latest version **7.0.3** (published 2024-02-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @projectstorm/react-canvas-core
pnpm add @projectstorm/react-canvas-core
yarn add @projectstorm/react-canvas-core
bun add @projectstorm/react-canvas-core
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.0.3 |
| Published | 2024-02-15 |
| First published | 2019-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 328.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dylanvorster |
| Maintainers | dylanvorster |
| Keywords | web, diagram, diagrams, react, typescript, flowchart, simple, links, nodes |

## Links

- npm: https://www.npmjs.com/package/@projectstorm/react-canvas-core
- Repository: https://github.com/projectstorm/react-diagrams
- Homepage: https://github.com/projectstorm/react-diagrams#readme
- Issues: https://github.com/projectstorm/react-diagrams/issues
- npm.io page: https://npm.io/package/@projectstorm/react-canvas-core

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^18.2.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.11.0
- [@projectstorm/geometry](https://npm.io/package/@projectstorm/geometry.md) 7.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 7.0.3 (latest) — 2024-02-15
- 6.7.2-alpha.0 (next) — 2022-06-03
- 7.0.2 — 2023-09-23
- 7.0.1 — 2023-03-05
- 7.0.0 — 2023-01-24
- 6.7.4 — 2022-06-03
- 6.7.0 — 2022-02-07
- 6.6.1 — 2021-08-10
- 6.6.0 — 2021-07-11
- 6.5.2 — 2021-04-14
- 6.5.1 — 2021-04-12
- 6.5.0 — 2021-03-20
- 6.4.2 — 2021-03-14
- 6.4.1 — 2021-03-13
- 6.3.0 — 2020-12-03
- … 13 more at https://npm.io/package/@projectstorm/react-canvas-core/versions

## README

# Introduction

[![Join the chat at https://gitter.im/projectstorm/react-diagrams](https://badges.gitter.im/projectstorm/react-diagrams.svg)](https://gitter.im/projectstorm/react-diagrams?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![NPM](https://img.shields.io/npm/v/@projectstorm/react-diagrams.svg)](https://npmjs.org/package/@projectstorm/react-diagrams) [![Package Quality](https://npm.packagequality.com/shield/storm-react-diagrams.svg)](https://packagequality.com/#?package=storm-react-diagrams)

![](.gitbook/assets/logo.jpg)

**DEMO**: [http://projectstorm.cloud/react-diagrams](http://projectstorm.cloud/react-diagrams)

**DOCS \(wip\)** [https://projectstorm.gitbook.io/react-diagrams](https://projectstorm.gitbook.io/react-diagrams)

Docs are currently being worked on, along with a migration path.

## What

A flow & process orientated diagramming library inspired by **Blender**, **Labview** and **Unreal engine**.

* **Modern Codebase** written entirely in Typescript and React, the library makes use of powerful generics, advanced software engineering principles and is broken up into multiple modules.
* **Hackable and extensible** the entire library including its core can be extended, rewired and re-assembled into fundamentally different software to suit your own software needs.
* **HTML nodes as a first class citizen** the library was originally written to represent advanced dynamic nodes, that are difficult to represent as SVG's due to complex input requirements ux requirements.
* **Designed for process** the library is aimed for software engineers that want to rewire their programs at runtime, and that want to make their software more dynamic.
* **Fast diagram editing** the defaults provided give the highest priority to editing diagrams as fast as possible.

## Gallery

Example implementation using custom models: \(Dylan's personal code\)

![Personal Project](.gitbook/assets/example1.jpg)
![](.gitbook/assets/example2.jpg)

Get started with the default models right out of the box:

![](.gitbook/assets/example3.jpg)

## Installing

For all the bells and whistles:

```text
yarn add @projectstorm/react-diagrams
```

This includes all the packages listed below \(and works \(mostly and conceptually\) like it used to in version 5.0\)

### A more modular approach

This library now has a more modular design and you can import just the core \(contains no default factories or routing\)

```text
yarn add @projectstorm/react-diagrams-core
```

this is built ontop of the evolving **react-canvas-core** library

```text
yarn add @projectstorm/react-canvas-core
```

which makes use of

```text
yarn add @projectstorm/geometry
```

and of course, you can add some extras:

```text
yarn add @projectstorm/react-diagrams-defaults
yarn add @projectstorm/react-diagrams-routing
```

## How to use

Before running any of the examples, please run `pnpm build` in the root. This project is a monorepo, and the packages (including the demos) require the packages to first be built.


Take a look at the [diagram demos](https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-gallery/demos)

**or**

Take a look at the [demo project](https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-project) which contains an example for ES6 as well as Typescript

**or**

[Checkout the docs](https://projectstorm.gitbook.io/react-diagrams/)

## Run the demos

After running `pnpm install` and `pnpm build`, you must then run: `cd diagrams-demo-gallery && pnpm run start`

## Building from source

Simply run `pnpm` then `pnpm build` or `pnpm build:prod` in the root directory and it will spit out the transpiled code and typescript definitions into the dist directory as a single file.

## Built with react-diagrams

> Do you have an interesting project built with *react-diagrams*? PR it into this section for others to see.

---
_Source: https://npm.io/package/@projectstorm/react-canvas-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._