Define your funnel in code
A config file defines your pages and routing. Each page is a React component with access to typed hooks. That's it.
import { defineConfig } from "@appfunnel/sdk"
export default defineConfig({
projectId: "your-project-id",
funnelId: "your-funnel-id",
name: "FitnessApp_Funnel_1",
initialPageKey: "intro",
responses: {
goal: { type: "string" },
experience: { type: "string" },
interests: { type: "string" },
},
data: {
discountTimerStartedAt: { type: "number", default: 0 },
showDiscountedProducts: { type: "boolean", default: false },
},
products: {
items: [
{
id: "monthly",
name: "Monthly",
storePriceId: "price_monthly_id",
},
{
id: "annual",
name: "Annual",
storePriceId: "price_annual_id",
trialDays: 7,
trialStorePriceId: "price_annual_trial_id",
},
],
defaultId: "annual",
},
})15 hooks. 11 elements. Full infrastructure.
Every piece of funnel logic you need — as typed React hooks. No REST calls, no state management boilerplate.
Navigation & routing
Declarative page definitions with conditional routing, skip logic, and progress tracking. The SDK evaluates routes at navigation time based on variable state.
useNavigation()usePageData()Responses & data
Typed hooks for reading and writing quiz answers, user properties, and internal state. Everything is session-persisted automatically.
useResponse()useUser()useData()Payments
Drop-in Stripe and Paddle components with product selection, trial management, and post-purchase upsells. No webhook wiring needed.
useProducts()usePayment()Tracking & attribution
Server-side events to Meta CAPI, Google Ads, and TikTok. Fire custom events. First-party, deterministic attribution out of the box.
useTracking()Localization
Built-in i18n with locale detection and translation hooks. Serve funnels in any language without third-party libraries.
useTranslation()useLocale()Clear ownership
- The UI — your React components, your design system, your Tailwind config
- Page layouts, animations, illustrations, and copy
- Quiz question components and answer selection UX
- Paywall design and pricing presentation
- Any custom interactions unique to your funnel
- Session management — cookie-based, cross-page, restored on reload
- Payment processing — Stripe & Paddle subscriptions, trials, upsells
- Routing engine — conditional navigation, skip logic, deep-link gating
- Server-side attribution — Meta CAPI, Google Ads, TikTok Events API
- A/B testing — experiment assignment, variant serving, revenue tracking
- Custom domains — SSL provisioning, DNS management, CDN
- Webhooks — delivery with retries, signing, and event logs
- Analytics — drop-off, conversion, LTV, and ROAS dashboards
Let AI agents build your funnels
The SDK is just React components and typed hooks — exactly what AI coding agents are best at. Describe what you want, and tools like Claude Code or Cursor can scaffold entire funnels, iterate on designs, and wire up payments and routing.
- Scaffold a complete funnel from a description or screenshot
- Iterate on quiz flows, paywall designs, and copy
- Wire up conditional routing and skip logic
- Add payment components and product selection
"Build a 5-page fitness onboarding funnel.
Quiz pages for goal, experience level, and
workout frequency. Paywall with monthly and
annual plans. Download page with app store
links. Use a dark theme with green accents."
→ Claude Code generates the full project:
appfunnel.config.ts, 5 page components,
Tailwind styles, conditional routing.Three commands to production
The CLI handles everything from scaffolding to deployment. Local dev with hot reload, then build and publish to your custom domain.
npx appfunnel initScaffold a new project with config, pages, and TypeScript setup.
npx appfunnel devLocal development server with hot reload and session simulation.
npx appfunnel publishBuild and deploy to production. Live on your custom domain in seconds.
Headless SDK: common questions
Yes. The SDK is a React library with hooks and components. If your team doesn't write React, the no-code editor is a better fit — it provides a visual drag-and-drop builder with the same backend infrastructure.
The SDK runs as a standalone project deployed to AppFunnel's infrastructure. It's not embedded in your existing app — it's a separate web funnel that sits between your ads and your app download. The CLI handles building and deploying.
The SDK is fully typed. All hooks return typed values, config files use typed helpers (defineConfig, definePage), and your IDE gets full autocompletion for variables, products, and page definitions.
Drop in <StripePaymentForm /> or <PaddleCheckout /> components. The SDK handles product selection via useProducts(), payment state via usePayment(), and post-purchase routing automatically. You configure products in the AppFunnel dashboard — no Stripe webhook code needed.
Run `npx appfunnel dev` for local development with hot reload, then `npx appfunnel build && npx appfunnel publish` to deploy. Your funnel is live on your custom domain within seconds. No CI/CD setup required — though you can integrate it if you want.
They're separate approaches for the same funnel. You choose one per funnel. However, you can have multiple funnels — some built with the SDK, others with the no-code editor — all sharing the same analytics, attribution, and payment infrastructure.
Next steps
Headless SDK Docs
Full API reference, hooks, components, and configuration guide.
Read moreTutorialGetting Started
Set up your first headless funnel in under 10 minutes.
Read moreComparisonAppFunnel vs Building In-House
Why build on AppFunnel instead of rolling your own infrastructure?
Read moreGuideWhat is Web2App?
Learn how web-to-app funnels work and why subscription apps use them.
Read more