React

Component

import { VhyxChart } from '@vhyxchart/react';

<VhyxChart theme="dark" onReady={(player) => player.play()}>{`
  flowchart LR
    a --> b
  scenario Go
    a -> b
`}</VhyxChart>

Header and controller

Every chart has a header (title, step counter, scenario tabs) and a controller (play, steps, timeline, speed). Readers show or hide the controller with the Controls switch in the header; you decide the default, or take over entirely.

<VhyxChart source={source} />  // controller open, reader can hide it

<VhyxChart source={source} controls={false} />  // starts closed, reader can open it

Your app decides

Pass controlsToggle={false} to hide the switch, and drive controls from your own state. onControlsChange tells you when a reader flips the switch.

const [open, setOpen] = useState(false);
<VhyxChart source={source} controls={open} controlsToggle={false} />
<button onClick={() => setOpen((o) => !o)}>Controls</button>

Prop	Default	What it does
`controls`	diagram setting (on)	Show the controller. Changing it later opens or closes it without restarting playback.
`controlsToggle`	`true`	Show the Controls switch in the header.
`onControlsChange`	—	Called with `true`/`false` when the controller opens or closes.
`header`	`true`	Show the header.
`title`	diagram title	Header title.
`controlsPosition`	`'bottom'`	`'top'` puts the controller above the diagram.
`layout`	`'card'`	`'plain'` drops the frame to sit inside your own container.
`classNames` / `styles`	—	Class names or inline styles per part: `root`, `header`, `title`, `stage`, `caption`, `controls`, `button`, `play`, `progress`, `speed`, `scenarios`, `toggle`.

Keyboard: Space plays or pauses, ←/→ step, C shows or hides the controller.

Styling and layout

Theme with CSS variables on .vc-player (or any ancestor), or override parts with classNames and styles.

<VhyxChart
  source={source}
  layout="plain"            // no frame
  controlsPosition="top"    // controller above the diagram
  header={false}
  styles={{ root: { '--vc-accent': '#a855f7' } }}
/>

.vc-player {
  --vc-accent: #0ea5e9;   /* play button, progress, active states */
  --vc-radius: 12px;
  --vc-font: 'Inter', sans-serif;
}

Custom controls (headless)

const { ref, player, state } = useVhyxChart(source, { controls: false, controlsToggle: false });
return (
  <>
    <div ref={ref} />
    <Button onClick={() => player?.toggle()}>{state.playing ? 'Pause' : 'Play'}</Button>
    <Text>{Math.round(state.time)} / {Math.round(state.duration)} ms</Text>
  </>
);

Server components

import { VhyxChartStatic } from '@vhyxchart/react/static';

// No client JavaScript — still animated via SMIL.
export default function Page() {
  return <VhyxChartStatic>{'flowchart LR\n  a --> b'}</VhyxChartStatic>;
}