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

# Remixer une application

> Créez votre propre copie d'une Replit App publique ou d'un modèle pour l'explorer, la personnaliser et construire dessus dans votre espace de travail.

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

Le Remix vous permet de démarrer à partir d'applications existantes créées par la communauté. C'est plus rapide que de construire à partir de zéro, et c'est une excellente façon d'apprendre à partir de code fonctionnel.

<Tip>
  Nouveau sur Replit ? Essayez de [créer votre première application](/fr/build/your-first-app) pour découvrir comment Agent fonctionne à partir de zéro.
</Tip>

## Qu'est-ce qu'un Remix

Un **Remix** est une nouvelle Replit App que vous créez à partir d'une application à laquelle vous avez actuellement accès. Lorsque vous remixez une application publique ou un modèle, vous obtenez votre propre copie avec laquelle interagir et que vous pouvez améliorer de manière itérative. Les modifications que vous apportez dans votre Remix n'affectent pas l'application d'origine.

Votre Remix crédite sa source : il affiche un lien **Remixé depuis** qui renvoie vers l'original, et le prompt de construction de l'original apparaît sur sa page de couverture.

## Ce que votre Remix inclut

Un Remix est une copie complète et fonctionnelle, nettement séparée de l'original :

* **Tous les fichiers et la configuration** sont copiés, de sorte que l'application s'exécute exactement comme la source.
* **L'historique des points de contrôle de la source** vous accompagne, étiqueté comme historique provenant de l'application source. Vous pouvez revenir à n'importe lequel de ces points de contrôle ; la conversation qui les a produits reste avec l'original.
* **Un tout nouvel Agent.** Votre Remix démarre avec un Agent tout neuf et sans historique de discussion hérité.
* **Les noms des secrets, pas leurs valeurs.** Si l'application utilise des secrets (comme des clés API), votre Remix les liste pour que vous sachiez quoi renseigner, avec des valeurs vides. Les valeurs ne sont copiées que lorsque vous remixez votre propre application.
* **Une base de données neuve.** Votre Remix ne se connecte jamais à la base de données de l'original. Si l'original le propose, une option **Copier les données de l'application d'origine** copie les données elles-mêmes ; vos modifications ne touchent toujours jamais la source.
* **Une configuration de connexion neuve** pour les applications qui utilisent Replit Auth.

Non copiés : les déploiements, les domaines et les configurations de connecteurs, que vous configurez vous-même sur votre copie. Les Remixes démarrent également en privé, de sorte que rien n'est partagé tant que vous ne choisissez pas de publier.

## Comment remixer une application

<Steps>
  <Step title="Ouvrir la page de couverture de l'application">
    Trouvez une application que vous souhaitez remixer, par exemple une application de la [communauté](https://replit.com/community/all). Sa page de couverture affiche un aperçu en direct et des options de partage.
  </Step>

  <Step title="Remixer l'application">
    Sélectionnez **Remixer cette application** pour commencer à créer votre propre version.
  </Step>

  <Step title="Compléter les détails de l'application">
    Dans la boîte de dialogue **Remixer l'application**, donnez un nom à votre copie et une description facultative, puis sélectionnez **Remixer l'application**. Vous pouvez modifier ces détails ultérieurement.

    <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="Boîte de dialogue Remixer l'application affichant le nom, la description et les paramètres de confidentialité de l'application" width="1222" height="1202" data-path="images/getting-started/quickstart_remix_dialog.png" />
    </Frame>
  </Step>

  <Step title="Explorer votre copie">
    Votre copie s'ouvre dans votre espace de travail et démarre automatiquement. Accédez à l'onglet **Preview** pour la voir s'exécuter.
  </Step>
</Steps>

## Essayez-le

Créez un Remix du modèle **Supercar showcase**, l'un des modèles en vedette de [Démarrer à partir d'un modèle](/fr/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="La couverture du modèle Supercar showcase, une page d'atterrissage sombre avec une image principale de supercar argentée" 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="Remixer cette application" />

## Construire sur votre Remix

Une fois que votre Remix s'ouvre dans l'espace de travail, utilisez Agent pour le modifier et l'étendre. Saisissez un prompt dans l'onglet **Agent** décrivant la fonctionnalité que vous souhaitez ajouter.

Pour annuler les modifications d'Agent, sélectionnez **Revenir ici** dans le point de contrôle créé après la modification. En savoir plus sur les [points de contrôle et restaurations](/fr/features/version-control/checkpoints-and-rollbacks).

## Remixer ou construire à partir d'un prompt ?

Les deux chemins mènent au même endroit : une application à vous qu'Agent vous aide à faire évoluer. Ils démarrent différemment :

|                         | Remix                                               | Construire à partir d'un prompt                             |
| ----------------------- | --------------------------------------------------- | ----------------------------------------------------------- |
| Point de départ         | Une application fonctionnelle, copiée à l'identique | Une application qu'Agent crée à partir de votre description |
| Premier résultat        | Immédiat, et identique à la source                  | Prend plus de temps, et le résultat varie                   |
| Première action d'Agent | Attend vos instructions                             | Planifie et construit à partir de votre prompt              |

Si une application proche de ce que vous voulez existe déjà, remixez-la : le premier tour d'Agent porte sur une application réelle et fonctionnelle plutôt que de partir d'une page blanche. Construisez à partir d'un prompt lorsque votre idée ne ressemble à rien de ce que vous pouvez trouver.

## Prochaines étapes

* **Explorer plus de remixes** : Parcourez la [communauté](https://replit.com/community/all) pour trouver des applications à remixer et à partir desquelles apprendre
* **Construire à partir de zéro** : Essayez de [créer votre propre application](/fr/build/your-first-app) avec Agent pour comparer l'expérience
* **Publier pour le remixage** : Partagez votre version améliorée pour que d'autres puissent s'appuyer sur votre travail