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

> Aprenda a diferença entre Canvas e Preview no Replit e quando usar cada um para seus projetos.

O Replit oferece duas formas de trabalhar em um app: **Canvas** e **Preview**. A melhor parte? Você pode usá-los juntos — comece com um design bonito, refine-o e converta para um app totalmente funcional quando estiver pronto.

<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="O alternador de Canvas e Preview no Workspace, com uma dica de ferramenta explicando 'Volte para o modo Preview para interagir com suas criações em tamanho completo.'" width="2202" height="1410" data-path="images/replitai/canvas-preview-toggle.png" />
</Frame>

## O que é o Canvas?

O [Canvas](/pt/learn/design/canvas) permite que você crie sites e designs de apps bonitos e interativos em apenas alguns minutos. Simplesmente descreva sua ideia e o Replit a constrói para você.

O Canvas é perfeito para:

* **Testar suas ideias rapidamente**: Visualize o design do seu app antes de construir a funcionalidade
* **Criar sites polidos**: Landing pages, portfólios, menus de restaurante, páginas de eventos
* **Refinar seu design**: Ajuste cores, layouts e conteúdo instantaneamente

<Info>
  Designs do Canvas parecem e funcionam como apps reais, mas ainda não armazenam dados ou se conectam a serviços externos. Quando estiver satisfeito com a aparência de tudo, você pode converter seu design em um app completo com um clique. Os passos abaixo mostram como fazer isso.
</Info>

## O que é o Preview?

O Preview mostra sua criação como um aplicativo real e funcional que pode salvar dados, deixar pessoas fazerem login e conectar a outros serviços. É a visualização interativa em tamanho completo do seu app.

Use o Preview quando seu app precisar de:

* **Contas de usuário**: Deixar pessoas criar contas e fazer login
* **Salvar informações**: Armazenar dados como pedidos, mensagens ou preferências do usuário
* **Conectar a outros serviços**: Processar pagamentos, enviar e-mails ou obter dados de outros apps
* **Lidar com tarefas complexas**: Executar uma loja online, gerenciar reservas ou alimentar um dashboard

## Usando ambos os modos juntos

**Canvas e Preview são feitos para funcionar juntos**. Você não precisa escolher um ou outro. Você pode começar com design e evoluir para um app completo.

<Steps>
  <Step title="Projete primeiro">
    Comece no Canvas para visualizar rapidamente sua ideia. Foque em como seu app parece e se sente — o layout, cores, botões e experiência do usuário.
  </Step>

  <Step title="Refine e itere">
    Use **Reimagine** para explorar novas direções para o design selecionado, ou abra o [Visual Editor](/pt/learn/design/visual-editor) para clicar diretamente nos elementos e ajustá-los. Você também pode conversar com o Agent para descrever as alterações que deseja — elas aparecem imediatamente.

    <Frame>
      <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/canvas-reimagine.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=d913949ca41182092608c123828288f0" alt="O diálogo Reimagine your design no Canvas, mostrando prompts recomendados como 'Explore different approaches,' 'Try different layouts,' e 'Explore different vibes.'" 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="O painel Visual Editor aberto no Canvas, mostrando controles de tamanho de fonte, peso de fonte, alinhamento e cor para um elemento selecionado." width="2222" height="1572" data-path="images/replitai/canvas-visual-editor.png" />
    </Frame>
  </Step>

  <Step title="Converter para um app completo">
    Quando estiver satisfeito com seu design e pronto para adicionar funcionalidade real, selecione **Construir** para converter seu design em um app. Você pode criar um novo artefato ou aplicar o design a um existente. O Agent adiciona a capacidade de salvar dados, gerenciar contas de usuário e conectar a serviços — tudo mantendo seu design intacto. Consulte o guia [Transformar um design Figma em um app interativo](/pt/build/figma-to-app) para o fluxo de trabalho completo.

    <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="O diálogo Build or apply your designs no Canvas, mostrando opções para criar um novo artefato ou aplicar o design a uma criação existente." width="2210" height="1310" data-path="images/replitai/canvas-build-dialog.png" />
    </Frame>

    <Note>
      O Agent solicitará que você converta quando tentar adicionar um banco de dados ou recursos avançados.
    </Note>
  </Step>

  <Step title="Publicar e compartilhar">
    Uma vez que seu app esteja construído, publique-o para que qualquer pessoa possa acessá-lo online. O Replit gerencia toda a infraestrutura técnica para que seu app funcione de forma confiável para seu público.
  </Step>
</Steps>

## Quando usar cada modo

<CardGroup cols={2}>
  <Card title="Comece com Canvas" icon="paintbrush">
    * Você quer ver sua ideia rapidamente
    * Você está criando um site simples
    * Você quer testar designs diferentes
    * A velocidade é sua prioridade
  </Card>

  <Card title="Vá direto para o Preview" icon="cube">
    * Você sabe exatamente o que precisa
    * Seu app deve salvar dados desde o primeiro dia
    * As pessoas precisam fazer login
    * Você está conectando a outros serviços
  </Card>
</CardGroup>

<Tip>
  **Não sabe qual escolher?** Comece com Canvas. É mais rápido, e você sempre pode converter para um app completo depois. Seu trabalho nunca é desperdiçado — ele é transferido quando você atualiza.
</Tip>

## Diferenças principais

| Recurso                    | Canvas                         | Preview                                 |
| -------------------------- | ------------------------------ | --------------------------------------- |
| **Velocidade**             | Alguns minutos                 | Cerca de 10 minutos para apps completos |
| **Armazenamento de dados** | Apenas visual (sem salvamento) | Salva e recupera dados reais            |
| **Contas de usuário**      | Mostra como o login parece     | Funcionalidade de login real            |
| **Conectar a serviços**    | Não disponível                 | Pagamentos, e-mails, dados externos     |
| **Hospedagem**             | Hospedagem estática simples    | Escala com seu público                  |

## Próximos passos

<CardGroup cols={2}>
  <Card title="Canvas" icon="paintbrush" href="/pt/learn/design/canvas">
    Saiba mais sobre como criar designs
  </Card>

  <Card title="Visual Editor" icon="edit" href="/pt/learn/design/visual-editor">
    Faça alterações visuais com cliques
  </Card>

  <Card title="Agent" icon="robot" href="/references/agent/overview">
    Explore o que o Agent pode construir para você
  </Card>

  <Card title="Learn" icon="graduation-cap" href="https://learn.replit.com">
    Aprenda o fluxo de trabalho completo
  </Card>
</CardGroup>