> ## 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 build saves a version. Compare diffs, roll back, label milestones, and deploy any version directly 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 four 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        |
| **Launch**       | Deploys this specific version to staging or production       |

<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 all changes made after the selected version. This cannot be undone. If you want to keep your current state, create a label before rolling back (see [Create label](#create-label) below).
</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.

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

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