Svelte

AppKit has support for Wagmi and Ethers v6 on Ethereum, @solana/web3.js on Solana, Bitcoin, TON and TRON. 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.

AppKit is only compatible with wagmi 2.x. Ensure you are using a compatible version.

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem

yarn add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem

bun add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem

pnpm add @reown/appkit @reown/appkit-adapter-wagmi wagmi@2.x viem

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

yarn add @reown/appkit @reown/appkit-adapter-ethers ethers

bun add @reown/appkit @reown/appkit-adapter-ethers ethers

pnpm add @reown/appkit @reown/appkit-adapter-ethers ethers

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

yarn add @reown/appkit @reown/appkit-adapter-solana

bun add @reown/appkit @reown/appkit-adapter-solana

pnpm add @reown/appkit @reown/appkit-adapter-solana

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

yarn add @reown/appkit @reown/appkit-adapter-bitcoin

bun add @reown/appkit @reown/appkit-adapter-bitcoin

pnpm add @reown/appkit @reown/appkit-adapter-bitcoin

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

yarn add @reown/appkit @reown/appkit-adapter-ton

bun add @reown/appkit @reown/appkit-adapter-ton

pnpm add @reown/appkit @reown/appkit-adapter-ton

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

yarn add @reown/appkit @reown/appkit-adapter-tron

bun add @reown/appkit @reown/appkit-adapter-tron

pnpm add @reown/appkit @reown/appkit-adapter-tron

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

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.

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

// lib/appkit.ts
import { browser } from '$app/environment'
import { createAppKit } from '@reown/appkit'
import { TronAdapter } from '@reown/appkit-adapter-tron'
import { tronMainnet } from '@reown/appkit/networks'

// Import wallet adapters you want to support
import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'

// 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 = [tronMainnet]

  // Create adapter with wallet adapters
  const tronAdapter = new TronAdapter({
    walletAdapters: [
      new TronLinkAdapter({
        openUrlWhenWalletNotFound: false,
        checkTimeout: 3000
      })
    ]
  })

  // Initialize AppKit
  appKit = createAppKit({
    adapters: [tronAdapter],
    networks,
    defaultNetwork: tronMainnet,
    projectId,
    metadata: {
      name: 'SvelteKit Example',
      description: 'SvelteKit Example using TRON 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.

Install Wallet Adapters

TRON adapter requires you to install wallet adapters separately. This gives you control over which wallets to support and reduces bundle size.

npm install @tronweb3/tronwallet-adapter-tronlink

yarn add @tronweb3/tronwallet-adapter-tronlink

bun add @tronweb3/tronwallet-adapter-tronlink

pnpm add @tronweb3/tronwallet-adapter-tronlink

npm install @tronweb3/tronwallet-adapter-metamask-tron

yarn add @tronweb3/tronwallet-adapter-metamask-tron

bun add @tronweb3/tronwallet-adapter-metamask-tron

pnpm add @tronweb3/tronwallet-adapter-metamask-tron

npm install @tronweb3/tronwallet-adapter-trust

yarn add @tronweb3/tronwallet-adapter-trust

bun add @tronweb3/tronwallet-adapter-trust

pnpm add @tronweb3/tronwallet-adapter-trust

npm install @tronweb3/tronwallet-adapter-okxwallet

yarn add @tronweb3/tronwallet-adapter-okxwallet

bun add @tronweb3/tronwallet-adapter-okxwallet

pnpm add @tronweb3/tronwallet-adapter-okxwallet

npm install @tronweb3/tronwallet-adapter-bitkeep

yarn add @tronweb3/tronwallet-adapter-bitkeep

bun add @tronweb3/tronwallet-adapter-bitkeep

pnpm add @tronweb3/tronwallet-adapter-bitkeep

npm install @tronweb3/tronwallet-adapter-binance

yarn add @tronweb3/tronwallet-adapter-binance

bun add @tronweb3/tronwallet-adapter-binance

pnpm add @tronweb3/tronwallet-adapter-binance

For a complete list of available TRON wallet adapters, visit the official wallet adapter documentation.

Using Multiple Wallet Adapters

After installing your desired wallet adapters, import and add them to the walletAdapters array when creating the TRON adapter:

import { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'
import { MetaMaskAdapter } from '@tronweb3/tronwallet-adapter-metamask-tron'
import { TrustAdapter } from '@tronweb3/tronwallet-adapter-trust'
import { OkxWalletAdapter } from '@tronweb3/tronwallet-adapter-okxwallet'

const tronAdapter = new TronAdapter({
  walletAdapters: [
    new TronLinkAdapter({
      openUrlWhenWalletNotFound: false,
      checkTimeout: 3000
    }),
    new MetaMaskAdapter(),
    new TrustAdapter(),
    new OkxWalletAdapter({
      openUrlWhenWalletNotFound: false
    })
  ]
})

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

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>

<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

yarn add @wagmi/core

bun a @wagmi/core

pnpm add @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

Features

Installation

Svelte

Installation

Cloud Configuration

Don't have a project ID?

Implementation

Svelte Wagmi Example

Svelte Ethers Example

Install Wallet Adapters

Using Multiple Wallet Adapters

Alternative approaches

Blockchain Interaction

AppKit Skills

​Svelte

​Installation

​Cloud Configuration

Don't have a project ID?

​Implementation

Svelte Wagmi Example

Svelte Ethers Example

​Install Wallet Adapters

​Using Multiple Wallet Adapters

​Trigger the modal

​Alternative approaches

​Blockchain Interaction

​AppKit Skills

Svelte

Installation

Cloud Configuration

Implementation

Install Wallet Adapters

Using Multiple Wallet Adapters

Trigger the modal

Alternative approaches

Blockchain Interaction

AppKit Skills