Keak SDK

Production-ready A/B testing and experimentation SDK for React applications with visual editing, source mapping, and real-time variant testing.

Quick Start

$3

``bash
npm install @keak/sdk
`

All dependencies are bundled with the SDK - no additional packages required.

$3

The CLI setup runs automatically after installation. If it doesn't run, trigger it manually:

`bash
npx keak-setup
`

The installer will:
- Detect your React framework (Next.js, CRA, Vite, etc.)
- Find your main entry file (src/index.tsx, app/layout.tsx, etc.)
- Add the useKeak() hook automatically
- Create a backup of your original file
- Automatically configure source mapping (enables precise element-to-code mapping)

$3

If you're using Next.js 15, you'll need additional configuration to enable source mapping. See the Next.js 15 Setup Guide for detailed instructions.

Framework-Specific Setup

$3

Add the useKeak() hook to your root layout:

`tsx
// app/layout.tsx
'use client';

import { useKeak, KeakToolbar } from '@keak/sdk';

export default function RootLayout({ children }) {
useKeak({ debug: true });

return (


{children}



);
}
`

$3

Add the useKeak() hook to your _app.tsx:

`tsx
// pages/_app.tsx
import { useKeak, KeakToolbar } from '@keak/sdk';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
useKeak({ debug: true });

return (
<>



);
}
`

$3

Add the useKeak() hook to your main App component:

`tsx
// src/App.tsx
import { useKeak, KeakToolbar } from '@keak/sdk';

function App() {
useKeak({ debug: true });

return (


);
}

export default App;
`

$3

Add the useKeak() hook to your main App component:

`tsx
// src/App.tsx
import { useKeak, KeakToolbar } from '@keak/sdk';

function App() {
useKeak({ debug: true });

return (
<>


);
}

export default App;
`

Basic Usage

$3

The useKeak() hook initializes the SDK with minimal configuration. No API key required!

`tsx
import { useKeak } from '@keak/sdk';

function App() {
useKeak({ debug: true });

return (



);
}
`

$3

Wrap your content with Experiment and Variant components:

`tsx
import { Experiment, Variant } from '@keak/sdk';

export default function HeroHome() {
return (


Create stunning web experiences

Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.

Tired of generic templates and endless tweaks? Our expertly crafted landing page solution guarantees pixel-perfect performance and stunning conversions on every device.


);
}
`

$3

You can also use the useExperiment hook for programmatic access:

`tsx
import { useExperiment } from '@keak/sdk';

function MyComponent() {
const { variant, track, isInExperiment } = useExperiment('my-experiment');

return (



);
}
`

Project Structure

`
keak-sdk/
├── src/
│ ├── index.tsx # Main SDK entry point
│ ├── toolbar/ # Floating toolbar components
│ └── scripts/ # Build and utility scripts
├── dist/ # Built output (generated)
├── package.json # Package configuration
└── tsconfig.json # TypeScript configuration
`

Available Scripts

- npm run build - Build the SDK for production
- npm run dev - Build the SDK in watch mode for development
- npm run prepublishOnly - Build before publishing

Troubleshooting

$3

1. Module not found errors: Ensure the SDK is properly installed and the auto-setup has completed
2. TypeScript errors: Ensure your project has compatible TypeScript and React versions (React >=16.8.0)
3. useKeak hook not working: Run npx keak-setup` to ensure the hook is properly added to your entry file

$3

If you're using Next.js 15 and experiencing source mapping issues, refer to the Next.js 15 Setup Guide for detailed troubleshooting steps.

License

MIT