Multi-platform architecture

relation-graph separates a framework-independent TypeScript core from platform rendering and reactivity. React, Vue 2, Vue 3, Svelte, and HTML share data semantics, layouts, options, events, and instance APIs while integrating with their native UI model.

Architecture

graph TB
  Core[RelationGraphCore and model chain]
  Data[Data providers and immutable public views]
  Layouts[Tree / Center / Circle / Force / Fixed / Folder]
  Rendering[Render plans and commit protocol]

  Vue2[Vue 2 adapter]
  Vue3[Vue 3 adapter]
  React[React adapter]
  Svelte[Svelte adapter]
  HTML[HTML DOM/SVG/Canvas runtime]

  Core --> Data
  Core --> Layouts
  Core --> Rendering
  Rendering --> Vue2
  Rendering --> Vue3
  Rendering --> React
  Rendering --> Svelte
  Rendering --> HTML

The core owns graph data, indexes, interaction state, layout algorithms, coordinate transforms, performance policy, and API behavior. Platform code owns mounting and presenting committed state.

Packages

Platform	Package	Source	Build output
Vue 2	@relation-graph/vue2	packages/platforms/vue2	lib/vue2
Vue 3	@relation-graph/vue	packages/platforms/vue3	lib/vue3
React	@relation-graph/react	packages/platforms/react	lib/react
Svelte	@relation-graph/svelte	packages/platforms/svelte	lib/svelte
HTML	@relation-graph/html	packages/platforms/html	lib/html

The HTML runtime is an independent platform implementation. It is not compiled from Svelte and does not use Shadow DOM. The retired custom-element distribution is no longer part of the build or release matrix.

Shared contracts

Every platform consumes the same public contracts:

• RGOptions and layout options.
• RGJsonData, JsonNode, JsonLine, FakeLine, and runtime read-only objects.
• RGListeners and cancellation/coordinate-return semantics.
• RelationGraphInstance data, layout, view, editing, analysis, and export methods.
• The same performance mode, spatial culling, EasyView, and MiniView data pipeline.

This is why an example can preserve behavior across platforms even though UI syntax differs.

Framework adapters

Framework packages use their native rendering and state mechanisms:

Platform	Integration model
Vue 3	Vue component, provider, Composition API hooks, reactive snapshots
Vue 2	Vue component, provider, mixin-compatible reactive state
React	Context provider, hooks, React render functions/slots
Svelte	Context provider, stores, Svelte slots

Framework slots customize nodes, lines, canvas layers, and view content with native components.

HTML runtime

The HTML package connects the core directly to browser primitives:

graph LR
  Config[RGHtmlConfig] --> Factory[createRelationGraph]
  Factory --> Core[RelationGraphCore]
  Core --> Plan[Render plan / commits]
  Plan --> DOM[Keyed node DOM]
  Plan --> SVG[Line SVG]
  Plan --> Canvas[EasyView / MiniView Canvas]
  Factory --> Extensions[Renderers / Layers / Plugins / UI]

HTML integration uses:

• createRelationGraph() for mounting and readiness.
• DOM/SVG renderers for node, line, label, and expand-button customization.
• Four layers for background, canvas-behind, canvas-above, and fixed view content.
• Plugins for toolbar, MiniView, editing controls, and application behavior.
• State-domain subscriptions and bubbling rg:* mirror events.
• An optional explicitly registered single light-DOM element.

See Using HTML and HTML customization.

Event bridge

The core dispatches named events through its event-handler chain. Framework adapters translate them into framework props/emits. HTML receives the same events through config.events, then publishes read-only DOM mirrors for surrounding UI.

Cancellation remains synchronous and belongs to the core listener contract. DOM mirror events intentionally cannot change a completed decision.

State publication

The core publishes one internally consistent render snapshot per commit. Each platform projects that snapshot into its own update mechanism:

• Vue and Svelte update reactive stores.
• React updates Context-backed state.
• HTML updates keyed DOM/SVG views and publishes options, viewport, selection, editing, and renderPlan subscriptions.

Public query APIs expose read-only views. All platforms must use update APIs instead of mutating graph objects directly.

Build and release

build-all.sh builds Vue 2, Vue 3, React, Svelte, and HTML, then refreshes shared declarations and documentation. HTML emits ESM, UMD, CommonJS, CSS, and declarations. The release script publishes @relation-graph/html; the unscoped name remains disabled.

Each official package is tested against the same core contracts plus platform-specific runtime behavior.