# Tronic JavaScript SDK
[](https://github.com/tronicapp/tronic-js/actions/workflows/test.yml)
> The Tronic JavaScript SDK empowers developers to provide frictionless web3 onboarding to their end-users while preserving their security and privacy using non-custodial wallets.
License ·
Changelog ·
Contributing Guide
## 📖 Documentation
- **[Configuration Guide](./CONFIGURATION.md)** - Complete setup and configuration options
- **[Usage Examples](./EXAMPLES.md)** - Practical examples for all features
- **[API Reference](./src/index.ts)** - Full TypeScript API documentation
- **[Changelog](./CHANGELOG.md)** - Version history and migration guides
- **[Quality Audit](./QUALITY_AUDIT.md)** - Technical architecture and metrics
## ⚡️ Quick Start
### Installation
Integrating your app with Tronic will require our client-side NPM package:
```bash
# Via NPM:
npm install --save tronic-sdk # If you're targeting web browsers
# Via Yarn:
yarn add tronic-sdk # If you're targeting web browsers
```
Alternatively, you can load via CDN by adding a script tag to your app's ``:
```html
```
### Usage
Sign up or log in to the [developer dashboard](https://console.tronic.app) to receive API keys that will allow your application to interact with Tronic's APIs.
```ts
import { Tronic } from '@tronic/tronic-sdk';
const tronic = new Tronic('YOUR_API_KEY', { endpoint: 'https://your-endpoint.tronic.app' });
await tronic.wallet.showUI();
```
### View Management
The SDK provides methods to control the iframe visibility:
```ts
// Show the iframe
await tronic.view.showView();
// Hide the iframe
await tronic.view.hideView();
// Toggle iframe visibility
await tronic.view.toggleVisibility();
// Check if the view is currently visible
const isVisible = tronic.view.isViewVisible();
```
## 📦 Package Ecosystem
### Entry points
These are packages _you_ can install to enable Tronic JS SDK functionality for your client-side application.
| Package Name | Changelog | Description |
| -------------------------------------------------------- | ----------------------------------------------- | --------------------------------------- |
| [`tronic-sdk`](https://www.npmjs.com/package/tronic-sdk) | [CHANGELOG](./packages/tronic-sdk/CHANGELOG.md) | Web/browser entry-point for Tronic SDK. |
## Extensions
Extend Tronic JS SDK functionality for your use-case through custom extension packages.
### Internals
These are packages Tronic JS SDK uses internally to work seamlessly across platforms.
| Package Name | Changelog | Description |
| -------------------------------------------------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| [`@tronic/types`](https://www.npmjs.com/package/@tronic/types) | [CHANGELOG](./packages/@tronic/types/CHANGELOG.md) | Core typings shared between JavaScript entry-points of Tronic SDK. |
| [`@tronic/provider`](https://www.npmjs.com/package/@tronic/provider) | [CHANGELOG](./packages/@tronic/provider/CHANGELOG.md) | Core business logic shared between JavaScript entry-points of Tronic SDK. |
| [`@tronic/commons`](https://www.npmjs.com/package/@tronic/commons) | [CHANGELOG](./packages/@tronic/commons/CHANGELOG.md) | Exposes a listing of common public APIs from `@tronic/provider` and `@tronic/types` to the platform-specific entry points. |
| [`@tronic/types`](https://www.npmjs.com/package/@tronic/types) | [CHANGELOG](./packages/@tronic/types/CHANGELOG.md) | Core typings for Tronic SDK packages. |
## 🚦 Testing
Run tests for all packages
```bash
yarn test
```
Test an individual package
```bash
PKG=tronic-sdk yarn test
```
Test specific files
```bash
yarn test /test/**/constructor.spec.ts
```