> For the complete documentation index, see [llms.txt](https://docs.hypertune.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hypertune.com/in-app-content/overview.md).

# 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](/concepts/logic.md#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="/files/2ywfEf39iausNH3zvNBP" 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.