Visual Editor
RuleGo-Editor is a visual rule chain editor built with LogicFlow (opens new window) + Element Plus + Vue 3, integrated into RuleGo-Server.
# Access
After starting RuleGo-Server, visit in your browser:
http://localhost:9090/editor/
Online demo:
- Editor: http://8.134.32.225:9090/editor/ (opens new window)
- UI Interface: http://8.134.32.225:9090/ui/ (opens new window)
Editor documentation: https://editor.rulego.cc/ (opens new window)
# Core Features
# Canvas Operations
- Drag to Add Nodes: Drag nodes from the left component panel onto the canvas
- Connections: Drag node anchors to create connection relationships
- Select/Multi-select: Box select or Ctrl+click to multi-select nodes
- Undo/Redo: Ctrl+Z / Ctrl+Y
- Copy/Paste: Ctrl+C / Ctrl+V
- Delete: Delete / Backspace
- Minimap: Thumbnail navigation in the bottom-right corner
- Fullscreen: Canvas fullscreen editing mode
# Node Types
| Type | Description |
|---|---|
| Start Node | Rule chain entry (auto-generated) |
| End Node | Rule chain exit |
| Process Node | Standard component node (filter, transformer, action, etc.) |
| Input Endpoint | Endpoint node (HTTP, MQTT, Kafka, Cron, etc.) |
| Sub Rule Chain | Reference to another rule chain |
| AI Agent | AI agent node |
| AI Orchestration | AI orchestration node |
| Group | Visual grouping |
| Comment | Comment node |
# Property Editing
Double-click a node or right-click and select "Properties" to open the property editing drawer:
- Basic Configuration: Node name, debug mode
- Component Configuration: Dynamically rendered forms based on component type, supporting:
- Text input, multi-line text
- Boolean toggle, slider, number input
- Dropdown select, date/time picker
- Array, Map, Struct editor
- Code editor (CodeMirror, supporting JS/Lua/SQL)
- Expression/condition editor
- JSON Schema editor
- Rule chain selector
- Connection Relationships: Configure output connection relationship types (True/False/Success/Failure, etc.)
# Connection Editing
Double-click a connection to edit the relationship type label; custom relationship names are supported.
# Canvas Status
The top-right corner of the editor displays the current canvas status:
- Editing: Normal editing mode
- Running: Rule chain is executing
- Disabled: Rule chain is disabled
# Rule Chain Management
Operate via the toolbar:
| Operation | Description |
|---|---|
| New | Create a new rule chain |
| Open | Search and open an existing rule chain |
| Save | Save the current rule chain (Ctrl+S) |
| Edit Info | Modify rule chain basic information, input Schema, variables |
| Run | Open the run dialog, configure input parameters and execute |
| Import/Export | Import and export rule chain JSON |
| Start/Stop | Deploy or stop a rule chain |
| Reset | Revert to the last saved version |
# Debugging Features
# Run Dialog
Click the [Run] button to open the run configuration:
- msgType: Message type
- Request Body: JSON or dynamic form based on inputSchema
- Metadata: key=value pairs
- Custom Headers: HTTP request headers
- Start Node: Execute from a specified node, or execute only a single node
- Execution Mode: Synchronous (execute) / Asynchronous (notify)
# Debug Console
The bottom panel displays real-time data flow:
- IN/OUT data for each node
- Node execution status (blue for processing, green for success, red for failure)
- Execution history playback
# Node Debug Data
Click a node to view the historical debug log panel.
For an illustrated guide, see Debugging Rule Chains.
# AI Features
The editor integrates an AI assistant panel (conversational creation/modification of rule chains), one-click AI generation, and AI Agent chat functionality. For details, see AI Features and AI Assistant Tutorial.
# Component Management
# Component Panel
A collapsible component panel on the left:
- Displays all available components in a categorized tree
- Supports enabling/disabling components
- Drag components onto the canvas to add nodes
# Component Marketplace
Browse and install online components with one-click install/uninstall.
# Embedded Integration
@rulego/editor is a Vue 3 library; the host application chooses an integration form as needed:
| Form | Components | TopBar | Multi-tab | Rule chain lifecycle | Use Case |
|---|---|---|---|---|---|
| A: Single-chain embedding | RuleGoShell + RuleGoEditor | Off | None | Managed by host | Host already has a shell (list page/sidebar/routing) and only needs a canvas |
| B: Workspace | RuleGoWorkspace mode:'app' | On | On | Managed by workspace | Standalone deployment / out-of-the-box IDE |
| B-lite: Single-chain workspace | RuleGoWorkspace with topbar/tabs off | Off | None | Managed by workspace | iframe embedding / shell-less host wanting single chain + dock panels |
# Form A: Single-Chain Embedding (Host-Managed)
The host loads the rule chain DSL, handles saving and navigation itself; the editor is used purely as a canvas:
<template>
<RuleGoShell :ctx="ctx" :capabilities="{ workspace: { topBar: false, tabs: false, explorer: false } }" :chain-info="chainInfo" :lf="lf">
<RuleGoEditor ref="editorRef" :data="dsl" :options="{ url, toolbar: { showSave: true } }" @saveOk="onSaved" />
</RuleGoShell>
</template>
<script setup>
import { RuleGoEditor, RuleGoShell, useSingleChainShell } from '@rulego/editor'
import '@rulego/editor/style.css'
const editorRef = ref()
const { ctx, lf } = useSingleChainShell(editorRef)
// Host loads the DSL itself: dsl.value = await fetchRuleChain(id)
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
# Form B: Workspace (Out-of-the-Box IDE)
One-line integration, with tab pool / resource tree / top bar / deployment / search / session restore built in:
<template>
<RuleGoWorkspace :options="options" />
</template>
<script setup>
import { RuleGoWorkspace } from '@rulego/editor'
import '@rulego/editor/style.css'
const options = {
mode: 'app',
url: 'http://127.0.0.1:9090', // Can be omitted for same-origin deployment
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
Capability switches (options.capabilities.workspace.*) can override at fine granularity: topBar, tabs, explorer, palette, runDebug, dock, chainSwitcher, globalSearch, drafts, sessionRestore, admin, etc. Form B-lite is achieved by turning off switches such as topBar/tabs.
# iframe Embedding (Zero Frontend Code)
The editor can be embedded into any host page (React / Angular / plain HTML, etc.) via iframe, passing parameters directly in src:
<iframe
src="http://your-server:9090/?mode=single&chainId=xxx&token=xxx"
style="width:100%;height:100vh;border:none"
></iframe>
2
3
4
| Parameter | Description |
|---|---|
mode=single | Switch to single-chain form (default app, full-featured workspace) |
chainId=xxx | Open the specified rule chain |
token=xxx | Authentication key, automatically sent as Authorization: Bearer header |
apiBase=xxx | Explicitly specify the backend address (required for cross-origin deployment, can be omitted for same-origin) |
For cross-origin deployment, the backend only needs CORS enabled (allow_cors = true, enabled by default), and must not set X-Frame-Options: DENY.
# Instance Methods (Invoked via ref)
RuleGoEditor (single canvas):
| Method / Property | Description |
|---|---|
render(data) | Render a rule chain (clear the canvas, reset undo) |
save() | Save the canvas (validation → diagnostic confirmation → call backend) |
getData() | Get the current canvas DSL |
openChain(idOrData) | Imperative open: pass an id to fetch from backend, pass DSL to render directly |
invokeAction(id, ...args) | Trigger a registered action (e.g. core:save / core:run) |
addAction() / removeAction() / listActions() | Custom action management |
isDirty | Whether the canvas has unsaved changes |
setLocales(locales) | Inject custom language packs |
reloadComponents() | Reload the component list |
RuleGoWorkspace (workspace): openChain(id), saveActive(), saveAll(), pool (tab pool), etc.
For the complete integration guide (capability switches, token injection, theme styles, export manifest), see rulego-editor/docs/guide.md (opens new window).