ruleengine-editor 
Pipeline editor made in node graph written in Vue 3.0
Installation
npm install @ruleenginejs/editor @ruleenginejs/uiAdd Icons
npm install @vscode/codiconsIn your code
import "@vscode/codicons/dist/codicon.css"Usage
import { createApp } from 'vue'
import App from './App.vue'
import RuleEngineEditor from "@ruleenginejs/editor"
// Add css styles
import "@ruleenginejs/ui/dist/normalize.css"
import "@ruleenginejs/ui/dist/style.css"
import "@ruleenginejs/ui/dist/dark.theme.css"
import "@ruleenginejs/editor/dist/style.css"
const app = createApp(App)
app.use(RuleEngineEditor)
app.mount('#app')In your templates
<v-editor value="editor value..." />Example editor value
{
"title": "Title",
"description": "Description",
"steps": [
{
"id": 1,
"type": "start",
"connect": [
{
"stepId": 2,
"dstInPort": "port1"
}
],
"canvas": {
"position": [50, 50]
}
},
{
"id": 2,
"type": "single",
"name": "Example step",
"props": {
"a": 1,
"b": 2
},
"handlerFile": "./handler.js",
"ports": {
"in": ["port1"],
"out": ["port2"]
},
"connect": [
{
"stepId": 3
}
],
"canvas": {
"position": [150, 50],
"color": "#1795D4"
}
},
{
"id": 3,
"type": "end",
"canvas": {
"position": [600, 150]
}
}
]
}License
Licensed under the MIT License.