https://github.com/newcat/baklavajs

Graph / node editor in the browser using VueJS
https://github.com/newcat/baklavajs

dataflow dataflow-programming editor flow flow-based-programming flow-control graph node node-editor vuejs

Last synced: about 19 hours ago
JSON representation

Graph / node editor in the browser using VueJS

• Host: GitHub
• URL: https://github.com/newcat/baklavajs
• Owner: newcat
• License: mit
• Created: 2018-12-01T17:27:16.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2025-02-12T04:24:26.000Z (2 months ago)
• Last Synced: 2025-04-25T22:46:29.914Z (2 days ago)
• Topics: dataflow, dataflow-programming, editor, flow, flow-based-programming, flow-control, graph, node, node-editor, vuejs
• Language: TypeScript
• Homepage: http://baklava.tech
• Size: 11.2 MB
• Stars: 1,749
• Watchers: 29
• Forks: 125
• Open Issues: 57
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-node-based-uis - baklavajs - Graph/node editor for VueJs (Javascript Libraries / Renderers)
• awesome - newcat/baklavajs - Graph / node editor in the browser using VueJS (TypeScript)
• awesome - newcat/baklavajs - Graph / node editor in the browser using VueJS (TypeScript)
• awesome-ccamel - newcat/baklavajs - Graph / node editor in the browser using VueJS (TypeScript)

README

        
# BaklavaJS

![build-status](https://github.com/newcat/baklavajs/actions/workflows/build.yml/badge.svg)

![npm](https://img.shields.io/npm/v/baklavajs.svg)

Graph / node editor in the browser using VueJS

**[Online Demo](https://codesandbox.io/s/baklavajs-v2-example-zpfkec?file=/src/App.vue)**

![example](docs/example.png)

| Package                    | Version                                                                                        |

| -------------------------- | ---------------------------------------------------------------------------------------------- |

| baklavajs                  | ![npm](https://img.shields.io/npm/v/baklavajs.svg?style=flat-square)                           |

| @baklavajs/core            | ![npm (scoped)](https://img.shields.io/npm/v/@baklavajs/core.svg?style=flat-square)            |

| @baklavajs/engine          | ![npm (scoped)](https://img.shields.io/npm/v/@baklavajs/engine.svg?style=flat-square)          |

| @baklavajs/interface-types | ![npm (scoped)](https://img.shields.io/npm/v/@baklavajs/interface-types.svg?style=flat-square) |

| @baklavajs/renderer-vue    | ![npm (scoped)](https://img.shields.io/npm/v/@baklavajs/renderer-vue.svg?style=flat-square)    |

| @baklavajs/themes          | ![npm (scoped)](https://img.shields.io/npm/v/@baklavajs/themes.svg?style=flat-square)          |

## Introduction

BaklavaJS is a graph/node editor for the web. It provides an easy-to-use editor together with the ability to create custom nodes. Aditionally, it puts a strong emphasis on extensibility, which leads to a versatile plugin system.

To guarantee type safety, the entirety of the BaklavaJS ecosystem is written in TypeScript.

The core functionality is shipped in the `@baklavajs/core` package. Any other functionality can be added a-la-carte by installing the desired plugins:

-   **Engine**: Provides functions to run calculations with the graph.

-   **Interface Types**: Adds types to node interfaces and allowing connections only between types that you want to. It can also automatically convert values from one type to another.

-   **Vue Renderer**: Displays the editor in the browser using VueJS

-   **Themes**: A collection of pre-built themes for BaklavaJS

There is also the `baklavajs` package, which contains the core package as well as all plugins.

## Getting Started & Documentation

You can find the documentation here: https://baklava.tech

## BaklavaJS v1

The old version of BaklavaJS can be found here: https://github.com/newcat/baklavajs/tree/v1

## Sponsors

### Top Sponsors

ThePixelDeveloper ·

Reece Dunham ·

Adrian Rudnik ·

Chris Bolton ·

LittleMouseGames ·

Andrei Bosco B. Torres ·

eviltik

### Gold Sponsors

Tiger Tang

### Sponsors

John Nunley