GitHub

Deploy feature flags programatically.

Stop wasting your time trying to build feature flags in slow, mediocre web apps. Declarativly build and deploy your feature flags in a fast, reliable, and scalable way.

schema.config.js
package.json
export default {
"$schema": "https://flagmantic.com/declarative.schema.json",
"version": 1,
"projects": [
{
"name": "My First Project",
"key": "my-first-project",
"feature_flags": [
{
"key": "my-first-flag",
"name": "My First Flag",
"description": null,
"tags": ["redesign", "apples", "food"],
"variations": {
"0": { "label": "Disabled", "flag": { "BooleanFlag": false } },
"1": { "label": "Enabled", "flag": { "BooleanFlag": true } }
},
...
}
]
}
]
}

Introduction

Getting started

Quick start (NodeJS SDK)

Here's a quick guide to get you started.

Installing dependencies

First thing's first, you'll need to create a node project and install our declarative SDK.

npm install @firstkind/declarative

You don't have to use Node

If you don't want to use node, we have a declarative API that you can use instead

Creating your first project

You'll need to go to the API Key Management page to create an Admin key (if you haven't already). Once you've done that, you can paste that into the example below run your project with node index.js to create your first project.

// index.js
import { Client } from '@firstkind/declarative'


const client = new Client('<your admin api key>')


client.applySync({
  version: 1,
  projects: [
    {
      name: 'My First Project',
      key: 'my-first-project',
      feature_flags: [
        {
          key: 'my-first-flag',
          name: 'My First Flag',
          description: null,
          tags: ['redesign', 'apples', 'food'],
          variations: {
            0: { label: 'Disabled', flag: { BooleanFlag: false } },
            1: { label: 'Enabled', flag: { BooleanFlag: true } },
            2: {
              label: 'Enabled JSON Flag',
              flag: {
                JsonFlag: { foo: 'bar' },
              },
            },
          },
          is_frontend: true,
          environments: {
            development: {
              enabled: true,
              targeting: [
                {
                  name: 'Example Target 1',
                  formula: {
                    Or: [
                      { Pure: { UserId: { user_ids: ['1234'] } } },
                      { Pure: { UserId: { user_ids: ['4321'] } } },
                    ],
                  },
                  variation: 1,
                  starts_at: '2018-11-13T20:20:39Z',
                  expires_at: '2018-11-13T20:20:39Z',
                },
              ],
              enabled_default_variation: 0,
              disabled_variation: 0,
            },
            production: {
              enabled: false,
              targeting: null,
              enabled_default_variation: 0,
              disabled_variation: 0,
            },
            staging: {
              enabled: false,
              targeting: null,
              enabled_default_variation: 0,
              disabled_variation: 0,
            },
          },
        },
      ],
    },
  ],
})

Quick Start (REST API)

  1. Navigate to the API key page
  2. Make a new Admin API key
  3. Make a file schema.json with the following body
{
  "$schema": "https://flagmantic.com/declarative.schema.json",
  "version": 1,
  "projects": [
    {
      "name": "My First Project",
      "key": "my-first-project",
      "feature_flags": [
        {
          "key": "my-first-flag",
          "name": "My First Flag",
          "description": null,
          "tags": ["redesign", "apples", "food"],
          "variations": {
            "0": { "label": "Disabled", "flag": { "BooleanFlag": false } },
            "1": { "label": "Enabled", "flag": { "BooleanFlag": true } },
            "2": {
              "label": "Enabled JSON Flag",
              "flag": {
                "JsonFlag": { "foo": "bar" }
              }
            }
          },
          "is_frontend": true,
          "environments": {
            "development": {
              "enabled": true,
              "targeting": [
                {
                  "name": "Example Target 1",
                  "formula": { "Pure": { "UserId": { "user_ids": ["1234"] } } },
                  "variation": 1,
                  "starts_at": "2018-11-13T20:20:39Z",
                  "expires_at": "2018-11-13T20:20:39Z"
                }
              ],
              "enabled_default_variation": 0,
              "disabled_variation": 0
            },
            "production": {
              "enabled": false,
              "targeting": null,
              "enabled_default_variation": 0,
              "disabled_variation": 0
            },
            "staging": {
              "enabled": false,
              "targeting": null,
              "enabled_default_variation": 0,
              "disabled_variation": 0
            }
          }
        }
      ]
    }
  ]
}
  1. In the same directory, run
curl -X POST -H "Content-Type: application/json" -H "API-Key: <api-key>" -d @schema.json https://api.flagmantic.com/v1/declarative
  1. You should see the following response, congradulations, you've created your first project and feature flag!
{ "success": true }

Basic usage

Now that you've created your first project, you'll probably want to try it out!

Make sure you don't use Admin keys on the client side!

You'll want to make sure that you create and use a non-admin API key for client side API calls.

Javascript / Typescript

We provide a typescript SDK that you can use to evaluate feature flags in your web apps. You can install it with

npm i @firstkind/sdk

With that done, you can start evaluating feature flags, like so:

import { fetchFlag } from '@firstkind/sdk'


async function loadPage() {
  const targetingResult = await fetchFlag({
    apiKey: 'pk_...',
    userId: '1234',
    projectKey: 'my-first-project',
    environmentKey: 'development',
    flagKey: 'my-first-flag',
    defaultValue: false,
  })


  if (targetingResult) {
    return 'new loading screen'
  } else {
    return 'old loading screen'
  }
}

React

We provide a React SDK that you can use to evaluate feature flags in your web apps. You can install it with

npm i @firstkind/react

With that done, you can start evaluating feature flags, like so:

import React from 'react'
import { useFetchFlag } from '@firstkind/react'


const LoadPage: React.FC = () => {
  const { isLoading, result } = await useFetchFlag({
    apiKey: 'pk_...',
    userId: '1234',
    projectKey: 'my-first-project',
    environmentKey: 'development',
    flagKey: 'my-first-flag',
    defaultValue: false,
  })


  if (isLoading) {
    return <div>Loading...</div>
  }
  return result ? <div>new menu</div> : <div>old menu</div>
}

REST


Getting help

If you run into any issues, you can go to the support page to request help! We'll do our best to help out.