Docs do ChanTan StudioA pré-visualização ao vivo do ChanTan Studio, explicada
O painel da direita é o seu app rodando de verdade, só para você: a barra de ferramentas, os tamanhos de celular e tablet e por que ele dorme após 20 minutos.
O lado direito do seu projeto é a pré-visualização ao vivo, identificada como “Pré-visualização do app”.
É o seu app, rodando de verdade. Não é uma imagem, não é um esboço. Você pode clicar nos links, preencher os formulários e navegar entre as páginas exatamente como um visitante faria.
Duas coisas para saber antes de tudo
1. A pré-visualização é privada. Ela não é o seu site publicado. Ninguém além de você consegue abri-la. Tudo o que você e a IA mudam aparece aqui primeiro. Os visitantes não veem nada até você tocar em “Publicar”.
2. A pré-visualização dorme de propósito. Depois de uns 20 minutos sem nenhuma atividade, o espaço de trabalho do seu app é pausado para economizar recursos. Com o projeto aberto e conectado, ele fica acordado por mais tempo, mas nunca além de uns 60 minutos.
Quando aparece “Seu app está dormindo”
Você vai ver um cartão com uma lua sobre uma imagem desfocada do seu app:
🌙 “Seu app está dormindo” — “Pausamos seu app para economizar recursos. Toque para acordá-lo.”
Isso não é um erro, e nada se perdeu. Seu código, seus dados e seu site publicado continuam intactos. Toque em “Acordar” e ele volta a rodar.
Acordar é grátis — nunca custa créditos.
A barra de ferramentas acima do seu app
Tudo o que fica nessa faixa é grátis.
| Controle | Rótulo | O que faz |
|---|---|---|
| Ícone de expandir | “Entrar em tela cheia” | Esconde o chat para a pré-visualização ocupar a janela inteira. Aperte ESC para sair. Não aparece no celular |
| Caixa de página | mostra / ou /sobre |
Ao abrir, lista as páginas do seu app — escolha uma para ir até ela |
| Três botões de tamanho | “Computador” · “iPad” · “Celular” | Mostra seu app em largura total, em 820 × 1180 e em 390 × 844 |
| Seta circular | “Atualizar pré-visualização” | Recarrega a página que está na tela |
| Seta saindo de uma caixa | “Abrir em nova aba” | Abre a mesma página em uma aba própria do navegador — continua sendo a pré-visualização privada |
| Lápis | “Editar textos, cores e fotos direto na tela” | Liga a edição com clique. Uma barra verde aparece; toque em “Cancelar” nessa barra para desligar |
Os tamanhos de dispositivo são reais, não um truque visual. Seu app acredita mesmo que está em um tablet de 820 de largura ou em um celular de 390, então o seu design responsivo reage de verdade. A moldura só é encolhida visualmente para caber na sua tela. Trocar de tamanho nunca recarrega nada, então você não perde o lugar onde estava.
São exatamente três tamanhos — não existe uma caixa de largura personalizada.
Algumas páginas ficam de fora da lista de propósito: as que precisam de um valor no endereço (um produto específico, um pedido específico) e as páginas “não encontrado” que pegam qualquer rota. Elas não podem ser abertas às cegas, por isso não são oferecidas.
Mensagens que flutuam sobre a pré-visualização
| Mensagem | O que significa |
|---|---|
| “Atualizando...” ou “Etapas 3/7” | A IA está mudando seu app neste momento. Normalmente atualiza sem recarregar nada |
| “A pré-visualização teve um problema.” com “Corrigir” e “Dispensar” | Seu app deu um erro. ⚠️ “Corrigir” inicia uma construção real da IA, então custa créditos. “Dispensar” só esconde a mensagem |
| “Vendo uma versão antiga — este NÃO é o estado atual” | Você está olhando uma versão salva do histórico. Toque em “Voltar para a atual” |
| “Voltando uma versão...” | Você tocou em Desfazer. Espere terminar |
A oferta “Corrigir” fica escondida de propósito enquanto uma construção está rodando, enquanto a pré-visualização está iniciando e durante uma reconexão — assim nunca te oferecem uma correção paga para um problema que está prestes a se resolver sozinho.
Outras coisas que podem aparecer no lugar do seu app
| O que você vê | O que fazer |
|---|---|
| Uma imagem desfocada com uma etiqueta “Carregando…” | Nada — ela some sozinha |
| Uma tela com a logo do ChanTan e uma barra de progresso | Espere. Seu espaço de trabalho está iniciando ou sua primeira construção está rodando. Cada linha é uma etapa real |
| “Reconectando à sua pré-visualização…” | Espere uns 8 segundos. Se não se recuperar, aparece um botão “Acordar” — toque nele |
| Um único botão “Tentar de novo” | Toque nele. Se continuar falhando, reinicie a pré-visualização (abaixo) |
ChanTan verifica em silêncio a saúde da pré-visualização a cada 3 minutos enquanto você está olhando o projeto, e de novo quando você volta para a aba. Normalmente você não vê nada — um início lento nunca é confundido com um app morto.
Reiniciar a pré-visualização manualmente
É o caminho certo quando a pré-visualização está travada, em branco ou se comportando de forma estranha depois de várias atualizações.
- Abra o painel “Histórico de versões” à esquerda do seu projeto.
- Escolha “Reiniciar pré-visualização”.
- Confirme com “Sim, reiniciar”.
A confirmação diz exatamente o que acontece: “Isso reconstrói a pré-visualização do seu app do zero. Normalmente leva 30–60 segundos (até 3 minutos em casos raros). Seu código e seus dados não são afetados — só o contêiner da pré-visualização é reiniciado.”
É grátis e é seguro.
A pré-visualização é o meu site publicado?
Não. São duas coisas diferentes:
| Pré-visualização | Site publicado | |
|---|---|---|
| Quem pode ver | Só você | Qualquer pessoa com o link |
| O que mostra | Seu trabalho mais recente | Só o que você publicou por último |
| Dorme? | Sim, depois de ~20 minutos | Nunca |
“Abrir em nova aba” abre a pré-visualização, não o seu site publicado — e essa aba para de funcionar quando a pré-visualização dorme. Para compartilhar seu app, publique.
Limites, com honestidade
- Acordar, reiniciar, atualizar, trocar de tamanho, tela cheia e abrir em nova aba são todos grátis. Só o trabalho que a IA faz por você custa créditos.
- A pré-visualização reflete seu trabalho mais recente poucos segundos depois de cada mudança; a troca de fotos recarrega uma vez, e essa única recarga é esperada.
- Se a pré-visualização está branca ou vazia e atualizar não ajuda, use “Reiniciar pré-visualização” primeiro — resolve muito mais casos do que uma simples atualização.