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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hypertune.com/in-app-content/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.