Axiom V2 Docs
Comment on page

Axiom React Client

Adding Axiom client in the browser

Circuit Export

Once you have written a client circuit, you can integrate it into your React app to create and send Axiom queries directly within your app.
First install @axiom-crypto/react using a package manager such as npm/yarn/pnpm.
npm install @axiom-crypto/react
In order for your webapp to use your circuit, you must compile the circuit first using the CLI. This is so the webapp can load saved build artifacts that ensure you are running the same circuit each time. We recommend adding this compilation step as an npm script:
"scripts": {
"buildCircuit": "axiom compile src/lib/circuit/circuit.ts -o src/lib/circuit/build.json"
This example script assumes the circuit function is also named circuit and a default input is provided in circuit.ts. See the CLI reference for more options.


In order to use this in your Next.js 13 app, you'll need to wrap AxiomCircuitProvider in its own file to ensure that it's only mounted once:
"use client";
import { useEffect, useState } from "react";
import { AxiomCircuitProvider } from '@axiom-crypto/react';
import { circuit } from "@/lib/circuit"; // REPLACE w/ path to exported circuit.ts
import circuitBuild from "@/lib/circuit/build.json"; // REPLACE w/ path to build artifacts from circuit compilation
export default function AxiomProvider({ children }: { children: React.ReactNode }) {
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
return (
providerUri={process.env.NEXT_PUBLIC_PROVIDER_URI_GOERLI as string}
{mounted && children}
and in your layout file:
return (


Then you can use the useAxiomCircuit hook to get built queries inside your application:
const circuit = useAxiomCircuit();
// you may need to wrap the `setParams` call in a useEffect hook to prevent an
// infinite reload loop
useEffect(() => {
circuit.setParams(inputs, callbackAddress, callbackExtraData, refundee);
}, [circuit, inputs, callbackAddress, callbackExtraData, refundee]);
const builtQuery = circuit.builtQuery;
// can now use builtQuery to send an on-chain Query to Axiom

Hook functionality

The following functions and variables are available from the useAxiomCircuit hook:


Function to set the inputs and callback.


Function to set the AxiomV2QueryOptions (see here for more details).


Boolean that returns true if inputs and callback are set, or false otherwise.


Async function to build the inputs and callback along with the provided circuit into a Query to be sent to AxiomV2Query.


The full builtQuery variable that contains all inputs required for calling sendQuery on AxiomV2Query.


Function to reset the inputs and callback variables.
Last modified 11d ago