> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getlimelight.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Get Limelight running in your app in under 5 minutes

This guide covers **client-side** setup for React Native and React apps. Looking to add Limelight to your server? See the [Server-Side Setup](/server-side) guide.

## Installation

Install the Limelight SDK in your project:

<CodeGroup>
  ```bash npm theme={null}
  npm install @getlimelight/sdk
  ```

  ```bash yarn theme={null}
  yarn add @getlimelight/sdk
  ```

  ```bash pnpm theme={null}
  pnpm add @getlimelight/sdk
  ```

  ```bash bun theme={null}
  bun add @getlimelight/sdk
  ```
</CodeGroup>

## Basic Setup

Add one line to your app's entry point (`_layout.tsx`, `App.tsx`, `index.ts`, or similar):

```tsx theme={null}
import { Limelight } from "@getlimelight/sdk";

Limelight.connect();
```

That's it! Limelight will now start capturing:

* All network requests (fetch and XHR)
* Console logs with stack traces
* React component renders
* GraphQL operations with complexity scoring
* Automatic issue detection

<Tip>
  Want to also capture server-side requests? Add the [server-side
  middleware](/server-side) to your Express or Next.js app and Limelight will
  automatically trace requests across your full stack.
</Tip>

## Choose Your Debugging Experience

### Option 1: Desktop App (Recommended)

**Get started in 60 seconds with zero configuration:**

1. Download the Limelight desktop app for your platform
2. Launch the app
3. Run your React Native app with `Limelight.connect()`
4. Start debugging - data appears automatically!

<CardGroup cols={3}>
  <Card title="macOS" icon="apple" href="https://www.getlimelight.io/download">
    Download for Mac
  </Card>
</CardGroup>

**Why use the desktop app?**

* No sign-up required
* All data stays local
* Works offline
* Zero configuration

***

### Option 2: Web App

**Access your debugging dashboard from any browser:**

1. [Sign up](https://app.getlimelight.io/sign-up) for a free account
2. Go to **Organization Settings** and copy your project key
3. Add the key to your configuration:

```tsx theme={null}
import { Limelight } from "@getlimelight/sdk";

Limelight.connect({
  projectKey: "your-project-key-here",
});
```

4. Open your [dashboard](https://app.getlimelight.io) to view data in real-time

**Why use the web app?**

* Team collaboration
* Access from any device
* Debug across multiple devices simultaneously
* No installation required

***

### Option 3: Self-Hosted (Coming Soon)

Host Limelight on your own infrastructure for maximum control.

***

## Configuration

Customize Limelight's behavior with additional options:

```tsx theme={null}
import { Limelight } from "@getlimelight/sdk";

Limelight.connect({
  // Optional: Only required for hosted dashboard
  projectKey: "your-project-key",

  // Optional: Only enable in development (recommended)
  enabled: __DEV__,

  // Optional: Connect to custom server (advanced)
  serverUrl: "ws://192.168.1.100:8080",

  // Optional: Customize your app name
  appName: "MyAwesomeApp",

  // Optional: Disable specific features
  enableNetworkInspector: true,
  enableConsole: true,
  enableGraphQL: true,

  // Optional: Privacy controls
  disableBodyCapture: false, // Set true to skip request/response bodies
  beforeSend: (event) => {
    // Filter or modify events before sending
    return event;
  },
});
```

## Common Configurations

### Development Only

```tsx theme={null}
Limelight.connect({
  enabled: __DEV__, // Only runs in development mode
});
```

### Physical Device with Desktop App

If debugging on a physical device and want to use the Limelight desktop app you will need to explore post 8484 via a tunnel or just use the Limelight web app.

### Production-Safe with Hosted Dashboard

```tsx theme={null}
import { Limelight } from "@getlimelight/sdk";
import { LIMELIGHT_PROJECT_KEY } from "@env";

Limelight.connect({
  enabled: __DEV__,
  projectKey: LIMELIGHT_PROJECT_KEY,
  appName: "MyApp",
});
```

## Verify It's Working

Once connected, you should see:

* **Desktop App**: Data appears automatically in the app window
* **Hosted Dashboard**: Navigate to your project dashboard to see live data

Try making a network request or logging to console to verify everything is working:

```tsx theme={null}
console.log("Limelight is connected!");
fetch("https://api.github.com/users/octocat");
```

## Troubleshooting

### Not seeing data in desktop app?

1. Verify the desktop app is running
2. Check that `Limelight.connect()` is called in your app
3. Ensure `enabled` is not set to `false`

### Not seeing data in web app?

1. Verify your `projectKey` is correct (found in Organization Settings)
2. Check that you're logged into the correct account
3. Ensure `enabled` is not set to `false`
4. Check your internet connection

### Connection errors?

If you see WebSocket connection errors:

* **Desktop app**: Make sure the app is running on port 8484 (default)
* **Firewall**: Ensure your firewall isn't blocking WebSocket connections

### Need more help?

<CardGroup cols={2}>
  <Card title="GitHub Issues" icon="github" href="https://github.com/getlimelight/limelight-sdk/issues">
    Report a bug or request a feature
  </Card>
</CardGroup>