Guide

This guide builds on the SDK quickstart and shows you how to model, manage, and experiment with your in-app content using Hypertune.

You'll learn how to:

• Create custom object types to model your in-app content

• Create flags that use those custom object types

• Access those flags and render content in your code

• Update and target your in-app content

• Run experiments on your in-app content

Prerequisites

Set up Hypertune

Create custom object types to model your content

Go to the Schema view in the dashboard. Click the + button in the top-right of the sidebar. Select Object, enter a name, and click Create.

By default, the new object type has no fields.

Click + Add to add a new field. Enter a name, set its type, and click Create.

Repeat for each field you want to add, then click Save.

Create flags for your content

Go to the Flags view in the dashboard. Click the + button in the top-right of the sidebar and select Flag.

Enter a name, set its type to the one you created earlier, and click Create.

Enter the initial content, then click Save.

Access flags to retrieve your content

Regenerate the client:

npx hypertune

yarn hypertune

pnpm hypertune

Create a React component that accepts a prop typed with your custom Hypertune object type:

'use client'

import { type ModalContent } from '@/generated/hypertune'

export default function Modal({
  content,
  onClick,
}: {
  content: ModalContent
  onClick: () => void
}) {
  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.message}</p>
      <button type="button" onClick={onClick}>
        {content.buttonText}
      </button>
    </div>
  )
}

Then evaluate your flag and pass the result to your component:

'use client'

import Modal from '@/components/Modal'
import { useHypertune } from '@/generated/hypertune.react'
import useOrganization from '@/lib/useOrganization'
import useUpgrade from '@/lib/useUpgrade'

export default function PaidFeature({
  children,
}: {
  children: React.ReactNode
}) {
  const content = useHypertune().upgradeModalContent().get()
  const organization = useOrganization()
  const upgrade = useUpgrade()

  return organization.plan === 'free' ? (
    <Modal
      content={content}
      onClick={() => {
        upgrade()
      }}
    />
  ) : (
    children
  )
}

By defining React components that accept props typed with your custom Hypertune types, changes to your types only affect the components that use them. This creates clean boundaries between content types, making your content model and codebase modular, maintainable, and easy to evolve.

Update your in-app content

Go to the Flags view in the dashboard, and select the flag with your in-app content from the left sidebar.

Make your changes, then open the Diff view to review them. Click Save.

Target your in-app content

Go to the Flags view in the dashboard, and select the flag with your in-app content from the left sidebar.

Click + Rule, set your condition, provide alternate content for that condition, and click Save.

Experiment on your in-app content

Go to the Flags view in the dashboard, and select the flag with your in-app content from the left sidebar.

Click + Experiment. In the dropdown, select New experiment.

Enter a name for your experiment and click Create.

Click Insert and update the Test variant of your content.

Review your changes in the Diff view and click Save.

Once you've analyzed your experiment results and decided on a winning variant, go to the Flags view and select your flag. Click the options button (⋯) next to the variant you want to ship and select Ship variant, then click Save.