# 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](https://docs.hypertune.com/concepts/logic#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:

```graphql
type Root {
  upgradeModalContent: ModalContent!
}

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

Then reference it in your code:

{% code title="components/PaidFeature.tsx" %}

```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
  )
}

```

{% endcode %}

{% code title="components/UpgradeModal.tsx" %}

```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>
  )
}

```

{% endcode %}

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

<figure><img src="https://2048905609-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWa3rQLiu4JZhBRkiyoKz%2Fuploads%2Fuv0q4mjOM6rKrqEuJRsp%2FScreenshot%202025-10-13%20at%2014.27.49.png?alt=media&#x26;token=580f04e1-d605-4b73-b4b6-9a9d2b94fdd2" alt=""><figcaption></figcaption></figure>

## 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.