fhEVM
WebsiteLibrariesProduct & ServicesDevelopersSupport
0.6
0.6
  • Welcome to fhEVM
  • White paper
  • Getting Started
    • Overview
    • Quick Start
      • Remix
        • 1. Setting up Remix
        • 2. Connect your wallet to Remix
        • 3. Deploying ConfidentialERC20
        • 4. Interacting with the contract
      • Hardhat
        • Prerequisites
        • 1. Setting up Hardhat
        • 2. Writing contracts
        • 3. Testing in mocked mode
        • 4. Deploying the contract
        • 5. Interacting with the contract
  • Tutorials
    • See all tutorials
  • Smart contract
    • Key features
    • Configuration
    • FhEVM contracts
    • Supported types
    • Operations on encrypted types
    • Access Control List
      • ACL examples
    • Encrypted Inputs
    • Decryption
      • Decryption
      • Decryption in depth
      • Re-encryption
    • If sentences
    • Branching in FHE
    • AsEbool, asEuintXX, asEaddress and asEbytesXX operations
    • Generate random numbers
    • Error handling
    • Gas estimation
    • Debug decrypt
    • Using Foundry
  • Frontend
    • Setup
    • Build a web application
    • Using React.js
    • Using Next.js
    • Using Vue.js
    • Using Node or Typescript
    • Using the CLI
    • Common webpack errors
  • Explanations
    • Architectural overview
    • FHE on blockchain
    • fhEVM components
    • Encryption, decryption, re-encryption, and computation
  • References
    • Table of all addresses
    • Smart contracts - fhEVM API
    • Frontend - fhevmjs lib
    • Repositories
  • Developer
    • Contributing
    • Development roadmap
    • Release note
    • Feature request
    • Bug report
    • Status
Powered by GitBook

Libraries

  • TFHE-rs
  • Concrete
  • Concrete ML
  • fhEVM

Developers

  • Blog
  • Documentation
  • Github
  • FHE resources

Company

  • About
  • Introduction to FHE
  • Media
  • Careers
On this page
  • Using a template
  • React + TypeScript
  • VueJS + TypeScript
  • NextJS + Typescript
  • Using the mocked coprocessor for frontend
  • Using directly the library
  • Step 1: Setup the library
  • Step 2: Initialize your project
  • Step 3: Create an instance

Was this helpful?

Export as PDF
  1. Frontend

Build a web application

PreviousSetupNextUsing Node or Typescript

Last updated 3 months ago

Was this helpful?

This document guides you through building a web application using the fhevmjs library. You can either start with a template or directly integrate the library into your project.

Using a template

fhevmjs is working out of the box and we recommend you to use it. We also provide three GitHub templates to start your project with everything set.

React + TypeScript

You can use to start an application with fhevmjs, using Vite + React + TypeScript.

VueJS + TypeScript

You can also use to start an application with fhevmjs, using Vite + Vue + TypeScript.

NextJS + Typescript

You can also use to start an application with fhevmjs, using Next + TypeScript.

Using the mocked coprocessor for frontend

As an alternative to use the real coprocessor deployed on Sepolia to help you develop your dApp faster and without needing testnet tokens, you can use a mocked fhevm. Currently, we recommend you to use the ConfidentialERC20 dApp example available on the mockedFrontend branch of the . Follow the README on this branch, and you will be able to deploy exactly the same dApp both on Sepolia as well as on the mocked coprocessor seamlessly.

Using directly the library

Step 1: Setup the library

fhevmjs consists of multiple files, including WASM files and WebWorkers, which can make packaging these components correctly in your setup cumbersome. To simplify this process, especially if you're developing a dApp with server-side rendering (SSR), we recommend using our CDN.

Using UMD CDN

Include this line at the top of your project.

<script src="https://cdn.zama.ai/fhevmjs/0.6.2/fhevmjs.umd.cjs" type="text/javascript"></script>

In your project, you can use the bundle import if you install fhevmjs package:

import { initFhevm, createInstance } from "fhevmjs/bundle";

Using ESM CDN

If you prefer You can also use the fhevmjs as a ES module:

<script type="module">
  import { initFhevm, createInstance } from "https://cdn.zama.ai/fhevmjs/0.6.2/fhevmjs.js";

  await initFhevm();
  const instance = await createInstance({
    network: window.ethereum,
    kmsContractAddress: "0x9D6891A6240D6130c54ae243d8005063D05fE14b",
    aclContractAddress: "0xFee8407e2f5e3Ee68ad77cAE98c434e637f516e5",
    gatewayUrl: "https://gateway.sepolia.zama.ai",
  });
</script>

Using npm package

Install the fhevmjs library to your project:

# Using npm
npm install fhevmjs

# Using Yarn
yarn add fhevmjs

# Using pnpm
pnpm add fhevmjs
import { initFhevm, createInstance } from "fhevmjs";

Step 2: Initialize your project

import { initFhevm } from "fhevmjs/bundle";

const init = async () => {
  await initFhevm(); // Load needed WASM
};

Step 3: Create an instance

Once the WASM is loaded, you can now create an instance. An instance receives an object containing:

  • chainId (optional): the chainId of the network

  • network (optional): the Eip1193 object provided by window.ethereum (used to fetch the public key and/or chain id)

  • networkUrl (optional): the URL of the network (used to fetch the public key and/or chain id)

  • publicKey (optional): if the public key has been fetched separately (cache), you can provide it

  • gatewayUrl (optional): the URL of the gateway to retrieve a reencryption

  • coprocessorUrl (optional): the URL of the coprocessor

import { initFhevm, createInstance } from "fhevmjs/bundle";

const init = async () => {
  await initFhevm(); // Load TFHE
  return createInstance({
    kmsContractAddress: "0x9D6891A6240D6130c54ae243d8005063D05fE14b",
    aclContractAddress: "0xFee8407e2f5e3Ee68ad77cAE98c434e637f516e5",
    network: window.ethereum,
    gatewayUrl: "https://gateway.sepolia.zama.ai/",
  });
};

init().then((instance) => {
  console.log(instance);
});

fhevmjs uses ESM format. You need to set the . If your node project use "type": "commonjs" or no type, you can force the loading of the web version by using import { createInstance } from 'fhevmjs/web';

To use the library in your project, you need to load the WASM of first with initFhevm.

You can now use your instance to or do a .

this template
this template
this template
React template
type to "module" in your package.json
TFHE
encrypt parameters
reencryption