Install AppKit in a vanilla JS app

Install AppKit's core package, create an AppKit instance, and call actions such as connect, transferTon, sendTransaction, and the watch* subscribers directly on it.

Install packages

npm i @ton/appkit @tonconnect/ui @ton/core

Create the AppKit instance

Create the AppKit instance in a dedicated module. An empty configuration is enough to start — connectors, networks, and DeFi providers are added on the following pages.

// src/appkit.ts
import { AppKit } from '@ton/appkit';

export const appKit = new AppKit({});

Import the instance wherever a core action is called:

import { connect, getBalance, transferTon } from '@ton/appkit';
import { appKit } from './appkit';

await connect(appKit, { connectorId: 'tonconnect' });
const balance = await getBalance(appKit);
await transferTon(appKit, { recipientAddress, amount: '0.1' });

TanStack Query (optional)

The @ton/appkit/queries entry point exports framework-agnostic queryOptions and mutation helpers compatible with any TanStack adapter — @tanstack/vue-query, @tanstack/svelte-query, @tanstack/solid-query, and others. The same entry point backs @ton/appkit-react through @tanstack/react-query.

import { useQuery } from '@tanstack/react-query';
import { getBalanceQueryOptions } from '@ton/appkit/queries';

const { data } = useQuery(getBalanceQueryOptions(appKit, { address: '...' }));

Next steps