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

# Quickstart

> Create your first flag and evaluate it from an SDK.

This guide takes you from zero to a flag you can read in your app.

## Prerequisites

* A [Softlaunch account](https://app.softlaunch.so)
* Node.js 18 or later for the SDK examples

## Create a flag

<Steps>
  <Step title="Sign in">
    Open the [dashboard](https://app.softlaunch.so). A new account starts with an organization and two environments, **Production** and **Staging**.
  </Step>

  <Step title="Create a flag">
    Create a flag named `checkout-redesign` with the **boolean** type. Boolean flags return `true` or `false` — the simplest way to gate a feature.
  </Step>

  <Step title="Enable it">
    In an environment, turn the flag on and choose the variation it serves. Changes take effect for connected SDKs in real time.
  </Step>
</Steps>

## Get your SDK key

Every environment has its own SDK keys. Open the **Environments** page and copy a key:

* A **client key** (prefix `slc_`) is safe to ship in browsers, mobile apps, and other public clients.
* A **server key** (prefix `sls_`) is for trusted backends only.

Use the client key for the examples below.

<Note>
  Keep server keys secret. Only client keys belong in code that runs on a user's device.
</Note>

## Evaluate the flag

Install an SDK and read the flag. You always pass a **default value** — the SDK returns it while the configuration is loading, if the flag is missing, or if its type doesn't match.

<Tabs>
  <Tab title="React">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @softlaunch/react
      ```

      ```bash pnpm theme={null}
      pnpm add @softlaunch/react
      ```

      ```bash yarn theme={null}
      yarn add @softlaunch/react
      ```
    </CodeGroup>

    Wrap your app in the provider, then read the flag with a hook:

    ```tsx theme={null}
    import { SoftlaunchProvider, useBooleanFlag } from "@softlaunch/react";

    function App() {
      return (
        <SoftlaunchProvider sdkKey="slc_...">
          <Checkout />
        </SoftlaunchProvider>
      );
    }

    function Checkout() {
      const { value: showRedesign } = useBooleanFlag(
        "checkout-redesign", // flag key
        "user-123", // subject key (a stable user identifier)
        { plan: "pro" }, // attributes used for targeting
        false, // default value
      );

      return showRedesign ? <NewCheckout /> : <OldCheckout />;
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @softlaunch/js
      ```

      ```bash pnpm theme={null}
      pnpm add @softlaunch/js
      ```

      ```bash yarn theme={null}
      yarn add @softlaunch/js
      ```
    </CodeGroup>

    Initialize a client, then read the flag:

    ```ts theme={null}
    import { init } from "@softlaunch/js";

    const client = init({ sdkKey: "slc_..." });
    await client.waitUntilReady();

    const showRedesign = client.getBooleanFlag(
      "checkout-redesign", // flag key
      "user-123", // subject key (a stable user identifier)
      { plan: "pro" }, // attributes used for targeting
      false, // default value
    );

    if (showRedesign) {
      renderNewCheckout();
    }
    ```
  </Tab>
</Tabs>

## Next steps

<CardGroup cols={2}>
  <Card title="Core concepts" icon="book-open" href="/concepts/feature-flags">
    Learn about flag types, environments, and targeting.
  </Card>

  <Card title="SDK reference" icon="code" href="/sdks/overview">
    Explore the full SDK API and available methods.
  </Card>
</CardGroup>