Install

<fluxy-gram> is a standard web component. It works in plain HTML and in every framework (React, Vue, Svelte, Astro, Angular…), with no wrapper.

CDN

No install, no bundler:

<script type="module" src="https://cdn.jsdelivr.net/npm/fluxygram@0.1"></script>

<fluxy-gram src="/diagrams/checkout.flux.json"></fluxy-gram>

npm

npm install @fluxygram/element

// Registers <fluxy-gram> once, anywhere in your app.
import '@fluxygram/element';

Load a diagram

Point src at a .flux.json file:

<fluxy-gram src="/diagrams/checkout.flux.json"></fluxy-gram>

Or write it inline:

<fluxy-gram>
  <script type="application/json">
    { "type": "flow", "nodes": [{ "id": "a", "label": "Start" }, { "id": "b", "label": "Done" }], "edges": [{ "from": "a", "to": "b" }] }
  </script>
</fluxy-gram>

Or set it from JavaScript:

document.querySelector('fluxy-gram').diagram = { type: 'flow', nodes: [/* … */], edges: [/* … */] };

In a framework

// React
import '@fluxygram/element';

export function Checkout() {
  return <fluxy-gram src="/diagrams/checkout.flux.json" />;
}

<!-- Vue: tell the compiler it's a custom element (compilerOptions.isCustomElement) -->
<template>
  <fluxy-gram src="/diagrams/checkout.flux.json" />
</template>

Note

Every attribute, method and event is listed in the component reference.

Packages

Package	What it is
@fluxygram/element	The <fluxy-gram> component. Use it with a bundler.
fluxygram	The same component as a single file, for <script> tags and CDNs.
@fluxygram/core	The format without the DOM: validation, layout and motion planning. For tools, servers and Workers.

import { validate } from '@fluxygram/core';

const result = validate(json, { locale: 'en' });
if (!result.ok) console.log(result.issues); // [{ path: 'edges[0].to', message: '…' }]