Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 25 days 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 (almost 6 years ago)
Default Branch: master
Last Pushed: 2024-05-20T17:07:54.000Z (6 months ago)
Last Synced: 2024-05-20T20:36:26.078Z (6 months ago)
Topics: dataflow, dataflow-programming, editor, flow, flow-based-programming, flow-control, graph, node, node-editor, vuejs
Language: TypeScript
Homepage: http://baklava.tech
Size: 10.6 MB
Stars: 1,392
Watchers: 29
Forks: 106
Open Issues: 43
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://v2.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