Svelte

AppKit has support for Wagmi and Ethers v6 on Ethereum, @solana/web3.js on Solana and Bitcoin. Choose one of these to get started.

We recommend using SvelteKit v5 to get started with AppKit Svelte.

Installation

Wagmi
Ethers
Solana
Bitcoin

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem

npm install @reown/appkit @reown/appkit-adapter-ethers ethers

npm install @reown/appkit @reown/appkit-adapter-solana

npm install @reown/appkit @reown/appkit-adapter-bitcoin

Cloud Configuration

Create a new project on Reown Dashboard at https://dashboard.reown.com and obtain a new project ID.

Don’t have a project ID?Head over to Reown Dashboard and create a new project now!

Get started

Implementation

Wagmi
Ethers
Solana
Bitcoin

Svelte Wagmi Example

Check the Svelte Wagmi example

For this example, we’ll be using Wagmi and Viem.Start by importing createAppKit from @reown/appkit and the necessary chains and WagmiAdapter from @reown/appkit-adapter-wagmi.

// lib/appkit.ts
import { browser } from '$app/environment'
import { createAppKit } from '@reown/appkit'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { arbitrum, mainnet } from '@reown/appkit/networks'

// Only initialize in browser environment
let appKit: ReturnType<typeof createAppKit> | undefined = undefined

if (browser) {
  const projectId = import.meta.env.VITE_PROJECT_ID
  if (!projectId) {
    throw new Error('VITE_PROJECT_ID is not set')
  }

  const networks = [arbitrum, mainnet]

  // Create adapter
  const wagmiAdapter = new WagmiAdapter({
    networks,
    projectId
  })

  // Initialize AppKit
  appKit = createAppKit({
    adapters: [wagmiAdapter],
    networks: [arbitrum, mainnet],
    defaultNetwork: arbitrum,
    projectId,
    metadata: {
      name: 'SvelteKit Example',
      description: 'SvelteKit Example using Wagmi adapter',
      url: 'https://reown.com/appkit',
      icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
    }
  })
}

export { appKit }

Make sure to set your VITE_PROJECT_ID environment variable which you can get from Reown Dashboard.

The browser check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit’s SSR compatibility.

Then import this configuration in your app layout to ensure AppKit is initialized:

<!-- src/routes/+layout.svelte -->
<script>
  import '$lib/appkit';
</script>

Svelte Ethers Example

Check the Svelte Ethers example

For this example, we’ll be using Ethers.Start by importing createAppKit from @reown/appkit and the necessary chains and EthersAdapter from @reown/appkit-adapter-ethers.

// lib/appkit.ts
import { browser } from '$app/environment'
import { createAppKit } from '@reown/appkit'
import { EthersAdapter } from '@reown/appkit-adapter-ethers'
import { arbitrum, mainnet } from '@reown/appkit/networks'

// Only initialize in browser environment
let appKit: ReturnType<typeof createAppKit> | undefined = undefined

if (browser) {
  const projectId = import.meta.env.VITE_PROJECT_ID
  if (!projectId) {
    throw new Error('VITE_PROJECT_ID is not set')
  }

  const networks = [arbitrum, mainnet]

  // Create adapter
  const ethersAdapter = new EthersAdapter()

  // Initialize AppKit
  appKit = createAppKit({
    adapters: [ethersAdapter],
    networks: [arbitrum, mainnet],
    defaultNetwork: arbitrum,
    projectId,
    metadata: {
      name: 'SvelteKit Example',
      description: 'SvelteKit Example using Ethers adapter',
      url: 'https://reown.com/appkit',
      icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
    }
  })
}

export { appKit }

Make sure to set your VITE_PROJECT_ID environment variable which you can get from Reown Dashboard.

The browser check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit’s SSR compatibility.

For this example, we’ll be using Solana.Start by importing createAppKit from @reown/appkit and the necessary chains and SolanaAdapter from @reown/appkit-adapter-solana.

// lib/appkit.ts
import { browser } from '$app/environment'
import { createAppKit } from '@reown/appkit'
import { SolanaAdapter } from '@reown/appkit-adapter-solana'
import { solana, solanaTestnet, solanaDevnet } from '@reown/appkit/networks'

// Only initialize in browser environment
let appKit: ReturnType<typeof createAppKit> | undefined = undefined

if (browser) {
  const projectId = import.meta.env.VITE_PROJECT_ID
  if (!projectId) {
    throw new Error('VITE_PROJECT_ID is not set')
  }

  const networks = [solana, solanaTestnet, solanaDevnet]

  // Create adapter
  const solanaAdapter = new SolanaAdapter()

  // Initialize AppKit
  appKit = createAppKit({
    adapters: [solanaAdapter],
    networks: [solana, solanaTestnet, solanaDevnet],
    defaultNetwork: solana,
    projectId,
    metadata: {
      name: 'SvelteKit Example',
      description: 'SvelteKit Example using Solana adapter',
      url: 'https://reown.com/appkit',
      icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
    }
  })
}

export { appKit }

Make sure to set your VITE_PROJECT_ID environment variable which you can get from Reown Dashboard.

The browser check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit’s SSR compatibility.

For this example, we’ll be using Bitcoin.Start by importing createAppKit from @reown/appkit and the necessary chains and BitcoinAdapter from @reown/appkit-adapter-bitcoin.

// lib/appkit.ts
import { browser } from '$app/environment'
import { createAppKit } from '@reown/appkit'
import { BitcoinAdapter } from '@reown/appkit-adapter-bitcoin'
import { bitcoin, bitcoinTestnet, bitcoinSignet } from '@reown/appkit/networks'

// Only initialize in browser environment
let appKit: ReturnType<typeof createAppKit> | undefined = undefined

if (browser) {
  const projectId = import.meta.env.VITE_PROJECT_ID
  if (!projectId) {
    throw new Error('VITE_PROJECT_ID is not set')
  }

  const networks = [bitcoin, bitcoinTestnet, bitcoinSignet]

  // Create adapter
  const bitcoinAdapter = new BitcoinAdapter()

  // Initialize AppKit
  appKit = createAppKit({
    adapters: [bitcoinAdapter],
    networks: [bitcoin, bitcoinTestnet, bitcoinSignet],
    defaultNetwork: bitcoin,
    projectId,
    metadata: {
      name: 'SvelteKit Example',
      description: 'SvelteKit Example using Bitcoin adapter',
      url: 'https://reown.com/appkit',
      icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
    }
  })
}

export { appKit }

Make sure to set your VITE_PROJECT_ID environment variable which you can get from Reown Dashboard.

The browser check ensures AppKit is only initialized in the browser environment, which is important for SvelteKit’s SSR compatibility.

The recommended way to trigger the modal in Svelte is to use the <appkit-button /> web component. After setting up AppKit in your application, you can simply use the button component anywhere in your Svelte templates:

<script lang="ts">
  // Import your AppKit configuration to ensure it's initialized
  import '$lib/appkit';
</script>

<main>
  <h1>Svelte + AppKit Integration</h1>
  
  <div class="card">
    <appkit-button />
  </div>
</main>

The <appkit-button /> is a web component that’s automatically registered when AppKit is initialized. No additional imports are required.

Alternative approaches

You can also trigger the modal programmatically using the AppKit instance:

<script lang="ts">
  import { appKit } from '$lib/appkit';

  function openModal() {
    appKit?.open();
  }

  function openConnectModal() {
    appKit?.open({ view: 'Connect' });
  }

  function openAccountModal() {
    appKit?.open({ view: 'Account' });
  }
</script>

<button on:click={openModal}>Open Modal</button>
<button on:click={openConnectModal}>Connect Wallet</button>
<button on:click={openAccountModal}>View Account</button>

Or use other AppKit web components:

<appkit-connect-button />
<appkit-account-button />
<appkit-network-button />

Wagmi
Ethers
Solana
Bitcoin

The recommended way to trigger the modal is using the initializeAppKit function and web components:

<script lang="ts">
  import { initializeAppKit } from './lib/stores/appkit';

  // Initialize AppKit with your project ID
  initializeAppKit('YOUR_PROJECT_ID');
</script>

<main>
  <appkit-button />
</main>

You can also trigger the modal programmatically by calling the open method from AppKit instance:

<!-- +page.svelte -->
<script>
  import { appKit } from '$lib/appkit'
  
  function openModal() {
    appKit?.open()
  }
</script>

<button on:click={openModal}>Open Modal</button>

You can select the modal’s view when calling the open function:

<script>
  import { appKit } from '$lib/appkit'
  
  function openConnectModal() {
    appKit?.open({ view: 'Connect' })
  }
  
  function openAccountModal() {
    appKit?.open({ view: 'Account' })
  }
</script>

<button on:click={openConnectModal}>Connect Wallet</button>
<button on:click={openAccountModal}>View Account</button>

You can trigger the modal by calling the open method from AppKit instance.

<!-- +page.svelte -->
<script>
  import { appKit } from '$lib/appkit'
  
  function openModal() {
    appKit?.open()
  }
</script>

<button on:click={openModal}>Open Modal</button>

You can also select the modal’s view when calling the open function.

<script>
  import { appKit } from '$lib/appkit'
  
  function openConnectModal() {
    appKit?.open({ view: 'Connect' })
  }
  
  function openAccountModal() {
    appKit?.open({ view: 'Account' })
  }
</script>

<button on:click={openConnectModal}>Connect Wallet</button>
<button on:click={openAccountModal}>View Account</button>

You can trigger the modal by calling the open method from AppKit instance.

<!-- +page.svelte -->
<script>
  import { appKit } from '$lib/appkit'
  
  function openModal() {
    appKit?.open()
  }
</script>

<button on:click={openModal}>Open Modal</button>

You can also select the modal’s view when calling the open function.

<script>
  import { appKit } from '$lib/appkit'
  
  function openConnectModal() {
    appKit?.open({ view: 'Connect' })
  }
  
  function openAccountModal() {
    appKit?.open({ view: 'Account' })
  }
</script>

<button on:click={openConnectModal}>Connect Wallet</button>
<button on:click={openAccountModal}>View Account</button>

You can trigger the modal by calling the open method from AppKit instance.

<!-- +page.svelte -->
<script>
  import { appKit } from '$lib/appkit'
  
  function openModal() {
    appKit?.open()
  }
</script>

<button on:click={openModal}>Open Modal</button>

You can also select the modal’s view when calling the open function.

<script>
  import { appKit } from '$lib/appkit'
  
  function openConnectModal() {
    appKit?.open({ view: 'Connect' })
  }
  
  function openAccountModal() {
    appKit?.open({ view: 'Account' })
  }
</script>

<button on:click={openConnectModal}>Connect Wallet</button>
<button on:click={openAccountModal}>View Account</button>

Blockchain Interaction

Wagmi
Ethers

You need to install @wagmi/core to interact with smart contracts:

npm install @wagmi/core

Wagmi actions can help us interact with wallets and smart contracts:For this use case, we need to import the wagmiConfig from our AppKit WagmiAdapter configuration.

import { readContract } from "@wagmi/core";
import { USDTAbi } from "../abi/USDTAbi";

const USDTAddress = "0x...";

const data = readContract(wagmiConfig, {
  address: USDTAddress,
  abi: USDTAbi,
  functionName: "totalSupply",
  args: [],
});

Read more about Wagmi actions for smart contract interaction here.

Ethers can help us interact with wallets and smart contracts:

import { BrowserProvider, Contract, parseEther } from "ethers";

const provider = await appKit.subscribeProviders((state) => {
  return state["eip155"];
});

const addressFrom = await appKit.subscribeAccount((state) => {
  return state;
});

if (!provider) throw Error("No provider found");
if (!addressFrom) throw Error("No address found");

function sendTransaction() {
  const tx = {
    from: addressFrom,
    to: "0x...", // any address
    value: parseEther("0.0001"),
  };
  const ethersProvider = new BrowserProvider(provider);
  const signer = await ethersProvider.getSigner();
  const tx = await signer.sendTransaction(tx);
  console.log("transaction:", tx);
}

Fundamentals

Authentication

Transactions

Installation

Svelte

Installation

Cloud Configuration

Get started

Implementation

Svelte Wagmi Example

Svelte Ethers Example

Alternative approaches

Blockchain Interaction

Fundamentals

Authentication

Transactions

Documentation Index

​Svelte

​Installation

​Cloud Configuration

Get started

​Implementation

Svelte Wagmi Example

Svelte Ethers Example

​Trigger the modal

​Alternative approaches

​Blockchain Interaction

Svelte

Installation

Cloud Configuration

Implementation

Trigger the modal

Alternative approaches

Blockchain Interaction