Getting Started

Installation

CDN (recommended)

Add the script tag to your HTML. No install, no build step.

<script type="module" src="https://unpkg.com/@vibe-flags/core"></script>

npm

If you're using a bundler or want the React integration:

npm install @vibe-flags/core

Quick start

Create an HTML file with a boolean flag and a toolbar:

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/@vibe-flags/core"></script>
</head>
<body>
 
  <h1>My App</h1>
 
  <vibe-flags-boolean name="showBanner" description="Welcome banner" value="true" default>
    <div style="padding: 16px; background: #dbeafe; border-radius: 8px;">
      Welcome to the beta! This banner is controlled by a feature flag.
    </div>
  </vibe-flags-boolean>
 
  <vibe-flags-toolbar></vibe-flags-toolbar>
 
</body>
</html>

Open this file in your browser. A toggle button appears at the bottom-right corner. Click it to open the toolbar, flip the flag, and watch the banner appear and disappear.

What just happened

The <script> tag loaded Vibe Flags and registered the custom elements
<vibe-flags-boolean> registered a flag called showBanner with the store
<vibe-flags-toolbar> discovered the flag and rendered a toggle switch
Toggling the switch updated localStorage and re-evaluated the flag
Children stay hidden until the flag value matches — no flash of content

Add a select flag

Select flags let users choose between multiple options:

<vibe-flags-select name="theme" description="Color theme" default="light">
  <vibe-flags-option value="light">
    <style>body { background: #fff; color: #111; }</style>
  </vibe-flags-option>
  <vibe-flags-option value="dark">
    <style>body { background: #111; color: #fff; }</style>
  </vibe-flags-option>
  <vibe-flags-option value="blue">
    <style>body { background: #1e3a5f; color: #e0f0ff; }</style>
  </vibe-flags-option>
</vibe-flags-select>

The toolbar shows a dropdown for the select flag. Only the active option's children are rendered.

Next steps

Learn about Boolean Flags and Select Flags in detail
Configure the Toolbar position and behavior
Share flag states with URL Overrides
Use flags in React with the React integration