# Guide
This guide builds on the SDK quickstart and shows you how to model, manage, and experiment on your in-app content using Hypertune.
You'll learn how to:
* Create custom object types to model your in-app content
* Create flags that use those custom object types
* Access those flags and render content in your code
* Update and target your in-app content
* Run experiments on your in-app content
## Prerequisites
[Set up Hypertune](https://docs.hypertune.com/getting-started/set-up-hypertune)
## Create custom object types to model your content
Go to the **Schema** view in the dashboard. Click the **+** button in the top-right of the sidebar. Select **Object**, enter a name, and click **Create**.
By default, the new object type has no fields.
Click **+ Add** to add a new field. Enter a name, set its type, and click **Create**.
Repeat for each field you want to add, then click **Save**.
## Create flags for your content
Go to the **Flags** view in the dashboard. Click the **+** button in the top-right of the sidebar and select **Flag**.
Enter a name, set its type to the one you created earlier, and click **Create**.
Enter the initial content, then click **Save**.
## Access flags to retrieve your content
Regenerate the client:
{% tabs %}
{% tab title="npm" %}
```bash
npx hypertune
```
{% endtab %}
{% tab title="yarn" %}
```bash
yarn hypertune
```
{% endtab %}
{% tab title="pnpm" %}
```bash
pnpm hypertune
```
{% endtab %}
{% endtabs %}
Create a React component that accepts a prop typed with your custom Hypertune object type:
{% code title="components/Modal.tsx" %}
```tsx
'use client'
import { type ModalContent } from '@/generated/hypertune'
export default function Modal({
content,
onClick,
}: {
content: ModalContent
onClick: () => void
}) {
return (
{content.title}
{content.message}
)
}
```
{% endcode %}
Then evaluate your flag and pass the result to your component:
```tsx
'use client'
import Modal from '@/components/Modal'
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' ? (
{
upgrade()
}}
/>
) : (
children
)
}
```
By defining React components that accept props typed with your custom Hypertune types, changes to your types only affect the components that use them. This creates clean boundaries between content types, making your content model and codebase modular, maintainable, and easy to evolve.
## Update your in-app content
Go to the **Flags** view in the dashboard, and select the flag with your in-app content from the left sidebar.
Make your changes, then open the **Diff** view to review them. Click **Save**.
## Target your in-app content
Go to the **Flags** view in the dashboard, and select the flag with your in-app content from the left sidebar.
Click **+ Rule**, set your condition, provide alternate content for that condition, and click **Save**.
## Experiment on your in-app content
Go to the **Flags** view in the dashboard, and select the flag with your in-app content from the left sidebar.
Click **+ Experiment**. In the dropdown, select **New experiment**.
Enter a name for your experiment and click **Create**.
Click **Insert** and update the **Test** variant of your content.
Review your changes in the **Diff** view and click **Save**.
Once you've [analyzed your experiment results](https://docs.hypertune.com/experimentation/guide#analyze-experiment-results) and decided on a winning variant, go to the **Flags** view and select your flag. Click the options button (⋯) next to the variant you want to ship and select **Ship variant**, then click **Save**.
## Next steps
* Run a [multivariate test](https://docs.hypertune.com/concepts/multivariate-tests) to find the best combination of content variants to maximize conversion lift.
* Set up an [AI loop](https://docs.hypertune.com/concepts/ai-loops) to automatically personalize content for each unique user to maximize conversion lift.
* Add content collections with list flags, e.g. `List[Tutorial]`, where `Tutorial` is a custom type that you define.
.png?alt=media&token=61b38706-aa3b-42a4-aa78-cea680976354)
.png?alt=media&token=9c2927c9-fb13-4308-be37-2db36bafccd7)
.png?alt=media&token=06e77c5d-0051-421d-8997-5a2a5584e755)
.png?alt=media&token=9e1e6496-46fc-4d8b-a439-25918955847c)
.png?alt=media&token=15ab55be-d62c-4c45-aea5-49859c9402c3)
.png?alt=media&token=ba4352ed-19a6-4bfb-8076-29658a7558b3)
.png?alt=media&token=2d1d7d99-f3df-4dec-b0c8-2daf6f8303f2)
.png?alt=media&token=eadf1407-2b9b-4891-bbe6-7be3340ade72)
.png?alt=media&token=34886e75-b9d6-463a-9e2b-c3a82936d1de)
.png?alt=media&token=ce598693-df0f-4f4b-ab93-dc92d0c42ab8)
.png?alt=media&token=87617160-d224-4389-bf03-05db6e7a94dc)
.png?alt=media&token=ebadc803-9cf6-4a41-935c-b521e4fc0466)
.png?alt=media&token=444f39e2-9787-418b-9f1d-a1fd7b10f187)
.png?alt=media&token=3989cf59-3803-40e1-a43e-fdf732a05f1b)