Configure a create-LOC form

Outcome: a create-LOC form shaped to your business, previewed live as you edit, and three small files to copy into your React app.

The configurator keeps SDK policy (LOCConfig) separate from page copy (CreateLOCFlow props). Each edit passes through the SDK’s public config validator before the preview or the generated code updates. If a draft becomes invalid, the issue appears on its field and the last valid preview stays on screen.

A real form with sample data

The preview renders the real SDK create form with your evaluated LOCConfig. Its token, balance, and date reads use fixed sample data, and it runs without RPC calls or a wallet, so it can’t submit a transaction. The token allowlist pickers are the one live read: they list the tokens the public testnet subgraph reports today, so the addresses you choose are the ones the generated testnet integration accepts.

Use the generated files

Open Code in the configurator, then use Copy all for one annotated bundle or copy each file from its tab:

1. loc-config.ts contains only the SDK’s typed LOC policy and uses satisfies LOCConfig.
2. anvil-sdk.ts accepts your RPC URL at runtime and selects the public testnet profile. It contains no API key or hosted-provider secret.
3. CreateLOCPage.tsx renders the create form on its own (createOnly), as the preview shows it. It owns presentation copy, provides the SDK to React, and imports the component stylesheet once.

Pass your RPC URL to the generated page from your app’s environment configuration, and keep a private provider URL or token out of the generated SDK file.

Allowlists apply to this SDK instance

Beneficiary and token allowlists guard the calls made through this configured SDK instance. A modified client or a direct contract call goes around them, so enforce business permissions on a server you trust or onchain.

For a full production integration, including wallet connection and transaction execution, follow Add a create-LOC form to your app.