What is an SDK? How onboarding SDKs work

You've seen "SDK" on every developer tools landing page. The term gets thrown around loosely, sometimes meaning a full framework, sometimes just a couple of npm packages. When someone says "onboarding SDK," what exactly are they shipping to your users' browsers?

npm install @tourkit/core @tourkit/react

This glossary entry defines the term precisely, explains how SDKs differ from APIs, and breaks down what an onboarding SDK actually does at the code level. We built Tour Kit as a modular onboarding SDK, so we'll use it for concrete examples. The concepts apply to any SDK in this space.

What is an SDK?

An SDK (software development kit) is a packaged set of tools, libraries, type definitions, and documentation that developers use to build features for a specific platform or domain. Unlike a standalone library that solves one problem, an SDK bundles multiple related capabilities behind a cohesive API surface. The Android SDK includes compilers, debuggers, emulators, and libraries, all coordinated to build Android apps from a single download (Android Developers).

The term dates back to the 1980s, when platform vendors shipped physical media containing header files and sample code. Modern SDKs are distributed through package managers. You run npm install instead of inserting a CD-ROM, but the concept hasn't changed: give developers everything they need to build on your platform in one coordinated package.

What separates an SDK from a random collection of utilities is intentional design. The pieces work together. Types are shared across modules. Versioning is coordinated so you don't end up with incompatible sub-packages.

How an SDK works

Most SDKs follow a layered pattern. A core layer handles state and domain logic. Adapter layers connect that core to specific frameworks. Optional extension packages add capabilities without bloating the base install.

Here's what that looks like in practice with a React onboarding SDK:

// Core layer: framework-agnostic logic
import { createTourConfig } from '@tourkit/core';

// Framework adapter: React bindings
import { TourProvider, useTour } from '@tourkit/react';

// Optional extension: analytics tracking
import { AnalyticsPlugin } from '@tourkit/analytics';

const config = createTourConfig({
  plugins: [AnalyticsPlugin({ provider: 'posthog' })],
});

function App() {
  return (
    <TourProvider config={config}>
      <YourApp />
    </TourProvider>
  );
}

The core package has zero framework dependencies. The React adapter wraps it in hooks and context. The analytics plugin is a separate install. You pick what you need.

This layered approach means the SDK tree-shakes well. If you only import @tourkit/core and @tourkit/react, the analytics, scheduling, and survey code never hits your bundle.

SDK vs API: what's the difference?

An API (application programming interface) is a contract: a set of endpoints or function signatures you can call. An SDK is a toolkit that includes an API along with everything else needed to use it productively. Red Hat's developer documentation puts it simply: "An API is the interface; an SDK is the workshop that contains tools to work with that interface" (Red Hat).

In the onboarding space, Appcues exposes both: a REST API for triggering flows server-side, and a JavaScript SDK (@appcues/sdk) that renders UI in the browser. Tour Kit is SDK-only. Everything runs client-side with no external API calls.

Onboarding SDK examples

An onboarding SDK packages the tools needed to guide users through your product: tour step sequencing, element highlighting, tooltip positioning, progress persistence, and analytics hooks.

Here's a minimal working example:

// src/components/WelcomeTour.tsx
import { useTour } from '@tourkit/react';

const steps = [
  { target: '#sidebar-nav', content: 'Navigate between sections here.' },
  { target: '#search-bar', content: 'Search across all your projects.' },
  { target: '#profile-menu', content: 'Manage your account settings.' },
];

export function WelcomeTour() {
  const { currentStep, next, back, isActive } = useTour({
    tourId: 'welcome',
    steps,
  });

  if (!isActive) return null;

  return (
    <div role="dialog" aria-label={`Step ${currentStep + 1} of ${steps.length}`}>
      <p>{steps[currentStep].content}</p>
      <button onClick={back} disabled={currentStep === 0}>Back</button>
      <button onClick={next}>
        {currentStep === steps.length - 1 ? 'Done' : 'Next'}
      </button>
    </div>
  );
}

Two things worth noting. The SDK handles step state and sequencing (which step is active, what "next" means at the last step). But because it's headless, ARIA attributes are your responsibility. You get full design control at the cost of owning accessibility compliance.

Other onboarding SDKs include React Joyride (37KB gzipped, styled) and Shepherd.js (31KB gzipped, multi-framework). Driver.js takes a lighter approach at 5KB gzipped, vanilla JS only.

Why SDKs matter for product onboarding

The alternative to an onboarding SDK is building tour logic from scratch. That means writing your own element targeting, scroll-into-view behavior, positioning engine, step state machine, focus trapping, and progress persistence. Most teams underestimate this. A simple 5-step tooltip tour takes roughly 40-60 hours of engineering time when built properly, according to teams who've done the build-vs-buy analysis (Chameleon).

An SDK compresses that to an afternoon. Install the packages, define your steps, render your UI.

But not all onboarding SDKs are equal. The key questions when evaluating one:

• Bundle weight. Does it tree-shake? What's the baseline cost for a simple tour?
• Framework coupling. Does it require React, or does it work with Vue and Svelte too?
• UI ownership. Pre-styled components, or bring your own?
• Persistence. Where does it store progress? localStorage, cookies, your backend?
• Accessibility. Does it handle focus management and ARIA, or is that on you?

Tour Kit's approach is modular: 10 separate packages, each under 12KB gzipped, MIT-licensed core with optional Pro extensions. That said, it's React-only and has no visual builder. You need developers to set up tours in code. For teams without React experience, a SaaS tool like Appcues or Userpilot might be a faster path, even at $300+/month.

FAQ

What does SDK stand for?

SDK stands for software development kit. It packages libraries, type definitions, and documentation so developers can build features for a specific platform without starting from scratch. For onboarding, an SDK provides tour sequencing, element targeting, and progress tracking as installable npm packages.

Is an onboarding SDK the same as a product tour library?

Not exactly. A product tour library typically handles one thing: guided step-by-step tours. An onboarding SDK is broader. It may include tours, tooltips, checklists, announcements, and analytics under one coordinated package. Tour Kit ships 10 packages covering all of these, but you only install what you need.

Do onboarding SDKs affect page performance?

Every JavaScript dependency adds weight. A monolithic SDK can add 50-100KB to your bundle. A modular SDK like Tour Kit tree-shakes to under 8KB gzipped for the core. Google recommends keeping total JavaScript under 300KB for good Core Web Vitals scores (web.dev).

Can I use an onboarding SDK with any frontend framework?

It depends on the SDK. Framework-agnostic options like Shepherd.js and Driver.js work with React, Vue, Svelte, or plain HTML. Framework-specific SDKs like Tour Kit and React Joyride require React 18+. Check peerDependencies in package.json before installing to see exactly what's required.

Related articles

GlossaryApr 12, 2026 · 5 min read

What is a hotspot? In-app guidance element explained

Learn what a hotspot is in onboarding UX. Covers definition, accessibility, code examples, and when to use hotspots vs tooltips in your React app.

Read article

GlossaryApr 12, 2026 · 7 min read

What is a product tour? (definition, types, and examples)

Learn what a product tour is, how it works technically, and when to use each type. Covers tooltips, hotspots, modals, and walkthroughs with code examples.

Read article

GlossaryApr 12, 2026 · 6 min read

What is a slideout? In-app messaging element explained

Learn what a slideout is, how it differs from modals and drawers, and when to use slideout panels for in-app messaging and onboarding.

Read article

GlossaryApr 12, 2026 · 7 min read

What is a tooltip? (and when to use tooltips in product tours)

A developer's definition of tooltips covering ARIA patterns, WCAG 1.4.13, the four tooltip types, and how tooltips work inside product tours.

Read article