.Styra
Styra Docs

Introduction

Styra is a runtime configuration API for frontend apps. Control variables, feature flags, and content without redeploying.

example.ts
// Instead of:
const newCheckout = true;

// Use runtime config:
const newCheckout = config.variables.newCheckoutEnabled;

Installation (npm)

Install the client-Side SDK NPM.

terminal
npm install styra-sdk@latest

Add Environment Variables

Step 1

.env file
STYRA_API_KEY = your_project_api_key

Importing in your app

single line import

app.jsx / tsx
import { Styra } from "styra-sdk";

Initialize the SDK

Step 2

lib/styra.ts / app.jsx / tsx

const [variables, setVariables] = useState({});

useEffect(() => {
  const styra = new Styra({ apiKey: STYRA_API_KEY });

  styra
    .getVariables()
    .then(res => setVariables(res.variables))
    .catch(err => console.error("Styra error:", err));
}, []);

Methods

The SDK exposes three primary methods.

methods.ts
styra.getVariables()  // Promise<{ variables }>
styra.getComponents() // Promise<{ components }>
styra.getAll()        // Promise<{ variables, components }>

Using Styra for Feature Flags

Toggle features remotely without redeploying your application.

components/Checkout.tsx
const { variables } = await styra.getVariables();

if (variables.newCheckoutEnabled) {
  return <NewCheckout />;
}

return <LegacyCheckout />;