Docs

Learn how to connect Styra to your JavaScript and React applications. Get live control of feature flags, text, and variables in seconds.

What is Styra?

Styra is like a remote control for your website. It lets you change how your website looks and behaves without changing your code or doing a fresh redeployment.

Normally, if you want to turn on a promo banner, change a discount number, or toggle a new feature, you have to edit your code, push it to GitHub, and wait for your website to rebuild. With Styra, you write a simple function call in your JavaScript code once, and then you can change the values live from your Styra dashboard whenever you want!

Before vs After Styra

Traditional Way (Hardcoded)

// To change this value, you must 
// edit code and redeploy your app:
const isPromoActive = true;
const discount = 15;
 
if (isPromoActive) {
  showSaleBanner(discount);
}

Styra Way (Live Control)

// Value updates instantly from 
// your Styra dashboard!
const isPromo= await styra.getVariable(
                            "show_promo",
                                 false);


const discount = await styra.getVariable(
                          "sale_discount"
                                  ,  10);
 
if (isPromoActive) {
  showSaleBanner(discount);
}

Install the SDK

Step 1 — Install the SDK

One package, one install. It works whether your code runs in the browser or on your server — you'll just tell it which one in the next step.

terminal

bash

npm i styra-js@latest

Using yarn or pnpm? Same idea — yarn add @styra/sdk or pnpm add @styra/sdk both work fine.

Set up Styra

Setting up in the browser

If your code runs in a user's browser — a React component, a Next.js page, anything with a 'use client' at the top — this is the setup you want. Styra will quietly save values in the browser so it doesn't have to ask your dashboard every single time.

lib/styra.ts

import { Styra } from "styra-js";

export const styra = new Styra({
  apiKey: process.env.NEXT_PUBLIC_STYRA_KEY!,
  mode: "cs", // "cs" = client-side, runs in the browser
});

Configuration Settings

Name	Type	Required	Default	Description
apiKey	string	Yes	—	Your public key from the Styra dashboard. It's fine for this to be visible in your browser bundle — it only reads values, it can't write or delete.
mode	"cs" \| "ss"	Yes	—	Use "cs" anywhere your code runs in the browser.
cacheTTL	number (milliseconds)	No	300000 — that's 5 minutes	How long Styra trusts a saved value before checking the dashboard again. If your values don't change often, bump this up — fewer checks, faster app.

Seeing a "window is not defined" error? That usually means this code accidentally ran on the server. Make sure it's inside a component marked "use client".

Get Live Variables

Reading a variable

Got a value buried in your code that you wish you could change without redeploying? A discount percentage, a banner message, a feature switch? That's exactly what variables are for.

components/Banner.tsx

tsx

"use client";
import { useEffect, useState } from "react";
import { styra } from "@/lib/styra";

export function Banner() {
  const [message, setMessage] = useState("Welcome!");

  useEffect(() => {
    styra.getVariable("banner_message", "Welcome!")
      .then(setMessage);
  }, []);

  return <div className="banner">{message}</div>;
}

Arguments

Name	Type	Required	Description
key	string	Yes	The exact name of the variable you set up in your Styra dashboard.
defaultValue	any	No	What gets returned if something goes wrong — the network's down, the key doesn't exist yet, whatever. Always pass one of these. Think of it as your safety net.

First call talks to your dashboard. Every call after that — for a while — is read straight from the browser, instantly, no network needed.

Run A/B Tests

Showing different versions to different users

Want to try two versions of something and see which one wins? Styra picks a version for each visitor and remembers it — same person, same version, every time they come back.

components/Hero.tsx

tsx

"use client";
import { useEffect, useState } from "react";
import { styra } from "@/lib/styra";

export function Hero() {
  const [version, setVersion] = useState("control");

  useEffect(() => {
    styra.ab.getVersion("homepage_hero", "Test")
      .then(setVersion);
  }, []);

  return version === "Test"
    ? <h1>Welcome to our platform</h1>
    : <h1>Welcome all Baddies 😆.</h1>;
}

Arguments

Name	Type	Required	Description
abTestName	string	Yes	The test's name, exactly as you set it up in your dashboard.
defaultValue	any	Yes	What to show if something goes wrong or no test is currently active.

Tracking the results

Showing two versions is only half the job — you also need to tell Styra when something good happens, like a signup or a click, so it can tell you which version actually performed better.

components/Hero.tsx

tsx

function handleSignupClick() {
  styra.ab.track("homepage_hero");
  // ...continue with your signup flow
  // no need to use await
}

Arguments

Name	Type	Required	Description
abTestName	string	Yes	Has to match the name you used in getVersion().

Track Clicks & Signups

Tracking things that aren't part of a test

Not everything needs an A/B test attached. Sometimes you just want to know how often a button gets clicked or a feature gets used. That's what this is for — pick a name, track it.

components/ExportButton.tsx

tsx

function handleExportClick() {
  styra.event.track("clicked_export_csv");
  // continue with your export logic 
  // you might be thinking where is await , it's preffered not to use await. 
  // This helps to improve User Experience
}

Only counting it once per person

tsx

// e.g. "completed onboarding" should only ever count once
styra.event.track("completed_onboarding", true);

Arguments

Name	Type	Required	Default	Description
eventName	string	Yes	—	Any name you want. It'll show up in your dashboard exactly as you typed it.
unique	boolean	No	false	On = counted once per person, ever. Off = every single call gets counted.