Svelte

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

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

Installation

Try installing AppKit Skills to get AI-assisted guidance. Your AI coding assistant can help you set up, build, and debug your AppKit integration. To install AppKit Skills, run the following command in your terminal:

npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

Wagmi
Ethers
Solana
Bitcoin
TON

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

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

Cloud Configuration

Create a new project on Reown Dashboard and obtain a new project ID.

Don't have a project ID?

Head over to Reown Dashboard and create a new project.

Implementation

Wagmi
Ethers
Solana
Bitcoin
TON

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.

MetaMask does not currently support WalletConnect connections on Solana. The MetaMask team is working on adding this feature. In the meantime, we recommend using other wallets that support Solana. You can find the complete list of supported wallets on WalletGuide.

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.

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

// lib/appkit.ts
import { browser } from '$app/environment'
import { createAppKit } from '@reown/appkit'
import { TonAdapter } from '@reown/appkit-adapter-ton'
import { ton, tonTestnet } 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 = [ton, tonTestnet]

  // Create adapter
  const tonAdapter = new TonAdapter()

  // Initialize AppKit
  appKit = createAppKit({
    adapters: [tonAdapter],
    networks: [ton, tonTestnet],
    defaultNetwork: ton,
    projectId,
    metadata: {
      name: 'SvelteKit Example',
      description: 'SvelteKit Example using TON 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
TON

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>

To open AppKit you can use our web component or build your own button with AppKit actions. In this example we are going to use the <appkit-button> component.Web components are global html elements that don’t require importing.

<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>

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)
}

AppKit Skills

AppKit Skills provide AI-powered assistance for building with Reown AppKit. Once installed, your AI coding assistant can help you set up, build, and debug your AppKit integration. To install AppKit Skills, run the following command in your terminal:

npx skills add https://github.com/reown-com/skills --skill appkit --agent '*'

After installation, you can ask your AI assistant for help with AppKit setup, implementation, and troubleshooting.

Fundamentals

Authentication

Transactions

Installation

Svelte

Installation

Cloud Configuration

Don't have a project ID?

Implementation

Svelte Wagmi Example

Svelte Ethers Example

Alternative approaches

Blockchain Interaction

AppKit Skills

Fundamentals

Authentication

Transactions

Documentation Index

​Svelte

​Installation

​Cloud Configuration

Don't have a project ID?

​Implementation

Svelte Wagmi Example

Svelte Ethers Example

​Trigger the modal

​Alternative approaches

​Blockchain Interaction

​AppKit Skills

Svelte

Installation

Cloud Configuration

Implementation

Trigger the modal

Alternative approaches

Blockchain Interaction

AppKit Skills