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

# Fazer remix de um app

> Crie sua própria cópia de um Replit App público ou template para explorar, personalizar e desenvolver no seu workspace.

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

Fazer remix permite que você comece a partir de apps existentes criados pela comunidade. É mais rápido do que construir do zero e uma ótima forma de aprender com código funcional.

<Tip>
  Novo no Replit? Experimente [construir seu primeiro app](/pt/build/your-first-app) para aprender como o Agent funciona do zero.
</Tip>

## O que é um Remix

Um **Remix** é um novo Replit App que você cria a partir de um app ao qual você já tem acesso. Quando você faz remix de um app público ou template, você obtém sua própria cópia para interagir e melhorar de forma iterativa. As mudanças que você faz no seu Remix não afetam o app original.

Seu Remix credita sua fonte: ele mostra um link **Remixed from** de volta ao original, e o prompt de construção do original aparece na sua página de capa.

## O que seu Remix inclui

Um Remix é uma cópia completa e funcional, com uma separação clara do original:

* **Todos os arquivos e configurações** são copiados, para que o app funcione exatamente como o original.
* **O histórico de checkpoints do original** vem junto, identificado como histórico do app de origem. Você pode reverter para qualquer um desses checkpoints; a conversa que os produziu permanece com o original.
* **Um Agent totalmente novo.** Seu Remix começa com um Agent novo e sem histórico de chat herdado.
* **Nomes de secrets, não valores.** Se o app usa secrets (como chaves de API), seu Remix os lista para que você saiba o que preencher, com valores vazios. Os valores só são copiados quando você faz remix do seu próprio app.
* **Um banco de dados novo.** Seu Remix nunca se conecta ao banco de dados do original. Se o original oferecer, uma opção **Copy data from original App** copia os próprios dados; suas alterações ainda assim nunca tocam a fonte.
* **Uma configuração de login nova** para apps que usam Replit Auth.

Não copiado: deployments, domínios e configurações de conectores, que você configura na sua própria cópia. Os Remixes também começam privados, então nada é compartilhado até que você decida publicar.

## Como fazer remix de um app

<Steps>
  <Step title="Abra a página de capa do app">
    Encontre um app do qual queira fazer remix, como um da [comunidade](https://replit.com/community/all). A página de capa dele mostra uma prévia ao vivo e opções de compartilhamento.
  </Step>

  <Step title="Faça o remix do app">
    Selecione **Remix this App** para começar a criar sua própria versão.
  </Step>

  <Step title="Complete os detalhes do app">
    No diálogo **Remix App**, dê um nome à sua cópia e uma descrição opcional, depois selecione **Remix App**. Você pode editar esses detalhes depois.

    <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="Diálogo Remix App mostrando nome do app, descrição e configurações de privacidade" width="1222" height="1202" data-path="images/getting-started/quickstart_remix_dialog.png" />
    </Frame>
  </Step>

  <Step title="Explore sua cópia">
    Sua cópia abre no seu workspace e é iniciada automaticamente. Navegue até a aba **Preview** para vê-la em execução.
  </Step>
</Steps>

## Experimente

Crie um Remix do template **Supercar showcase**, um dos templates em destaque em [Começar a partir de um template](/pt/design/start-from-a-template):

<Frame>
  <img src="https://mintcdn.com/replit/9Q_lVrxG2Dh35jz1/images/design/replit-design/templates/supercar-showcase.webp?fit=max&auto=format&n=9Q_lVrxG2Dh35jz1&q=85&s=3807a96319b4d974f30bda957f6bd92e" alt="A capa do template Supercar showcase, uma landing page escura com um supercarro prateado em destaque" width="1920" height="1080" data-path="images/design/replit-design/templates/supercar-showcase.webp" />
</Frame>

<RemixButton replUrl="https://replit.com/t/replit-gallery/repls/Apex-01/view" label="Remix this app" />

## Continue construindo no seu Remix

Depois que seu Remix abrir no workspace, use o Agent para modificá-lo e expandi-lo. Digite um prompt na aba **Agent** descrevendo o recurso que você quer adicionar.

Para desfazer as alterações do Agent, selecione **Rollback to here** no Checkpoint criado após a mudança. Saiba mais sobre [Checkpoints e Rollbacks](/pt/features/version-control/checkpoints-and-rollbacks).

## Remix ou construir a partir de um prompt?

Ambos os caminhos terminam no mesmo lugar: um app seu que o Agent ajuda a evoluir. Eles começam de forma diferente:

|                             | Remix                                | Construir a partir de um prompt                   |
| --------------------------- | ------------------------------------ | ------------------------------------------------- |
| Ponto de partida            | Um app funcional, copiado exatamente | Um app que o Agent cria a partir da sua descrição |
| Primeiro resultado          | Imediato e idêntico à fonte          | Demora mais, e o resultado varia                  |
| Primeiro movimento do Agent | Aguarda sua direção                  | Planeja e constrói a partir do seu prompt         |

Se já existe um app próximo do que você quer, faça um remix dele: o primeiro turno do Agent trabalha em um app real e funcional em vez de começar do zero. Construa a partir de um prompt quando sua ideia não se parecer com nada que você consiga encontrar.

## Próximos passos

* **Explore mais remixes**: Navegue pela [comunidade](https://replit.com/community/all) para encontrar apps para fazer remix e aprender com eles
* **Construa do zero**: Experimente [criar seu próprio app](/pt/build/your-first-app) com o Agent para comparar a experiência
* **Publique para remix**: Compartilhe sua versão aprimorada para que outras pessoas possam construir sobre seu trabalho