Overview

In-app content management lets your team instantly update content across your app — from banners and tooltips to modals and error messages — without redeploying your app.

Think of it as a CMS for your core product.

With Hypertune, you also get the power of Hyperlang, a full programming language for content logic, enabling:

• Personalization via targeting rules

• Internationalization and localization

• Variables for reusable content and dynamic placeholders

• A/B/n testing

• Multivariate testing

• AI loops

Problem

Without in-app content management:

• Product and marketing rely on engineering for every content update.

• In-app copy quality suffers because it's hard to iterate.

• Engineering is blocked waiting for finalized content.

• There's no way for product and marketing to:

  • Target in-app content, e.g. show a banner only to legacy-plan users.

  • Experiment on in-app content to maximize conversion lift.

  • Localize in-app content for different audiences.

Solution

Define your in-app content in Hypertune as flags instead of hardcoded values:

type Root {
  upgradeModalContent: ModalContent!
}

type ModalContent {
  title: String!
  message: String!
  buttonText: String!
}

Then reference it in your code:

components/PaidFeature.tsx

'use client'

import UpgradeModal from '@/components/UpgradeModal'
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' ? (
    <UpgradeModal
      content={content}
      onClick={() => {
        upgrade()
      }}
    />
  ) : (
    children
  )
}

components/UpgradeModal.tsx

'use client'

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

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

This empowers product and marketing to instantly update the content from the Hypertune dashboard without any code changes:

Benefits

• Product and marketing can instantly edit in-app content themselves without relying on engineering.

• In-app copy quality improves because iteration is easy.

• Engineers ship code without waiting for finalized content.

• It's easy for product and marketing to:

  • Target in-app content, e.g. show a banner only to legacy-plan users.

  • Experiment on in-app content to maximize conversion lift.

  • Localize in-app content for different audiences.

ROI

These benefits help teams:

• Ship more features, faster with the same headcount.

• Improve product quality for users.

• Improve key business metrics, e.g. conversion rates and revenue.

• Expand to new audiences.