Examples

Wrappers

Use WireEditor for editable embeds and WireViewer for read-only previews.

Wrapper pass-through

WireEditor and WireViewer keep current canvas props while handling provider setup for common screens.

tsx

import "@aigentive/wire-react/styles.css";
import { WireEditor, WireViewer } from "@aigentive/wire-react";

export function WrapperPair({ diagram, onChange, optionCatalog }) {
  return (
    <div className="grid grid-cols-2">
      <WireEditor
        diagram={diagram}
        onChange={onChange}
        fitView
        optionCatalog={optionCatalog}
      />
      <WireViewer
        diagram={diagram}
        fitView
        showControls={false}
        showMiniMap={false}
      />
    </div>
  );
}

NextRead-only inspector