# Metadata Reactor Capabilities

This browser-only demo showcases `MetadataReactor` capabilities using a local
IDL service definition, so it can run without a live canister.

## Features Demonstrated

- Generate runtime input metadata with `getInputMeta()` and `getAllInputMeta()`
- Generate runtime output metadata with `getOutputMeta()` and `getAllOutputMeta()`
- Build dynamic variable references with `buildMethodVariableCandidates()`
- Hydrate form values from hex-encoded Candid args with `buildForMethod()`
- Resolve rich method outputs with metadata-driven resolvers

## Links

[Open in StackBlitz](https://stackblitz.com/github/b3pay/ic-reactor/tree/main/examples/metadata-reactor-capabilities-demo?embed=1&theme=dark&file=src/main.ts)
  [View on GitHub](https://github.com/b3pay/ic-reactor/tree/main/examples/metadata-reactor-capabilities-demo)
## Live Preview

<iframe
  src="https://stackblitz.com/github/b3pay/ic-reactor/tree/main/examples/metadata-reactor-capabilities-demo?embed=1&theme=dark&file=src/main.ts&view=preview"
  style="width: 100%; height: 600px; border: 0; border-radius: 8px; overflow: hidden;"
  title="IC Reactor Metadata Reactor Capabilities Demo"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>

## Key Code

```ts
const inputMeta = reactor.getInputMeta(methodName)
const outputMeta = reactor.getOutputMeta(methodName)
const variableCandidates = reactor.buildMethodVariableCandidates(methodName)

const candidArgsHex = toHex(IDL.encode(argTypes, args))
const hydrated = await reactor.buildForMethod(methodName, { candidArgsHex })

const resolved = outputMeta?.resolve(sampleOutputs[methodName])
```