O Replit oferece duas formas de criar aplicativos: Canvas e Modo App. O melhor de tudo? Você pode usá-los juntos — comece com um design bonito, refine-o e converta para um aplicativo totalmente funcional quando estiver pronto.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.
O que é o Canvas?
O Canvas permite criar sites e designs de aplicativos bonitos e interativos em apenas alguns minutos. Basta descrever sua ideia e o Replit a constrói para você. O Canvas é perfeito para:- Testar suas ideias rapidamente: Visualize o design do seu aplicativo antes de desenvolver as funcionalidades
- Criar sites sofisticados: Páginas de destino, portfólios, cardápios de restaurantes, páginas de eventos
- Aperfeiçoar seu design: Ajuste cores, layouts e conteúdo instantaneamente
Os designs do Canvas parecem e funcionam como aplicativos reais, mas ainda não armazenam dados nem se conectam a serviços externos. Quando você estiver satisfeito com a aparência de tudo, pode converter seu design em um aplicativo completo com um clique. Os passos abaixo mostram como fazer isso.
O que é o Modo App?
O Modo App cria aplicativos reais e funcionais que podem salvar dados, permitir login de usuários e se conectar a outros serviços. Use o Modo App quando seu aplicativo precisar de:- Contas de usuário: Permitir que as pessoas criem contas e façam 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 buscar dados de outros aplicativos
- Lidar com tarefas complexas: Gerenciar uma loja online, administrar reservas ou alimentar um painel de controle
Veja a diferença em ação
Esta comparação mostra o mesmo cardápio de restaurante construído nos dois modos usando um prompt idêntico. Alterne entre as abas para ver o que cada modo criou:- Canvas
- Modo App
Canvas — Construído em 1 minuto
- Design bonito e sofisticado
- Tipografia e layout elegantes
- Perfeito para apresentar sua visão
- Cardápio estático (sem funcionalidade de pedidos)
Usando os dois modos juntos
Canvas e Modo App foram criados para funcionar juntos. Você não precisa escolher um ou outro. Pode começar com o design e evoluir para um aplicativo completo.Comece pelo design
Inicie no Canvas para visualizar rapidamente sua ideia. Foque em como seu aplicativo parece e se comporta — o layout, as cores, os botões e a experiência do usuário.
Refine e itere
Use o Editor Visual para clicar diretamente nos elementos e ajustá-los, ou converse com o Agent para descrever as mudanças que deseja. As alterações aparecerão imediatamente.
Converta para um aplicativo completo
Quando estiver satisfeito com seu design e pronto para adicionar funcionalidades reais, peça ao Agent para converter seu design em um aplicativo. O Agent adicionará a capacidade de salvar dados, gerenciar contas de usuário e se conectar a serviços — tudo mantendo seu design intacto. Veja o guia Do Design ao App para o fluxo de trabalho completo.
O Agent solicitará que você converta para o Modo App quando você tentar adicionar um banco de dados ou funcionalidades avançadas.
Quando usar cada modo
Comece com Canvas
- Você quer ver sua ideia rapidamente
- Está criando um site simples
- Quer testar diferentes designs
- Velocidade é sua prioridade
Vá direto para o Modo App
- Você sabe exatamente o que precisa
- Seu aplicativo precisa salvar dados desde o primeiro dia
- As pessoas precisam fazer login
- Você está se conectando a outros serviços
Principais diferenças
| Funcionalidade | Canvas | Modo App |
|---|---|---|
| Velocidade | Alguns minutos | Cerca de 10 minutos para apps completos |
| Armazenamento de dados | Apenas visual (sem salvar) | Salva e recupera dados reais |
| Contas de usuário | Mostra como o login parece | Funcionalidade de login real |
| Conexão 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
Canvas
Saiba mais sobre como criar designs
Editor Visual
Faça alterações visuais com cliques
Agent
Explore o que o Agent pode construir para você
Aprenda
Aprenda o fluxo de trabalho completo