Packages
Packages
Copy page
The Lia SDK as npm packages. A typed bridge, a tree-shakeable SDK, and bindings for React, Preact, Vue, Svelte, Solid, Angular and web components.
The script tag is the quickest way in. If your app has a build step, the npm packages give you the same SDK with TypeScript types, imports you can tree-shake, state that fits your framework, and a pretend Lia for building outside the app.
#Which package
| Package | Use it for |
|---|---|
@lia-labs/sdk | Any app with a bundler, with or without a framework. |
@lia-labs/sdk-react | React: hooks like useInit, useMainButton, useBackButton. |
@lia-labs/sdk-preact | Preact: the same hooks. |
@lia-labs/sdk-vue | Vue 3: composables returning refs. |
@lia-labs/sdk-svelte | Svelte 4 and 5: stores. |
@lia-labs/sdk-solid | Solid: accessors and create* primitives. |
@lia-labs/sdk-angular | Angular 17 and later: inject* functions and signals. |
@lia-labs/elements | Any page, no framework: <lia-main-button> and friends. |
@lia-labs/bridge | The low level messages, for building your own layer. |
Each framework package re-exports the whole SDK, so one import is enough:
npm install @lia-labs/sdk @lia-labs/sdk-reactimport { pay, useInit, useMainButton } from '@lia-labs/sdk-react';#How they fit
- @lia-labs/bridgeLia's frame messages, typed:
request('pay', { productId }),on('theme', …). AndmockLia(), a pretend Lia for building in a desktop browser. - @lia-labs/sdkEvery feature as a named export (
init,pay,mainButton,cloudStorage…), with the same checks and error codes as the script tag. Its state (theme, language, viewport…) is a set of small observable values. - Framework packagesThin: they turn those values into hooks, refs, stores or signals, and tie Lia's buttons to your components, shown while mounted and hidden after.
#State you can watch
The SDK's state is a set of Readable values: get() reads one now, and subscribe(listener) hears each change (with the new and old value) and returns a function that stops listening. They update from Lia's events after init().
| Value | Type |
|---|---|
player | { id, name } or null before init() |
mode | "test", "live" or null |
language, rtl | The person's language in Lia, and whether it reads right to left |
colorScheme, themeParams | "light" or "dark", and Lia's colours |
viewport | { height, expanded } |
safeArea, contentSafeArea | { top, bottom, left, right } in px |
display, isFullscreen | How the app opened, and whether it's edge to edge |
startParam | What it was opened with, kept current while open |
soundOn, notificationsAllowed, notificationsAvailable | The person's choices |
initialized | Whether init() has answered |
Each framework package has a matching hook, composable, store or signal for each.
#The script tag still works
https://api.lialabs.org/sdk/lia-apps-v1.js (the global Lia) is unchanged. Use it or the packages on a page, not both: both listen for Lia's answers on the same channel, and the second one to load can't.
#Versions
The packages speak the protocol of SDK 1.6.0. A Lia app older than a feature answers unknown_method; see the changelog.