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.

Note

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.

Warning

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

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

npm install @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.tsimport { 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 environmentlet appKit: ReturnType<typeof createAppKit> | undefined = undefinedif (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 }

Note

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

Note

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.tsimport { 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 environmentlet appKit: ReturnType<typeof createAppKit> | undefined = undefinedif (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 }

Note

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

Note

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

Warning

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.tsimport { 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 environmentlet appKit: ReturnType<typeof createAppKit> | undefined = undefinedif (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 }

Note

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

Note

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.tsimport { 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 environmentlet appKit: ReturnType<typeof createAppKit> | undefined = undefinedif (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 }

Note

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

Note

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.tsimport { 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 environmentlet appKit: ReturnType<typeof createAppKit> | undefined = undefinedif (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 }

Note

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

Note

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.tsimport { 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 supportimport { TronLinkAdapter } from '@tronweb3/tronwallet-adapter-tronlink'// Only initialize in browser environmentlet appKit: ReturnType<typeof createAppKit> | undefined = undefinedif (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 }

Note

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

Note

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

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

npm install @tronweb3/tronwallet-adapter-trust

npm install @tronweb3/tronwallet-adapter-okxwallet

npm install @tronweb3/tronwallet-adapter-bitkeep

npm install @tronweb3/tronwallet-adapter-binance

Note

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>

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#

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.

Svelte#

Installation#

Cloud Configuration#

Implementation#

Install Wallet Adapters#

Using Multiple Wallet Adapters#

Trigger the modal#

Alternative approaches#

Blockchain Interaction#

AppKit Skills#