> ## Documentation Index
> Fetch the complete documentation index at: https://docs.userplane.io/llms.txt
> Use this file to discover all available pages before exploring further.
# SolidJS Integration
> Install Userplane in a SolidJS application using the CDN embed or programmatic script injection
This guide covers how to install Userplane in a SolidJS application built with Vite.
## Adding the script
The fastest way to add Userplane is the CDN embed. Add these two tags to the `` of your `index.html` at the project root:
```html theme={null}
```
Replace `YOUR_WORKSPACE_ID` with your workspace ID. You can copy the exact snippet with your ID pre-filled from **Workspace Settings > Domains** in the Userplane dashboard.
Vite serves `index.html` as the entry point for SolidJS SPAs, so any tags placed in `` load before the application mounts. Place the tags as early as possible — the Userplane script can only capture console logs and network requests that occur after it initializes.
## npm SDK
Use the npm SDK when you need programmatic control — triggering recordings from a button, attaching user metadata, or reading recording state.
### Installation
```bash npm theme={null}
npm install @userplane/sdk
```
```bash yarn theme={null}
yarn add @userplane/sdk
```
```bash pnpm theme={null}
pnpm add @userplane/sdk
```
```bash bun theme={null}
bun add @userplane/sdk
```
### Initialization
Create a `UserplaneProvider` component and wrap your app with it in `index.tsx`.
```tsx theme={null}
// src/providers/UserplaneProvider.tsx
import { onMount, ParentComponent } from 'solid-js';
import { initialize } from '@userplane/sdk';
const UserplaneProvider: ParentComponent = (props) => {
onMount(() => {
initialize({
workspaceId: import.meta.env.VITE_USERPLANE_WORKSPACE_ID,
});
});
return <>{props.children};
};
export default UserplaneProvider;
```
```tsx theme={null}
// src/index.tsx
import { render } from 'solid-js/web';
import UserplaneProvider from './providers/UserplaneProvider';
import App from './App';
render(
() => (
),
document.getElementById('root')!
);
```
SolidJS's `onMount` runs once after the component mounts in the browser, making it the equivalent of React's `useEffect(() => {}, [])`. Because Vite SolidJS apps are client-side rendered, a static import at the top of the file works — no dynamic `import()` or SSR guards are needed.
## SolidStart (SSR)
If you are using **SolidStart** (the SSR meta-framework), there is no raw `index.html`. Use a dynamic `import()` inside `onMount` to ensure the SDK only initializes in the browser:
```tsx theme={null}
// src/providers/UserplaneProvider.tsx
import { onMount, ParentComponent } from 'solid-js';
const UserplaneProvider: ParentComponent = (props) => {
onMount(async () => {
const { initialize } = await import('@userplane/sdk');
initialize({
workspaceId: import.meta.env.VITE_USERPLANE_WORKSPACE_ID,
});
});
return <>{props.children};
};
export default UserplaneProvider;
```
Mount the provider in your root layout at `src/app.tsx`.
| Concern | Safe? | Notes |
| ----------------------------------------------- | ----- | ------------------------- |
| Static `import` in a client-only SPA | Yes | No SSR involved |
| Dynamic `import()` in `onMount` with SolidStart | Yes | Runs browser-only |
| Calling `initialize()` during server render | No | `window` is not available |
SolidJS does not yet provide a built-in `