> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rocket.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Versions

> Every Rocket.new build saves a version - compare diffs, label milestones, roll back changes, and redeploy any previous version from chat.

export const LlmsDirective = () => <blockquote className="llms-directive">
    For the complete documentation index, see <a href="/llms.txt">llms.txt</a>.
    For a lightweight markdown version of this page, append .md to the URL.
  </blockquote>;

<LlmsDirective />

Every time Rocket responds to a Build message, it saves the result as a new version. You get a complete history of your project that you can compare, roll back, label, and deploy - all from the chat panel.

<Divider />

## How versions work

At the bottom of each Rocket message in chat you will see a **Files** row showing the version number and which files changed. Below it are action buttons.

| Button           | What it does                                                           |
| :--------------- | :--------------------------------------------------------------------- |
| **Code diff**    | Shows what changed between this version and the previous one           |
| **Rollback**     | Reverts your project to this version                                   |
| **Create label** | Adds a name to this version so you can find it easily (web apps only)  |
| **Launch**       | Deploys this specific version to staging or production (web apps only) |

<Divider />

## Code diff

Code diff opens a side-by-side view of every file that changed in this version. Added lines are highlighted in green, removed lines in red.

<Frame caption="Code diff view showing changed files">
  <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/versions/code-diff-light.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=bff3257d0c673db3e2e7bbdd03ae3479" alt="Code diff panel showing green and red highlighted lines across two changed files." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/editor/versions/code-diff-light.webp" />

  <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/versions/code-diff-dark.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=37f31840472a74726f4c70f1fcd1a3c0" alt="Code diff panel showing green and red highlighted lines across two changed files." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/editor/versions/code-diff-dark.webp" />
</Frame>

Use code diff to:

* Review exactly what Rocket changed before moving on
* Understand the impact of a specific edit
* Debug unexpected behavior after a build

<Divider />

## Rollback

Rollback reverts your entire project to the selected version instantly.

<Warning>
  Rolling back discards every version after the one you select. The discarded code, labels, and checkpoints leave no reference in chat. This cannot be undone.
</Warning>

<Steps>
  <Step title="Find the version">
    Locate the version you want to return to in the chat.
  </Step>

  <Step title="Click Rollback">
    Click **Rollback**.
  </Step>

  <Step title="Confirm the rollback">
    Click **Rollback now** to confirm.

    <Frame caption="Rollback confirmation dialog">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/versions/rollback-light.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=9506558cd57c909bee88cad06100e02a" alt="Rollback confirmation dialog warning that changes cannot be recovered." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/editor/versions/rollback-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/versions/rollback-dark.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=d413e857fcc6fe7f4806dd7e1983364f" alt="Rollback confirmation dialog warning that changes cannot be recovered." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/editor/versions/rollback-dark.webp" />
    </Frame>
  </Step>
</Steps>

<Divider />

## Create label

Labels let you name and bookmark a specific version for easy reference later.

<Note>
  Create label is only available for **web** apps. It is not available for mobile apps.
</Note>

<Warning>
  A label is tied to its version. If you roll back past that version, the label is removed with the code. Chat will no longer show that codebase, label, or checkpoint. This cannot be undone.
</Warning>

<Steps>
  <Step title="Find the version">
    Locate the version in the chat.
  </Step>

  <Step title="Click Create label">
    Click **Create label**.
  </Step>

  <Step title="Name the label">
    Type a name and press Enter.

    <Frame caption="Create label input on a version">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/versions/create-label-light.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=497534692d98721ae116f4c9ef4fcca1" alt="Create label input field open below the version action buttons." className="theme-image light-image" width="2880" height="1624" data-path="images/build-docs/editor/versions/create-label-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/versions/create-label-dark.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=164b1869ef05ed8b91cb65327105586d" alt="Create label input field open below the version action buttons." className="theme-image dark-image" width="2880" height="1624" data-path="images/build-docs/editor/versions/create-label-dark.webp" />
    </Frame>
  </Step>
</Steps>

Good times to create a label:

* Before a risky change you might want to undo
* When a version is ready for review ("Client review v1")
* At a significant milestone ("MVP", "Beta launch")

<Divider />

## Launch a version

You can deploy any version directly - it does not have to be the most recent one.

<Note>
  Launching a particular version is only available for **web** apps. It is not available for mobile apps.
</Note>

<Steps>
  <Step title="Find the version">
    Locate the version in the chat.
  </Step>

  <Step title="Click Launch">
    Click **Launch**.
  </Step>

  <Step title="Select environment">
    Select **Staging** or **Production**.

    <Frame caption="Launch button on a version card">
      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/versions/launch-light.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=5fc309fcfa2115a725c546a4d8b46974" alt="Version card with Launch button highlighted." className="theme-image light-image" width="958" height="514" data-path="images/build-docs/editor/versions/launch-light.webp" />

      <img src="https://mintcdn.com/dhiwisepvtltd-5e04e6a4/SjTE8D-vvYrzhPjv/images/build-docs/editor/versions/launch-dark.webp?fit=max&auto=format&n=SjTE8D-vvYrzhPjv&q=85&s=0a5a2456820d56d04f8884e81accd203" alt="Version card with Launch button highlighted." className="theme-image dark-image" width="958" height="514" data-path="images/build-docs/editor/versions/launch-dark.webp" />
    </Frame>
  </Step>
</Steps>

| Target         | What it is                                                          |
| :------------- | :------------------------------------------------------------------ |
| **Staging**    | A private preview environment for testing, not visible to end users |
| **Production** | Your live app, visible to everyone with the URL                     |

<Note>
  Launching a version does not affect your working state in the editor. Your project continues from wherever you are - only the deployed environment changes.
</Note>

For a full breakdown of how staging and production work together, see [Launch your site](/build/launch-web/launch-your-site).

<Divider />

## What's next?

<CardGroup cols={2}>
  <Card title="Preview your app" icon="eye" href="/build/editor/preview">
    Test your app on different screen sizes before launching.
  </Card>

  <Card title="Launch your site" icon="rocket" href="/build/launch-web/launch-your-site">
    Understand staging and production, and manage your releases.
  </Card>

  <Card title="View and edit code" icon="code" href="/build/editor/code">
    Browse and edit your project source files directly.
  </Card>

  <Card title="Chat with Rocket" icon="messages" href="/build/editor/chat">
    Keep building - every message creates a new version automatically.
  </Card>
</CardGroup>
