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

Package	Use
@ton/appkit	Core runtime: actions, connectors, types.
@tonconnect/ui	TON Connect transport used by the TonConnect connector.
@ton/core	TON address and cell primitives.

Complete the Preparation step first. The Buffer polyfill it sets up is required for AppKit to run in the browser.

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

Connectors

Register wallet connectors on the AppKit instance and open the connect flow.

Sending transactions

Call transferTon, transferJetton, and sendTransaction from the AppKit core.