AppKit overview
AppKit is an open-source SDK for integrating TON into React and JavaScript/TypeScript decentralized applications and Telegram Mini Apps.
With AppKit, you have a single place to configure networks, wallet connectors, DeFi providers, and React integration around GRAM wallet operations. It also includes an out-of-the-box UI with sub-second updates.
Use AppKit to do the following:
- Connect a GRAM wallet
- Send Gram and jettons, work with NFTs
- Request swap, staking, or signing operations
- Read wallet data and asset balances
An application built with AppKit can interact with your own smart contract. To create a contract, use Acton and explore primitives, such as Messages & transactions and others.
How it works
This is how AppKit fits into the TON ecosystem:
- AppKit prepares requests, tracks application state, and bridges the application interface to wallets and providers.
- Wallets sign transactions and data.
- Backends verify orders, signatures, and business rules.
AppKit is the user-facing layer of the connection between applications and wallets. Its wallet-side counterpart is WalletKit — an SDK integrating wallet services with TON.
AppKit builds on top of the following components:
- TON Connect: A protocol enabling interaction between applications and wallets
- TanStack Query and hooks
- TON Center API, TON Center Streaming API v2
- Open interfaces for integrating embedded wallets, on-chain/off-chain on-ramps, and DeFi protocols, such as staking and swaps
AppKit integrates with DeFi protocols through providers.
Section overview
| Goal | Read |
|---|---|
| Add AppKit to a new app | Get started guides |
| Understand the moving parts | How-to guides |
| Look up functions and types | Reference |
| Diagnose common issues | FAQ and troubleshooting |
| Check upgrade notes | Changelog |
Packages
| Package | Use |
|---|---|
@ton/appkit | Core AppKit instance, actions, connectors, providers, and types |
@ton/appkit/queries | Query and mutation helpers for data fetching |
@ton/appkit-react | React provider, hooks, components, and core re-exports |
@ton/appkit-react/styles.css | Default component styles |
@ton/appkit/swap/omniston | Omniston swap provider |
@ton/appkit/swap/dedust | DeDust swap provider |
@ton/appkit/staking/tonstakers | Tonstakers staking provider |
Examples
The appkit-minter example wires AppKit into a Vite + React application.
This example implements wallet connection, balance and jetton queries, transaction sending, and streaming watches in one place.
Next steps
- Walk through Get started guides to install AppKit and reach a working app.
- Switch to How-to guides for task-level recipes once the baseline is in place.
- Look up types and signatures in Reference.