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

# Canvas vs. Aperçu

> Découvrez la différence entre Canvas et Aperçu dans Replit, et quand utiliser chacun pour vos projets.

Replit offre deux façons de travailler sur une application : **Canvas** et **Aperçu**. Le meilleur aspect ? Vous pouvez les utiliser ensemble — commencez avec un beau design, affinez-le, puis convertissez-le en application entièrement fonctionnelle quand vous êtes prêt.

<Frame>
  <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-preview-toggle.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=a8c72c7986b4fba0d2dca5a4a0a9a735" alt="Le bouton de basculement Canvas et Aperçu dans l'Espace de travail, avec une info-bulle expliquant « Revenez en mode Aperçu pour interagir avec vos créations en taille réelle. »" width="2202" height="1410" data-path="images/replitai/canvas-preview-toggle.png" />
</Frame>

## Qu'est-ce que Canvas ?

[Canvas](/fr/learn/design/canvas) vous permet de créer de beaux sites web interactifs et des designs d'application en quelques minutes seulement. Décrivez simplement votre idée et Replit la construit pour vous.

Canvas est parfait pour :

* **Tester vos idées rapidement** : Visualisez le design de votre application avant de construire les fonctionnalités
* **Créer des sites web soignés** : Pages d'accueil, portfolios, menus de restaurant, pages d'événements
* **Affiner votre design** : Ajustez les couleurs, les mises en page et le contenu instantanément

<Info>
  Les designs Canvas ressemblent et fonctionnent comme de vraies applications, mais ils ne stockent pas encore de données ni ne se connectent à des services externes. Lorsque vous êtes satisfait de l'apparence de tout, vous pouvez convertir votre design en application complète en un seul clic. Les étapes ci-dessous vous montrent comment.
</Info>

## Qu'est-ce qu'Aperçu ?

L'Aperçu montre votre création comme une application réelle et fonctionnelle qui peut sauvegarder des données, permettre aux gens de se connecter et se connecter à d'autres services. C'est la vue interactive en taille réelle de votre application.

Utilisez l'Aperçu lorsque votre application doit :

* **Comptes utilisateurs** : Permettre aux gens de créer des comptes et de se connecter
* **Sauvegarder des informations** : Stocker des données comme des commandes, des messages ou des préférences utilisateur
* **Se connecter à d'autres services** : Traiter des paiements, envoyer des e-mails ou récupérer des données d'autres applications
* **Gérer des tâches complexes** : Gérer une boutique en ligne, des réservations ou alimenter un tableau de bord

## Utiliser les deux modes ensemble

**Canvas et Aperçu sont conçus pour fonctionner ensemble**. Vous n'avez pas à en choisir un seul. Vous pouvez commencer par le design et évoluer vers une application complète.

<Steps>
  <Step title="Concevoir d'abord">
    Commencez dans Canvas pour visualiser rapidement votre idée. Concentrez-vous sur l'apparence et la sensation de votre application — la mise en page, les couleurs, les boutons et l'expérience utilisateur.
  </Step>

  <Step title="Affiner et itérer">
    Utilisez **Réimaginer** pour explorer de nouvelles directions pour le design sélectionné, ou ouvrez l'[Éditeur Visuel](/fr/learn/design/visual-editor) pour cliquer directement sur les éléments et les ajuster. Vous pouvez également discuter avec Agent pour décrire les modifications souhaitées — elles apparaissent immédiatement.

    <Frame>
      <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-reimagine.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=d913949ca41182092608c123828288f0" alt="La boîte de dialogue Réimaginer votre design dans Canvas, affichant des invites recommandées telles que « Explorer différentes approches », « Essayer différentes mises en page » et « Explorer différentes ambiances. »" width="2216" height="1616" data-path="images/replitai/canvas-reimagine.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-visual-editor.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=401ee84fd5add21fc418c0521ac22c7f" alt="Le volet de l'Éditeur Visuel ouvert dans Canvas, affichant la taille de police, le poids de police, l'alignement et les contrôles de couleur pour un élément sélectionné." width="2222" height="1572" data-path="images/replitai/canvas-visual-editor.png" />
    </Frame>
  </Step>

  <Step title="Convertir en application complète">
    Lorsque vous êtes satisfait de votre design et prêt à ajouter de vraies fonctionnalités, sélectionnez **Construire** pour convertir votre design en application. Vous pouvez créer un nouvel artefact ou appliquer le design à un existant. Agent ajoute la capacité de sauvegarder des données, de gérer des comptes utilisateurs et de se connecter à des services — tout en préservant votre design. Consultez le guide [Transformer un design Figma en application interactive](/fr/build/figma-to-app) pour le flux complet.

    <Frame>
      <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-build-dialog.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=ca2917d4a7e9650583fbb1ec71cc0ee3" alt="La boîte de dialogue Construire ou appliquer vos designs dans Canvas, affichant des options pour créer un nouvel artefact ou appliquer le design à une création existante." width="2210" height="1310" data-path="images/replitai/canvas-build-dialog.png" />
    </Frame>

    <Note>
      Agent vous invitera à convertir lorsque vous essaierez d'ajouter une base de données ou des fonctionnalités avancées.
    </Note>
  </Step>

  <Step title="Publier et partager">
    Une fois votre application construite, publiez-la pour que n'importe qui puisse y accéder en ligne. Replit gère toute l'infrastructure technique pour que votre application fonctionne de manière fiable pour votre audience.
  </Step>
</Steps>

## Quand utiliser chaque mode

<CardGroup cols={2}>
  <Card title="Commencer avec Canvas" icon="paintbrush">
    * Vous souhaitez voir votre idée rapidement
    * Vous créez un site web simple
    * Vous souhaitez tester différents designs
    * La rapidité est votre priorité
  </Card>

  <Card title="Aller directement à l'Aperçu" icon="cube">
    * Vous savez exactement ce dont vous avez besoin
    * Votre application doit sauvegarder des données dès le premier jour
    * Les gens doivent se connecter
    * Vous vous connectez à d'autres services
  </Card>
</CardGroup>

<Tip>
  **Vous n'êtes pas sûr de votre choix ?** Commencez avec Canvas. C'est plus rapide, et vous pouvez toujours convertir en application complète plus tard. Votre travail n'est jamais perdu — il est transféré lorsque vous passez à la version supérieure.
</Tip>

## Différences clés

| Fonctionnalité             | Canvas                                | Aperçu                                             |
| -------------------------- | ------------------------------------- | -------------------------------------------------- |
| **Rapidité**               | Quelques minutes                      | Environ 10 minutes pour des applications complètes |
| **Stockage de données**    | Visuel uniquement (pas de sauvegarde) | Sauvegarde et récupère des données réelles         |
| **Comptes utilisateurs**   | Montre à quoi ressemble la connexion  | Fonctionnalité de connexion réelle                 |
| **Connexion aux services** | Non disponible                        | Paiements, e-mails, données externes               |
| **Hébergement**            | Hébergement statique simple           | S'adapte à votre audience                          |

## Prochaines étapes

<CardGroup cols={2}>
  <Card title="Canvas" icon="paintbrush" href="/fr/learn/design/canvas">
    En savoir plus sur la création de designs
  </Card>

  <Card title="Éditeur Visuel" icon="edit" href="/fr/learn/design/visual-editor">
    Apporter des modifications visuelles avec des clics
  </Card>

  <Card title="Agent" icon="robot" href="/fr/references/agent/overview">
    Explorer ce qu'Agent peut construire pour vous
  </Card>

  <Card title="Apprendre" icon="graduation-cap" href="https://learn.replit.com">
    Apprendre le flux de travail complet
  </Card>
</CardGroup>
