@rozie-ui/rete-vue

@rozie-ui/rete-vue

Idiomatic vue FlowCanvas — a cross-framework node-based flow / graph editor compiled from one Rozie source wrapping Rete.js v2. It follows the controlled-graph model: you bind ONE two-way graph object as the single source of truth and declare node TYPE templates with <NodeType> / <Port> children (render-by-type). The engine owns pan / zoom / drag / drag-to-connect, and the canvas writes layout (x/y on drag) and connections (on connect / disconnect) back through the model, so you never hand-reconcile. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/rete-vue

Peer dependencies: the Rete engine (rete + rete-area-plugin + rete-connection-plugin + rete-render-utils, all ^2) + vue. Install them alongside this package.

Also installed: @rozie/runtime-vue — Rozie's small, tree-shaken runtime helper package (controllable state, keyboard navigation, event modifiers, and safe interpolation). It arrives as a regular dependency, so npm pulls it for you. Your bundler keeps only the helpers this component actually uses — typically a few hundred bytes to a few KB, minified and gzipped. What's in it and what it costs.

Rete ships no stylesheet — all node / socket / connection chrome is styled by this component, so there is no engine CSS to import.

Usage

<script setup lang="ts">
import { ref } from 'vue';
import FlowCanvas, { NodeType, Port } from '@rozie-ui/rete-vue';

const graph = ref({
  nodes: [
    { id: 'a', type: 'source', x: 0,   y: 0,  data: { label: 'Source' } },
    { id: 'b', type: 'merge',  x: 280, y: 60, data: { label: 'Merge' } },
  ],
  connections: [{ source: 'a', sourceOutput: 'num', target: 'b', targetInput: 'num' }],
});
const zoom = ref(1);
</script>

<template>
  <div style="height: 400px">
    <FlowCanvas
      v-model:graph="graph"
      v-model:zoom="zoom"
      @connection-created="(c) => console.log('connected', c)"
      @node-moved="(e) => console.log('moved', e)"
    >
      <NodeType type="source">
        <template #body="{ node }">{{ node.data.label }}</template>
        <Port output="num" type="number" />
      </NodeType>
      <NodeType type="merge">
        <template #body="{ node }">{{ node.data.label }}</template>
        <Port input="num" type="number" multiple />
      </NodeType>
    </FlowCanvas>
  </div>
</template>

Theming

Every visual value the canvas renders is a --rozie-flow-* CSS custom property with a built-in inline var(token, fallback) default — it looks right zero-config and re-skins by overriding a token at any ancestor scope. Overriding just --rozie-flow-accent recolors every selected/active affordance at once: the selected-node border + ring, socket hover, the selected-edge stroke, the active control button, the marquee box, and the minimap selection.

Dark mode is a zero-import, OS-driven default — the component ships an @media (prefers-color-scheme: dark) block that applies when the OS requests dark. An app that explicitly opts into light at the document root (a .light class or [data-theme="light"]) keeps control: the OS-dark default stands down and the light render applies instead. On the Lit build specifically, the canvas lives inside a shadow root, where a document-root ancestor selector cannot be observed, so the light opt-out above is not honored there — Lit keeps following the OS scheme regardless. Lit consumers who need app-controlled theming should use the .dark / [data-theme="dark"] class strategy below instead, since custom properties inherit across the shadow boundary. Ready-made design-system bridges ship in the package:

import '@rozie-ui/rete-vue/themes/shadcn.css';    // or material.css, bootstrap.css, base.css

The full token vocabulary — plus the .dark / [data-theme="dark"] class strategy for apps that toggle theme by a root class — lives in @rozie-ui/rete-vue/themes/base.css.

Dragging a connection from a typed port dims type-mismatched target sockets on other nodes for the duration of the gesture. That hint is resolved from port types only — it never invokes the canConnect prop, which still runs once, as the override, at actual connection time.

Props

Events

Imperative handle

Beyond props, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

<script setup>
import { ref } from 'vue';
const flow = ref();         // template ref
</script>

<template>
  <FlowCanvas ref="flow" />
  <button @click="flow.zoomToFit()">Fit</button>
</template>

Slots