Choosing a Package
Which Oviato package to install — @oviato/sdk or @oviato/connect — and which imports to use.
Oviato ships one SDK, two packages. Pick based on your framework; the API surface is identical under the hood.
TL;DR
Install @oviato/connect.
pnpm add @oviato/connectImport everything from @oviato/connect (for actions) or @oviato/connect/client (for React hooks + components).
// Actions — re-exports all of @oviato/sdk
import { evm, utxo, sendTransfer, signMessage } from '@oviato/connect';
// React hooks + components
import { OviConnectProvider, useOviConnect, ConnectButton } from '@oviato/connect/client';Install @oviato/sdk.
pnpm add @oviato/sdkImport directly.
import { evm, utxo, sendTransfer, signMessage, initialize, login } from '@oviato/sdk';Works with Vue, Svelte, Angular, Solid, vanilla JS, Node, Deno, Bun.
What's in each package
@oviato/sdk — the framework-agnostic core. Contains everything:
- Authentication (
login,register,authenticate) - Chain-agnostic actions (
signMessage,sendTransfer,switchNetwork,getBalance) - EVM-specific surface (
evm.*— reads, writes, typed data, receipts) - UTXO-specific surface (
utxo.*— PSBT signing) - RPC client (
rpc,rpcRequest) - x402 payments (
x402) - Types + bigint helpers
Runtime dep: zustand only. ~11 KB gzipped.
@oviato/connect — @oviato/sdk + React bindings on top. Two entry points:
@oviato/connect— re-exports 100% of@oviato/sdk. Nothing new.@oviato/connect/client— addsOviConnectProvider,useOviConnect,useOviStore,ConnectButton,Connect(React 18+).
Because @oviato/connect re-exports everything from @oviato/sdk, a React
dev never needs to install both. One package, everything on hand.
The one confusion we want to squash
You will see both @oviato/sdk and @oviato/connect in code samples on other sites and in GitHub issues. They're the same API. The function names, parameters, and return shapes are identical — @oviato/connect is a pass-through.
In this documentation we use @oviato/connect in examples by default (React is our primary audience). Swap to @oviato/sdk if you're using a different framework. Nothing else changes.
Do not install both packages. @oviato/connect already depends on
@oviato/sdk and re-exports everything. Installing both leads to duplicate
module instances and subtle state-sharing bugs — the Zustand store lives in
@oviato/sdk's module scope, and two copies mean two stores.
Import cheat sheet
Use this as a reminder when copy-pasting from mixed sources:
| You need… | @oviato/connect (React) | @oviato/sdk (any framework) |
|---|---|---|
Auth (login, register, authenticate) | @oviato/connect | @oviato/sdk |
Session (getSession, clearSession) | @oviato/connect | @oviato/sdk |
Chain-agnostic actions (sendTransfer, signMessage) | @oviato/connect | @oviato/sdk |
EVM namespace (evm.*) | @oviato/connect | @oviato/sdk |
UTXO namespace (utxo.*) | @oviato/connect | @oviato/sdk |
RPC client (rpc, rpcRequest) | @oviato/connect | @oviato/sdk |
x402 payments (x402) | @oviato/connect | @oviato/sdk |
| Types, bigint helpers | @oviato/connect | @oviato/sdk |
| React provider, hooks, components | @oviato/connect/client | not available |
Bundle sizes
@oviato/sdk— ~11 KB gzipped (ESM)@oviato/connect(re-export entry) — thin layer over@oviato/sdk, ~12 KB gzipped@oviato/connect/client— adds React components, ~14 KB gzipped
All entry points are tree-shakeable — only imported functions ship.
CDN usage (SDK only)
For quick prototypes without a build step, load @oviato/sdk from a CDN:
<script src="https://cdn.jsdelivr.net/npm/@oviato/sdk@latest/dist/oviato.min.js"></script>
<script>
const { initialize, login, evm } = OviatoSDK;
await initialize({ appId: 'your-app-id' });
</script>The CDN bundle is UMD — everything is under the global OviatoSDK. Not recommended for production.
Next steps
- Quickstart — ship a working sign-in in 10 minutes
- Core Concepts — passkey flow, session scope, popup-vs-iframe, nonce tracker
- Chain-Agnostic → Overview — methods that work across BTC + EVM