Production-ready A/B testing and experimentation SDK for React applications with visual editing, source mapping, and real-time variant testing
Production-ready A/B testing and experimentation SDK for React applications with visual editing, source mapping, and real-time variant testing.
``bash`
npm install @keak/sdk
All dependencies are bundled with the SDK - no additional packages required.
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.)useKeak()
- Add the hook automatically
- Create a backup of your original file
- Automatically configure source mapping (enables precise element-to-code mapping)
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.
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 (
$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 (
{/ Your app content /}
);
}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 (
<>
{/ Your app content /}
>
);
}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 (
{/ Your app components /}
);
}
`$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 (
{variant === 'treatment' && }
);
}
`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 publishingTroubleshooting
$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 fileIf you're using Next.js 15 and experiencing source mapping issues, refer to the Next.js 15 Setup Guide for detailed troubleshooting steps.
MIT