Skip to main content

API Reference

The SDK exports two components. Use MVTScripts for the App Router (recommended) and MVTOrchestrator for the Pages Router.

MVTScripts​

Server Component. Renders the anti-flicker inline script and the Splitlab engine <script> directly into the server HTML so they run before React hydration. Place once at the top of <body> in your root layout.tsx. No 'use client' required.

MVTScripts props​

PropTypeRequiredDefaultDescription
orchestratorKeystring✅—Splitlab project key (passed as data-project-key)
antiFlickerEnabledboolean❌trueInject body{opacity:0} before hydration
antiFlickerTimeoutMsnumber❌3000Fallback timeout (ms) to reveal the page if the engine never calls window.rmfk()
engineUrlstring❌https://cdn.splitlab.io/cdn/engine.jsOverride the engine script URL (e.g. staging)

MVTOrchestrator​

Client Component ('use client'). Wraps your application and injects the same scripts via useEffect after hydration. Enforces a single project key per page and, when MVTScripts is also present, detects the server-injected script and skips re-injection.

MVTOrchestrator props​

PropTypeRequiredDefaultDescription
orchestratorKeystring✅—Splitlab project key (passed as data-project-key)
childrenReactNode✅—App content to wrap
antiFlickerEnabledboolean❌trueInject temporary body{opacity:0} style until engine ready
antiFlickerTimeoutMsnumber❌3000Fallback timeout (ms) to remove the anti-flicker style
engineUrlstring❌https://cdn.splitlab.io/cdn/engine.jsOverride the engine script URL (e.g. staging)

TypeScript​

Both prop types are exported:

import type { MVTScriptsProps, MVTOrchestratorProps } from '@splitlabio/nextjs-orchestrator';

const props: MVTScriptsProps = {
  orchestratorKey: 'abc123xyz',
  antiFlickerEnabled: true,
  antiFlickerTimeoutMs: 3000,
};