Devtools

A/BBY comes with a Devtools that allows you to see the different variants of your A/B Tests and Feature Flags. To use them simply add the <AbbyDevTools /> component to your app.

Installation

Install the @tryabby/devtools package using your favorite package manager:

npm i @tryabby/devtools

Configuration

In order to use the Devtools you will need to wrap them for your specific integration.

// lib/abby.ts
import { createAbby } from "@tryabby/next";
import abbyDevtools from "@tryabby/devtools";
 
export const { AbbyProvider, withAbby, withDevtools } = createAbby({
  // ...your Config
});
 
// Wrap the Devtools for Next.js
export const AbbyDevtools = withDevtools(abbyDevtools, { defaultShow: true });
 

You then need to simply place the Devtools inside of your AbbyProvider

import { AbbyProvider, AbbyDevTools } from "lib/abby";
 
// ... your application
export function App() {
  return (
    <AbbyProvider>
      <AbbyDevtools />
      <Component {...pageProps} />
    </AbbyProvider>
  );
}

Usage

The devtools will appear on every page if you set defaultShow: true. Otherwise you can toggle them with CMD/CTRL + . (or the shortcut you set in the config)