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

# Remix an App

> Learn to start your app from an existing Replit project. A **Remix** is a new Replit App you create from an app that you currently have access to.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

export const RemixButton = ({replUrl = "https://replit.com/@sarahxli/Digital-Piano-Keys?v=1", label = "Remix this app", count = null}) => {
  if (typeof document !== 'undefined' && !document.getElementById('remix-button-styles')) {
    const style = document.createElement('style');
    style.id = 'remix-button-styles';
    style.textContent = `
      /* Button container */
      .remix-btn-container {
        --btn-bg: var(--replit-docs-bg-muted, #F1F1EE);
        --btn-bg-hover: var(--replit-docs-bg-elevated, #F1F1EE);
        --btn-text: var(--replit-docs-text, #1D1D1D);
        --btn-border: var(--replit-docs-border, #DEDAD5);
        --transition-duration: 120ms;
        display: flex;
        justify-content: center;
      }

      .dark .remix-btn-container,
      html.dark .remix-btn-container,
      [data-theme="dark"] .remix-btn-container {
        --btn-bg: var(--replit-docs-bg-elevated, #222223);
        --btn-bg-hover: var(--replit-docs-bg-muted, #222223);
        --btn-text: var(--replit-docs-text, #F5F5F5);
        --btn-border: var(--replit-docs-border, #39393D);
      }

      /* Button base styles - matching template page exactly */
      .remix-btn {
        /* Layout */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        max-width: 400px;
        min-width: 200px;
        height: 36px;
        padding: 0 16px;
        gap: 8px;

        /* Typography */
        font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        text-decoration: none;
        white-space: nowrap;

        /* Visual */
        border-radius: 8px;
        border: none;
        background: var(--btn-bg);
        color: var(--btn-text);
        box-shadow: inset 0 0 0 1px var(--btn-border);

        /* Interaction */
        cursor: pointer;
        user-select: none;
        transition-property: background-color;
        transition-duration: var(--transition-duration);
        transition-timing-function: ease-out;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
      }

      /* Content (icon + label) - centered */
      .remix-btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }

      /* Hover state */
      @media (hover: hover) {
        .remix-btn:hover {
          background: var(--btn-bg-hover);
        }
      }

      /* Active/pressed state */
      .remix-btn:active {
        background: var(--btn-bg-hover);
        transform: scale(0.99);
      }

      /* Focus visible state */
      .remix-btn:focus-visible {
        outline: 2px solid #0079F2;
        outline-offset: 2px;
      }

      /* Icon styles */
      .remix-btn svg {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
      }

      /* Label styles */
      .remix-btn span {
        font-weight: 600;
      }

      /* Animation */
      @keyframes remix-btn-fade-in {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .remix-btn-container {
        animation: remix-btn-fade-in 300ms ease-out;
      }
    `;
    document.head.appendChild(style);
  }
  const handleClick = e => {
    e.preventDefault();
    const url = replUrl.includes('replit.com') ? replUrl : `https://replit.com${replUrl}`;
    window.open(url, '_blank');
  };
  const RemixIcon = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" preserveAspectRatio="xMidYMin">
      <path d="M17.47 13.47a.75.75 0 0 1 1.06 0l4 4a.745.745 0 0 1 .118.16c.016.027.032.054.044.083.007.016.01.032.016.049a.744.744 0 0 1 .042.238.743.743 0 0 1-.037.223c-.007.02-.012.042-.02.062a.748.748 0 0 1-.163.245l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72H15.95a4.753 4.753 0 0 1-3.886-2.09l-.351-.442a.75.75 0 0 1 1.172-.936l.36.45.04.055a3.251 3.251 0 0 0 2.68 1.463h4.224l-2.72-2.72a.75.75 0 0 1 0-1.06ZM17.47 1.47a.75.75 0 0 1 1.06 0l4 4a.756.756 0 0 1 .162.816.749.749 0 0 1-.162.244l-4 4a.75.75 0 0 1-1.06-1.06l2.72-2.72H16.02a3.25 3.25 0 0 0-2.674 1.372l-5.44 8.58a4.75 4.75 0 0 1-3.934 2.047L2 18.75a.75.75 0 0 1 0-1.5h1.979a3.25 3.25 0 0 0 2.673-1.373l5.442-8.578.02-.03a4.751 4.751 0 0 1 3.913-2.018l4.162-.001-2.72-2.72a.75.75 0 0 1 0-1.06ZM3.972 5.25a4.75 4.75 0 0 1 4.27 2.612.751.751 0 0 1-1.34.675 3.252 3.252 0 0 0-2.698-1.781l-.226-.006H2a.75.75 0 0 1 0-1.5h1.972Z" />
    </svg>;
  return <div className="remix-btn-container" style={{
    margin: '16px 0'
  }}>
      <button onClick={handleClick} className="remix-btn" type="button" tabIndex={0}>
        <RemixIcon />
        <span>{label}</span>
      </button>
    </div>;
};

Looking for another way to start building on Replit? **Remixing** lets you start from existing apps created by the community. It's faster than building from scratch and a great way to learn from working code.

<Tip>
  New to Replit? Try [building your first app](/getting-started/quickstarts/ask-ai) to learn how Agent works from scratch.
</Tip>

## Create your Remix

⏰ *Estimated time: 5 minutes*

Follow the steps in this guide to create a Remix of an interactive digital piano app:

<Frame>
  <img src="https://mintcdn.com/replit/CKgy3zbnPnUlDukQ/images/getting-started/quickstart_piano_complete.png?fit=max&auto=format&n=CKgy3zbnPnUlDukQ&q=85&s=76dbd6c44f768c4cb88bd7f1ee51699c" alt="Interactive digital piano with keys" width="1820" height="1024" data-path="images/getting-started/quickstart_piano_complete.png" />
</Frame>

<Tip>
  Try the published app at [Digital Piano Keys](https://digital-piano-keys.replit.app).
</Tip>

<Steps>
  <Step title="Remix the app">
    Select the **Remix this app** button below to start creating your own version of the Digital Piano app.

    <RemixButton replUrl="https://replit.com/@sarahxli/Digital-Piano-Keys?v=1" label="Remix this app" />
  </Step>

  <Step title="Complete the app details">
    After selecting the button, the **Remix App** dialog appears. Select **Remix App** to continue. You can edit these details later.

    <Frame>
      <img src="https://mintcdn.com/replit/u7DyWVbaIRze6Cmd/images/getting-started/quickstart_remix_dialog.png?fit=max&auto=format&n=u7DyWVbaIRze6Cmd&q=85&s=d1d41a640ac0fc55679aa4081d5c5ff2" alt="Remix App dialog showing app name, description, and privacy settings" width="1222" height="1202" data-path="images/getting-started/quickstart_remix_dialog.png" />
    </Frame>
  </Step>

  <Step title="Play the piano">
    The app starts automatically. Navigate to the **Preview** tab to see the piano interface.

    <Frame>
      <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/quickstart-piano-demo.mp4" />
    </Frame>

    You now have a fully functioning Remix that you can interact with and iteratively improve.

    Click the piano keys to play notes and hear the sounds. Try playing a simple melody to test the app.
  </Step>
</Steps>

## Enhance your Remix

Now that you have a working app, use Agent to modify and extend it. The following sections show practical examples of enhancing your Remix.

### Add a feature using Agent

Use Agent to add complex features to your Remix:

<Steps>
  <Step title="Craft a prompt">
    Navigate to the **Agent** tab.

    Enter the following prompt in the text area:

    <AiPrompt>
      Add a tutorial mode that teaches you how to play simple songs. When tutorial mode is active, highlight the next key that should be played, wait for you to press the correct key before moving on, and display the song name at the top. Include a button to start the tutorial and pre-load at least two simple songs like "Mary Had a Little Lamb" or "Twinkle Twinkle Little Star."
    </AiPrompt>

    After you submit the prompt, Agent might pause and ask for clarification or confirmation. Respond in the text area.
  </Step>

  <Step title="Test the feature">
    Navigate to the **Preview** tab to see Agent's updates to the piano.

    Try starting the tutorial mode and following along as keys are highlighted.

    <Frame>
      <video autoPlay muted loop playsInline src="https://cdn.replit.com/sanity/quickstart-remix-piano-play.mp4" />
    </Frame>

    Since the initial prompt excluded specific details about the visual design, the result might not
    match your exact expectations.
  </Step>

  <Step title="Refine the feature">
    If the feature differs from your expectations, continue the conversation by entering a follow-up prompt
    in the **Agent** text area. For example:

    <AiPrompt>
      Make the highlighted key glow with a pulsing animation and add a progress indicator showing how far along in the song I am.
    </AiPrompt>

    To undo these changes, select **Rollback to here** in the Checkpoint created immediately
    after starting the plan for the change in the **Agent** tab.

    Learn more about [Checkpoints and Rollbacks](/core-concepts/agent/checkpoints-and-rollbacks).
  </Step>
</Steps>

### Add a feature using Lite mode

Follow these steps to add a quick enhancement to your Remix using [Lite mode](/core-concepts/agent/agent-modes):

<Steps>
  <Step title="Craft a prompt">
    Switch to [Lite mode](/core-concepts/agent/agent-modes) and enter the following prompt:

    <AiPrompt>
      Add record and playback buttons to capture and replay piano performances.
    </AiPrompt>

    After you submit the prompt, Agent describes the changes it wants to make and lets you review the code changes before proceeding.
    Select **Preview code changes** to view a comparison of the current code and the updates.
  </Step>

  <Step title="Test the feature">
    Select **Apply all** and approve any following confirmations to continue.

    Navigate to the **Preview** tab to check the result. You should now see record and playback buttons that let you capture and replay what you play.

    To undo these changes, use the Rollback feature in the **Agent** tab.
  </Step>
</Steps>

## Continue your journey

Now that you've completed this tutorial, here are some remix-specific next steps:

* **Explore more remixes**: Browse the [community](https://replit.com/community/all) to find apps to remix and learn from
* **Build from scratch**: Try [creating your own app](/getting-started/quickstarts/ask-ai) with Agent to compare the experience
* **Publish for remixing**: Share your enhanced version so others can build on your work.