@boundsvg/react

React integration layer for boundsvg. Provides Provider, hooks, and components for using boundsvg in React applications.

Provider

<BoundSvgProvider>

Context provider that initializes WASM, loads fonts, and manages Engine lifecycle.

import { BoundSvgProvider } from "@boundsvg/react/provider";

<BoundSvgProvider
  config={{
    fonts: [
      {
        alias: "NotoSansJP",
        weight: 400,
        style: "normal",
        source: "/fonts/NotoSansJP.ttf",
      },
    ],
    defaultCommonOptions: { debug: false },
  }}
  fallback={<div>Loading...</div>}
>
  <App />
</BoundSvgProvider>;

BoundSvgConfig

Property	Type	Required	Description
fonts	FontDefinition[]	Yes	Font definitions. source accepts URL string, URL, or Uint8Array
wasm	WasmModule	No	Pre-loaded WASM module. Auto-loaded from @boundsvg/browser if omitted
worker	WorkerConfig	No	Enable Worker rendering: { mode: "prefer" | "required"; url?: URL; timeoutMs?; onFallback? }
fontLoader	FontLoader	No	Override how font bytes are fetched
fontFetchOptions	RequestInit	No	Passed to the default font fetch
geometries	Array<{ id, doc }>	No	Geometry registry entries loaded at engine creation
resourcesRevision	number	No	Non-negative safe integer; increment after changing resource values in place
symbols	Array<{ id, def }>	No	Symbol registry entries loaded at engine creation
defaultCommonOptions	BoundSvgDefaultCommonOptions	No	Compile/output-common defaults only; artifact-specific options stay on each component or hook

defaultCommonOptions accepts only CompileOptions & OutputCommonOptions. SVG namespace/metadata, timeMs, playback/reduced-motion, and raster-only fields must be passed to the individual component or hook. Configuration keys are checked synchronously before font fetching, Engine creation, Worker creation, or effects begin. The removed defaultRenderOptions and legacy default fields throw UNSUPPORTED_LEGACY_RENDER_OPTION; unknown or artifact-specific default fields throw UNSUPPORTED_RENDER_OPTION.

FontDefinition

Property	Type	Default	Description
alias	string	—	Font alias (referenced by <Text font="...">)
weight	number	400	Font weight
style	"normal" | "italic"	"normal"	Font style
source	string | URL | Uint8Array	—	Font data or URL to fetch

Initialization Flow

Main-thread mode (default):

1. Validate config own keys and defaultCommonOptions synchronously
2. Fetch each font (if URL) → resolve to Uint8Array
3. Use config.wasm if provided, otherwise dynamic import @boundsvg/browser → loadWasmModule()
4. initWasm(wasmModule) to initialize core
5. createEngineAsync({ fonts }) — creates a BoundSvgEngine instance and registers all fonts at creation time
6. Set engine + status in Context

Fonts are resolved before either branch is taken, so a font-fetch failure aborts before any WASM is loaded.

Worker mode (worker: { mode, url? }):

1. Validate config own keys and defaultCommonOptions synchronously
2. Fetch each font (if URL) on the main thread, as above
3. Create a WorkerEngine via @boundsvg/worker, transferring the font bytes into it
4. Initialize the Worker (WASM loading + font registration happen inside the Worker)
5. Set workerEngine + status in Context (engine stays null on this path)
6. On Worker init failure, mode: "prefer" falls back to a main-thread Engine and invokes onFallback; mode: "required" reports the failure without falling back

Status transitions: idle → loading → ready | error

StrictMode safety: The mount → unmount → mount cycle is handled via a disposed flag. Each Engine instance owns its own font registry, so StrictMode re-mount creates a fresh instance without side-effects.

Hooks

The main-thread static and animated SVG hooks are on the package root. PNG, Async, interactive, asset, and inspection hooks live on the subpath named by each heading. The complete inventory is under Public Exports.

useBoundSvg()

_{@boundsvg/react/provider}

Access the Engine instance and status from context. Exactly one of engine / workerEngine is non-null once status === "ready" — workerEngine when the Worker initialized, engine otherwise — including after a mode: "prefer" fallback.

const { engine, workerEngine, status, error, defaultCommonOptions } =
  useBoundSvg();

Throws if called outside <BoundSvgProvider>.

useRenderToSvg(vnode, options?)

_{@boundsvg/react}

Render a VNode tree to SVG reactively.

const { svg, error, isReady } = useRenderToSvg(vnode, options?);

Return	Type	Description
svg	string | null	Rendered SVG string
error	Error | null	Rendering error
isReady	boolean	Whether SVG is available

useMemo-based — recomputes when the VNode or the resolved render-option values change. The VNode passes through a structural comparison first, so a fresh object with identical structure is treated as unchanged and does not re-render. Re-rendering on every React render is typically practical; for very large trees, memoizing the VNode with useMemo skips that comparison. Options are merged with defaultCommonOptions.

This is a static hook. Animated input requires an explicit timeMs.

useRenderToAnimatedSvg(vnode, options)

_{@boundsvg/react}

Render an animated SVG on the main thread. Options are required and must select either independently playing tracks or one shared document timeline.

const { svg, error, isReady } = useRenderToAnimatedSvg(vnode, {
  playback: {
    mode: "timeline",
    durationMs: 2400,
    iterations: "infinite",
  },
  reducedMotion: "pause",
});

Use playback: { mode: "independent" } to preserve each authored track's own duration, delay, and iteration schedule. Timeline playback instead maps every track onto the shared document clock; see the animation guide for its strict validation and exact-time semantics.

useRenderToPng(vnode, options?)

_{@boundsvg/react/png}

Render a VNode tree to PNG reactively.

const { png, dataUrl, error, isReady } = useRenderToPng(vnode, options?);

Return	Type	Description
png	Uint8Array | null	PNG binary
dataUrl	string | null	data:image/png;base64,...
error	Error | null	Rendering error
isReady	boolean	Whether PNG is available

Synchronous render notifications

Synchronous React render paths collect onWarning and onPngResolutionAdjusted notifications while rendering, then deliver them only after that render generation commits. A generation that React abandons does not notify the callbacks. Notifications retain their original emission order; for example, PNG auto-adjustment calls onPngResolutionAdjusted before the corresponding PNG_RESOLUTION_ADJUSTED warning reaches onWarning, just as the direct Engine and WorkerEngine paths do.

This commit-phase rule applies to the synchronous hooks and helpers that render during React evaluation, including useRenderToSvg, useRenderToPng, useRenderAsset, useInteractiveSvg, and useBoundSvgInspection.

Shared async execution

Import all seven async hooks from @boundsvg/react/async. The former @boundsvg/react/worker entry and UseWorkerRenderResult type have been removed; there is no compatibility alias. Hook names and format-specific result fields remain the same. useRenderToSvgAndIrAsync returns the matching svg and ir from one generation, and its animated counterpart does the same for animated SVG.

The Provider selects main execution when worker is omitted. With worker.mode: "prefer", only initialization failure falls back to main and notifies the latest committed onFallback once. required propagates that failure to the hooks. A render failure, timeout, or crash after initialization never silently retries on main.

Every async result has these shared fields, exported as the discriminated RenderExecutionState type:

Field	Meaning
status	idle, rendering, success, or error for the latest input
execution	main or worker while rendering or holding a result; null while idle or for an initialization error
isRendering	True only for rendering
isReady	True only for the latest success
isStale	True when a previous successful result is retained during rendering or error
error	Non-null only for error

The third argument is RenderExecutionOptions:

Option	Default	Meaning
revision?: number	0	Non-negative safe integer; change after mutating the same VNode or nested option object in place
retainPreviousResult?: boolean	true	Keep the complete previous success from the same execution owner during updates and failures
onError?: (error: Error) => void	—	Notify once after a failed generation commits, after its captured warnings

A successful result has all format fields populated. Idle has none. Rendering and error contain either the complete previous success or no result; SVG/IR and layer/result/URL fields never mix generations. Input null, Provider loading, and an Engine/config exchange discard previous results. To display a retained result, check its svg, dataUrl, or result field rather than isReady.

VNode changes use immutable identity. Non-callback option values use shallow own-key comparison and nested object identity; Provider defaults, revision, and Engine resource changes also invalidate the input. Stabilize newly authored VNodes and nested options with state or a correctly dependent useMemo. In-place changes require a revision update. Changing only notification callbacks does not redraw; notifications use the latest committed callbacks. Revision controls reject null, negative, fractional, and unsafe values with INVALID_RENDER_EXECUTION_OPTION. Invalid boolean or callback controls use the same code.

import { useMemo } from "react";
import { useRenderToAnimatedSvgAsync } from "@boundsvg/react/async";

const options = useMemo(
  () => ({ playback: { mode: "independent" as const } }),
  [],
);
const rendered = useRenderToAnimatedSvgAsync(vnode, options, { revision });

Scheduling and snapshots start at commit, so abandoned renders make no requests. Each hook coalesces its own unsent updates into one microtask and aborts its own superseded queue entry. A replacement joins the FIFO tail behind other consumers. Warnings and PNG adjustment notifications retain emission order and are delivered once for the adopted generation after commit, including StrictMode replay. Callback exceptions surface through React effects and do not become producer errors.

Each Provider main scheduler and each WorkerEngine admits one current job plus 32 queued jobs. Overflow is an explicit RENDER_QUEUE_FULL or WORKER_QUEUE_FULL error; it never displaces an existing request. This is a request-count limit, not a heap-byte limit. Main computation starts in a later task but synchronous WASM still blocks that thread while running. Sent Worker computation may continue after its hook is superseded; its result and notifications are ignored.

IR and layered SVG objects belong to one hook consumer and may keep their identity within the same result generation. Treat these objects as immutable; a rerender does not undo caller mutations.

PNG buffers returned by each hook projection are copies of retained internal buffers. Mutating a returned PNG cannot change another consumer, a later projection, or its stored data URL. Each hook retains only its current computation, one previous success, one unsent snapshot, and one pending notification batch.

For SSR or static generation, prefer an initialized Core Engine's synchronous API. Async hooks are idle on the server. Provider initialization uses effects and does not automatically make the Provider ready during SSR.

Revision and resource changes for synchronous hooks

useRenderToSvg, useRenderToAnimatedSvg, useRenderToPng, useCompiledScene, useRenderAsset, and useBoundSvgInspection accept RenderInputOptions = { revision?: number } as a third argument. useInteractiveSvg accepts revision in its existing third options argument. usePngObjectUrl(png, { revision }) accepts it as a second argument and revokes a superseded URL. These APIs retain their synchronous or inspection responsibilities and observe the Provider Engine's resource version. PNG reuse is local to one hook, with no module-wide result cache.

Provider initialization captures font metadata and byte windows, geometry, and symbol values before awaiting initialization. Equal configuration still avoids reinitialization; resourcesRevision explicitly invalidates values changed in place. Render defaults and notification callbacks alone do not recreate an Engine.

useRenderToSvgAsync(vnode, options?)

_{@boundsvg/react/async}

Render a VNode tree to SVG through the Provider’s selected main or Worker owner.

const { svg, error, isRendering, isReady } = useRenderToSvgAsync(vnode, options?);

Return	Type	Description
svg	string | null	Rendered SVG string
error	Error | null	Rendering error
isRendering	boolean	Whether the latest input is rendering
isReady	boolean	Whether the latest input succeeded

useRenderToAnimatedSvgAsync(vnode, options)

_{@boundsvg/react/async}

The shared async equivalent of useRenderToAnimatedSvg. Its required options carry the same independent-or-timeline playback, base-pose, namespace, metadata, and reduced-motion contract.

const options = useMemo<RenderAnimatedSvgOptions>(
  () => ({
    playback: { mode: "timeline", durationMs: 2400, iterations: 2 },
    nodeIdMetadata: "omit",
  }),
  [],
);
const result = useRenderToAnimatedSvgAsync(vnode, options);

useRenderToAnimatedSvgAndIrAsync returns the matching { svg, ir } artifacts for inspection flows on either execution owner.

useRenderToPngAsync(vnode, options?)

_{@boundsvg/react/async}

Render a VNode tree to PNG through either execution owner. Worker transport transfers the buffer; the hook exposes a separate copy.

const { png, dataUrl, error, isRendering, isReady } = useRenderToPngAsync(vnode, options?);

Return	Type	Description
png	Uint8Array | null	PNG binary
dataUrl	string | null	data:image/png;base64,...
error	Error | null	Rendering error
isRendering	boolean	Whether the latest input is rendering
isReady	boolean	Whether the latest input succeeded

useRenderToLayeredSvgAsync(vnode, options?)

_{@boundsvg/react/async}

Render a VNode tree to SVG layers through either execution owner. See Layered Export.

const { result, error, isRendering, isReady } = useRenderToLayeredSvgAsync(
  vnode,
  options?,
);
// result?.layers, result?.manifest, result?.compositionValidation

Return	Type	Description
result	LayeredSvgResult | null	Latest or retained complete result
error	Error | null	Rendering error
isRendering	boolean	Whether the latest input is rendering
isReady	boolean	Whether the latest input succeeded

layers, manifest and compositionValidation are fields of result, not of the hook. Options accept LayeredSvgOptions in full, onWarning included — it is invoked as a callback. Recoverable render warnings reach onWarning only; the per-layer resolver warnings stay on each layer entry inside result.

useRenderToLayeredPngAsync(vnode, options?)

_{@boundsvg/react/async}

Render a VNode tree to PNG layers through either execution owner. Public layer buffers are separate from retained internal buffers.

const { result, layerDataUrls, error, isRendering, isReady } =
  useRenderToLayeredPngAsync(vnode, options?);
// result?.layers, result?.manifest, result?.compositionValidation

Return	Type	Description
result	LayeredPngResult | null	Latest or retained complete result
layerDataUrls	string[] | null	Memoized data:image/png;base64,... URLs, one per layer
error	Error | null	Rendering error
isRendering	boolean	Whether the latest input is rendering
isReady	boolean	Whether the latest input succeeded

layers, manifest and compositionValidation are fields of result. Options accept LayeredPngOptions in full, onWarning included — it is invoked as a callback. Recoverable render warnings reach onWarning only; the per-layer resolver warnings stay on each layer entry inside result.

useInteractiveSvg(vnode, handlers, options?)

_{@boundsvg/react/interactive}

Render a VNode tree with interactive event handling (hitTest, hover, click).

Visible Path fill/stroke outside its layout box can receive events. Explicit rectangular and rounded ancestor clips exclude their owner and descendants outside the clip; Path holes fall through to a node underneath. The native current-pointer hit stack also covers canvas-stable strokes under SVG viewport scaling, including pointer capture. Generic text/image hit testing remains based on positioned bounds. Use static rendering or an explicit timeMs for matching sampled paint and hit geometry; live SVG playback does not update the Core hit index at every animation instant.

const { svg, ir, error, isReady, hoverNodeId, containerRef } =
  useInteractiveSvg(vnode, handlers, options?);

Return	Type	Description
svg	string | null	Rendered SVG string
ir	IR | null	Full IR for advanced consumers
error	Error | null	Rendering error
isReady	boolean	Whether rendering succeeded
hoverNodeId	string | null	Currently hovered node ID
containerRef	(node: HTMLDivElement | null) => void	Ref callback for container div
textMap	TextMap | null	Text structure map used by the text-copy features

Components

<BoundSvg>

Renders a VNode tree inline through the shared async path, on both main and Worker. It keeps the same owner’s previous SVG during updates by default. Main rendering therefore no longer finishes during React render. Set retainPreviousResult: false in executionOptions to clear previous output; executionOptions also accepts revision and onError.

An unrelated parent update keeps the existing SVG DOM when the generated SVG string is unchanged. Changing that string replaces the displayed document.

<BoundSvg
  vnode={vnode}
  renderOptions={{ debug: true }}
  className="my-output"
  fallback={<Skeleton />}
/>

Prop	Type	Description
vnode	VNode | null	VNode tree to render (legacy mode)
width	number	Canvas width (declarative mode)
height	number	Canvas height (declarative mode)
background	string	Canvas background (declarative mode)
children	ReactNode	Declarative children (boundsvg phantom components)
executionOptions	RenderExecutionOptions	Revision, retention, and committed error callback
renderOptions	RenderSvgOptions	Static SVG options; animated input requires timeMs
className	string	Wrapper div class
fallback	ReactNode	Fallback UI while engine is loading
errorFallback	ReactNode | (error: Error) => ReactNode	Fallback UI when rendering fails

<AnimatedBoundSvg>

Uses the same VNode/declarative-child and fallback props as <BoundSvg>, but calls the animated SVG family on either the main thread or Worker. Its renderOptions: RenderAnimatedSvgOptions prop is required.

An unrelated parent update keeps the existing SVG DOM and animation clock when the generated SVG string is unchanged. Changing that string replaces the displayed document, so its animations start with the new document.

<AnimatedBoundSvg
  vnode={vnode}
  renderOptions={{
    playback: {
      mode: "timeline",
      durationMs: 2400,
      iterations: "infinite",
    },
    resourceIdPrefix: "preview-0042-",
    reducedMotion: "pause",
  }}
/>

<InteractiveBoundSvg>

Renders a VNode tree with pointer event handling (click, hover, context menu). Supports both explicit VNode mode and declarative children mode.

Hover and callback updates preserve the displayed SVG DOM and animation clock when the generated SVG string is unchanged. Updated handlers receive subsequent events without replacing that document. A changed SVG updates the displayed scene and hit-testing data. This does not make the Core hit index follow every instant of live SVG animation.

<InteractiveBoundSvg
  vnode={vnode}
  handlers={handlerMap}
  renderMode="static"
  renderOptions={{ debug: true }}
  className="interactive-output"
  showPointerCursor={true}
  onHoverChange={(nodeId) => console.log(nodeId)}
  fallback={<Skeleton />}
/>

Prop	Type	Description
vnode	VNode | null	VNode tree to render (explicit mode)
handlers	Map<string, EventCallback>	Handler map for explicit VNode mode
width	number	Canvas width (declarative mode)
height	number	Canvas height (declarative mode)
background	string	Canvas background (declarative mode)
children	ReactNode	Declarative children with function handlers
renderMode	"static" | "animated"	Explicitly selects the static or animated SVG family
renderOptions	RenderSvgOptions | RenderAnimatedSvgOptions	Must match renderMode; animated mode requires playback
className	string	Wrapper div class
showPointerCursor	boolean	Show cursor:pointer on interactive elements
onHoverChange	(nodeId: string | null) => void	Callback when hover state changes
fallback	ReactNode	Fallback UI while engine is loading
errorFallback	ReactNode | (error: Error) => ReactNode	Fallback UI when rendering fails
onRender	(ir: IR) => void	Called with the IR after each render
enableTextCopy	boolean	Enable the text-copy selection behaviour
onTextCopyMenu	(info: TextCopyMenuInfo) => void	Called when the text-copy context menu opens

Interactive rendering always emits data-boundsvg-node-id for hit testing, even if the supplied SVG options request nodeIdMetadata: "omit". Use a noninteractive static or animated component for final metadata-free export.

JSX Phantom Components

Phantom JSX components for building VNode trees in React:

import {
  BoundSvg,
  Canvas,
  Inline,
  InlineRect,
  Text,
  TextOnPath,
} from "@boundsvg/react";

These create boundsvg VNodes (not DOM elements). See Components for props.

The React Text phantom component accepts the complete core TextProps contract, including direct flow layout props:

<Text
  font="NotoSansJP"
  fontSizePx={20}
  width={480}
  height={240}
  whiteSpace="pre-wrap"
  tabSize={4}
  flowMinRegionWidthPx={16}
  flowExclusions={[
    { kind: "rect", x: 40, y: 32, width: 112, height: 88, marginPx: 8 },
  ]}
>
  {"見出し\t本文を、障害物の周囲へ直接 flow します。"}
</Text>

Exclusion coordinates are relative to the Text frame, and a non-empty flowExclusions array requires explicit positive width and height. flowMinRegionWidthPx follows the current writing mode's inline axis. See the Text flow reference for all shape variants and defaults.

The React adapter re-exports the core text composition and path APIs without adding React-specific layout semantics:

<BoundSvg width={480} height={240} background="#071827">
  <Text
    position="absolute"
    left={16}
    top={12}
    font="NotoSansJP"
    fontSizePx={24}
  >
    入力:
    <Inline
      textDecoration={{ line: "underline", color: "#facc15", thicknessPx: 2 }}
    >
      きょう
    </Inline>
    <InlineRect inlineSizePx={2} blockSizePx="line" color="#67e8f9" />
  </Text>
  <TextOnPath
    d="M20 160C120 60 360 60 460 160"
    width={480}
    height={200}
    position="absolute"
    left={0}
    top={32}
    font="NotoSansJP"
    fontSizePx={26}
    startOffsetPx={240}
    textAnchor="middle"
    pathDirection="forward"
    pathNormal="left"
    pathOffsetPx={4}
    pathFit="shrink"
    pathOverflow="ellipsis"
    textDecoration={{ line: "underline", style: "dashed", skipInk: "all" }}
  >
    曲線上の
    <Inline font="JetBrainsMono" color="#facc15" textDecoration="none">
      PATH
    </Inline>
  </TextOnPath>
</BoundSvg>

InlineRect is childless. TextOnPath accepts strings and nested Inline nodes as React children; other elements, newlines, and tabs are errors. Inline font/shaping props, color, stroke/shadow categories, and decoration use the same inheritance and replacement rules as core. It supports one open or authored-closed path with explicit direction/normal, path fitting, ellipsis, mixed paint, and curved filled decoration. InlineBox, InlineRect, Ruby, Rt, vertical writing, bidi, and effective decoration combined with animateUnits remain unsupported.

The renderOptions.textPathMode prop only selects merged or per-glyph outline grouping—it is not the TextOnPath layout component.

React does not add an IME API. Keep composition and candidate state in the application, build the corresponding Text/Inline/InlineRect/Box tree, and re-render the full scene when that state changes. See Typing and IME composition and Text on an SVG path.

Dual JSX Resolution

boundsvg uses two JSX runtimes simultaneously:

Purpose	JSX Runtime	Resolution
VNode building (Canvas, Text, etc.)	@boundsvg/core	/** @jsxImportSource @boundsvg/core */ pragma or tsconfig
React UI components	react	tsconfig jsxImportSource: "react"

• React adapter tsconfig: "jsxImportSource": "react" (overrides base @boundsvg/core)
• VNode builder files: use /** @jsxImportSource @boundsvg/core */ pragma at file top, or call createElement("Canvas", {...}) directly
• @boundsvg/react exports phantom React components, but the resulting boundsvg nodes are still typed by string literal type values internally ("Canvas" | "Flex" | "Text" | ...)

@boundsvg/react/inspect

Use this subpath to read structured scene facts through the Provider engine.

import { useBoundSvgInspection } from "@boundsvg/react/inspect";

const { inspection, error, isReady } = useBoundSvgInspection(vnode);

useBoundSvgInspection renders layout and sampled IR through the Provider engine and returns a SceneInspection.

@boundsvg/react/debug

Use this subpath for human-facing visual diagnostics.

import {
  BoundSvgDebugOverlay,
  NodeInspectorPanel,
} from "@boundsvg/react/debug";

API	Description
BoundSvgDebugOverlay	Draws rich SVG bbox overlays with labels and controlled highlight targets
NodeInspectorPanel	Renders a minimal definition-list panel for bbox, type, handler, and text information

BoundSvgDebugOverlay accepts labelMode: "none" | "node-id" | "summary" | "metrics". The default summary label includes nodeId, node type, size, position, depth, and draw order index. Use selectedNodeId, highlightedNodeIds, or highlightedBBoxes to highlight a node or an arbitrary render-tree bbox without making the overlay intercept pointer events.

<BoundSvgDebugOverlay
  inspection={inspection}
  labelMode="metrics"
  selectedNodeId={selectedNodeId}
  highlightedBBoxes={[
    { id: "crop", label: "export crop", x: 24, y: 32, w: 240, h: 120 },
  ]}
/>

The inspect and debug subpaths are intentionally separate from the root import so production UI bundles can tree-shake editor tooling away when not used.

@boundsvg/react/assets

Use this subpath when React UI needs an asset lifecycle around generated output.

import { usePngObjectUrl, useRenderAsset } from "@boundsvg/react/assets";

const { svg, png, dataUrl, compiled } = useRenderAsset(vnode, {
  pngOptions: { scale: 2 },
});
const objectUrl = usePngObjectUrl(png);

API	Description
usePngObjectUrl	Creates and revokes a PNG object URL for <img> previews or download buttons
useCompiledScene	Compiles a VNode once into an opaque artifact owned by the Provider engine
useRenderAsset	Returns compiled scene, SVG string, PNG bytes, and PNG data URL in one hook

The returned CompiledScene exposes readonly width, height, and textPathMode metadata only. Render it with the same Provider Engine that created it. It is not a serializable transport value and must not be cloned or rebuilt as a plain object. For an editable inspection copy, call engine.snapshotCompiledIR(compiled); that detached IR cannot be passed to a compiled render method.

Public Exports

Every export of every entry point. Types re-exported from @boundsvg/core (VNode, format-specific render options, the *Props/*VNode families, geometry and animation types) are listed under the package root because that is where they are re-exported.

// Package root — components, the sync SVG hook, and VNode conversion
export {
  AnimatedBoundSvg,
  BoundSvg,
  Box,
  Canvas,
  Flex,
  Grid,
  Image,
  Inline,
  InlineBox,
  InlineRect,
  Path,
  Rt,
  Ruby,
  Shape,
  Svg,
  Symbol,
  Text,
  TextOnPath,
  toVNode,
  toVNodeFromChildren,
  useRenderToAnimatedSvg,
  useRenderToSvg,
};
export type {
  AnimatedBoundSvgProps,
  AnimatedSvgPlayback,
  AnimationEasing,
  AnimationIterationCount,
  AnimationKeyframe,
  AnimationSpec,
  AnimationSpring,
  AnimationStepPosition,
  AnimationTimeline,
  AnimationTransform2D,
  AnyVNode,
  BooleanOp,
  BoundSvgNodeComponent,
  BoundSvgProps,
  BoxProps,
  BoxVNode,
  CanvasProps,
  CanvasVNode,
  ChildFor,
  ChildrenFor,
  DebugOverlayConfig,
  DebugOverlayPart,
  ElasticSegment,
  Engine,
  EngineOptions,
  FlexProps,
  FlexVNode,
  Frame,
  GeometryDoc,
  GeometryNode,
  GeometryViewBox,
  GridProps,
  GridVNode,
  ImageProps,
  ImageVNode,
  InlineBoxProps,
  InlineBoxVNode,
  InlineProps,
  InlineRectProps,
  InlineRectVNode,
  InlineVNode,
  PathProps,
  PathVNode,
  RenderAnimatedSvgOptions,
  RenderFramesOptions,
  RenderPngOptions,
  RenderSvgOptions,
  RenderWebpOptions,
  RtProps,
  RtVNode,
  RubyProps,
  RubyVNode,
  ShapeProps,
  RenderInputOptions,
  SvgProps,
  SvgVNode,
  SymbolDefinition,
  SymbolProps,
  TextDecoration,
  TextDecorationLine,
  TextOnPathProps,
  TextOnPathVNode,
  TextProps,
  TextUnitAnimation,
  TextVNode,
  Transform2D,
  UseRenderToSvgResult,
  VNode,
  VNodeChild,
  VNodeChildrenArgs,
  VNodeFor,
  VNodeInputChildFor,
  VNodeType,
  WasmModule,
};

// "@boundsvg/react/provider" — engine setup and context
export { BoundSvgProvider, useBoundSvg };
export type {
  BoundSvgConfig,
  BoundSvgContextValue,
  BoundSvgDefaultCommonOptions,
  BoundSvgProviderProps,
  BoundSvgStatus,
  FontDefinition,
  WorkerConfig,
};

// "@boundsvg/react/png" — main-thread PNG
export { useRenderToPng };
export type { UseRenderToPngResult };

// "@boundsvg/react/async" — shared main and Worker async rendering
export {
  useRenderToAnimatedSvgAndIrAsync,
  useRenderToAnimatedSvgAsync,
  useRenderToLayeredPngAsync,
  useRenderToLayeredSvgAsync,
  useRenderToPngAsync,
  useRenderToSvgAndIrAsync,
  useRenderToSvgAsync,
};
export type {
  RenderExecutionOptions,
  RenderExecutionState,
  UseRenderToLayeredPngAsyncResult,
  UseRenderToLayeredSvgAsyncResult,
  UseRenderToPngAsyncResult,
  UseRenderToSvgAndIrAsyncResult,
  UseRenderToSvgAsyncResult,
};

// "@boundsvg/react/interactive" — hit-testing, events, text copy
export {
  InteractiveBoundSvg,
  toInteractiveVNode,
  toInteractiveVNodeFromChildren,
  useInteractiveSvg,
  useTextCopy,
};
export type {
  BuildMenuInfoParams,
  CopyStatus,
  EventCallback,
  InteractiveBoundSvgProps,
  InteractiveHandlerProps,
  PointerEventInfo,
  SvgPoint,
  TextContextMenuHit,
  TextCopyMenuInfo,
  ToInteractiveVNodeResult,
  UseInteractiveSvgOptions,
  UseInteractiveSvgResult,
  UseTextCopyResult,
};

// "@boundsvg/react/inspect" — structured inspection
export { useBoundSvgInspection };
export type {
  InspectionBBox,
  InspectionRect,
  InspectionStats,
  InspectionTransformBox,
  SceneInspection,
  UseBoundSvgInspectionResult,
};

// "@boundsvg/react/debug" — visual diagnostics
export { BoundSvgDebugOverlay, NodeInspectorPanel };
export type {
  BoundSvgDebugOverlayProps,
  DebugOverlayHighlight,
  DebugOverlayLabelMode,
  NodeInspectorPanelProps,
};

// "@boundsvg/react/assets" — compiled-scene reuse and object URLs
export { useCompiledScene, usePngObjectUrl, useRenderAsset };
export type {
  UseCompiledSceneResult,
  UseRenderAssetOptions,
  UseRenderAssetResult,
};