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.

PreviousGuideNextGuide

Last updated