Quickstart

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

Prerequisites

A Softlaunch account
Node.js 18 or later for the SDK examples

Create a flag

Open the dashboard. A new account starts with an organization and two environments, Production and Staging.

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.

Enable it

In an environment, turn the flag on and choose the variation it serves. Changes take effect for connected SDKs in real time.

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.

Keep server keys secret. Only client keys belong in code that runs on a user’s device.

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.

React
JavaScript

npm install @softlaunch/react

pnpm add @softlaunch/react

yarn add @softlaunch/react

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

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 />;
}

npm install @softlaunch/js

pnpm add @softlaunch/js

yarn add @softlaunch/js

Initialize a client, then read the flag:

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();
}

Get started

Core concepts

SDKs

CLI

Prerequisites

Create a flag

Get your SDK key

Evaluate the flag

Next steps

Core concepts

SDK reference

​Prerequisites

​Create a flag

​Get your SDK key

​Evaluate the flag

​Next steps

Core concepts

SDK reference

Prerequisites

Create a flag

Get your SDK key

Evaluate the flag

Next steps