Skip to main content

​
Overview

The @flagsync/cli generates TypeScript type definitions based on your flag configurations.

npm

Latest version available on npm

GitHub

Explore the source code on GitHub

​
Installation

Install the CLI with your preferred package manager: 
npm install -D @flagsync/cli

​
Quickstart

  1. Authenticate with your FlagSync account:
terminal
npx flagsync login
  1. Generate type definitions:
terminal
$ npx flagsync generate

✓ Select your SDK: React
i Found 4 flags
✓ Generated flag types, saved to "gen/flags.d.ts"
  1. Use in your code:
app.jsx
import React from 'react';
import { useFlag } from '@flagsync/react-sdk';

function MyComponent() {
  // TypeScript knows this returns a boolean
  const { value: isEnabled } = useFlag('show-new-feature');

  // TypeScript knows this returns "light" | "dark" | "auto"
  const { value: theme } = useFlag('theme-preference');

  return (
    <div className={theme}>
      {isEnabled && <NewFeatureComponent />}
    </div>
  );
}
The generated types will be saved to gen/flags.d.ts.Most default tsconfig.json setups include this file via a broad pattern like **/*.ts, but if you’re using a custom config, make sure it’s covered by the include array:"include": ["**/*.ts"]

​
Generated Types

The CLI generates TypeScript types based on your flag configurations. 
// For boolean flags
declare module "@flagsync/node-sdk" {
  export interface FeatureFlags {
    "enable-dark-mode": boolean;
    "show-beta-features": boolean;
  }
}

​
Integration Examples

A few integration examples for FlagSync’s SDKS. Supported SDKs:

​
@flagsync/react-sdk

import React from 'react';
import { useFlag } from '@flagsync/react-sdk';

function MyComponent() {
  // TypeScript knows this returns a boolean
  const { value: isEnabled } = useFlag('show-new-feature');

  // TypeScript knows this returns "light" | "dark" | "auto"
  const { value: theme } = useFlag('theme-preference');

  return (
    <div className={theme}>
      {isEnabled && <NewFeatureComponent />}
    </div>
  );
}

​
@flagsync/nextjs-sdk

import { welcomeMessage } from '@/lib/flagsync';

export default function HomePage() {
  // TypeScript knows this returns "hello" | "welcome" | "hi there"
  const message = await welcomeMessage();
  return <h1>{message}</div>;
}

​
@flagsync/js-sdk

import { FlagSyncFactory } from '@flagsync/js-sdk';

// Initialize the SDK
const factory = FlagSyncFactory({...});
const client = factory.client()
await client.waitForReady();

// TypeScript knows this returns 10 | 25 | 50 | 100
const maxItems = client.flag('max-items');

​
Commands

​
flagsync login

Authenticates the CLI with your FlagSync account using a secure OAuth2 flow. 
npx flagsync login
Opens your browser for authentication, then walks you through selecting your project context
Prompts:
  • Organization: Choose which FlagSync organization to use
  • Workspace: Select the workspace containing your flags

​
flagsync logout

Disconnects the CLI from your FlagSync account. 
npx flagsync logout
Clears your saved login credentials. You’ll need to run flagsync login again to use other commands.

​
flagsync generate

Creates TypeScript definitions for your feature flags. 
npx flagsync generate
Pulls your flag definitions and generates type-safe TypeScript code in gen/flags.d.ts.
Prompts:

​
File Structure

After running flagsync generate, your project will have: 
your-project/
├── gen/
│   └── flags.d.ts # Generated type definitions
├── package.json
└── ... your other files
The generated flags.d.ts file contains:
  • Module declaration for your chosen SDK
  • FeatureFlags interface with all your flags
  • Type-safe flag key constants
The generated types will be saved to gen/flags.d.ts.Most default tsconfig.json setups include this file via a broad pattern like **/*.ts, but if you’re using a custom config, make sure it’s covered by the include array:"include": ["**/*.ts"]