Docs do ChanTan StudioEditar textos, cores e fotos com um clique no ChanTan Studio
Mude palavras, cores e fotos clicando nelas direto na pré-visualização: texto e cor são grátis, tudo pode ser desfeito e você não precisa da IA.
Você não precisa pedir para a IA cada mudança pequena. Clique direto em uma palavra, uma cor ou uma foto na sua pré-visualização e mude você mesmo.
Editar texto e cor é grátis. Enviar sua própria foto também é grátis. Só gerar uma foto nova com IA custa créditos, e o preço aparece antes de você confirmar.
1. Ligue a edição direta
Na barra de ferramentas da pré-visualização, aperte o lápis — o rótulo dele é “Editar textos, cores e fotos direto na tela”.
Uma barra verde aparece no topo: “Clique em um texto para digitar · clique em uma foto para trocar · escolha as cores — salva direto no seu código”.
Para sair da edição direta, aperte “Cancelar” do lado direito dessa mesma barra verde (ou aperte o lápis de novo). Cancelar só desliga o modo — toda edição que você já salvou continua exatamente onde está.
2. Aponte para o que você quer mudar
Passar o mouse sobre qualquer coisa editável contorna o item com uma caixa verde tracejada. Clicar nele deixa o contorno verde sólido e abre uma pequena barra de ferramentas flutuante.
3. Mude as palavras
Clique bem em cima das letras — clicar no espaço vazio ao lado não conta. Um cursor aparece onde você clicou e você digita ali mesmo.
Depois aperte “✓ Save” (salvar) para manter, ou “✕” para jogar a mudança fora.
Um título dividido em duas linhas é tratado como dois textos separados — você edita a linha em que clicou, e a outra fica como está.
4. Mude uma cor
Selecionar qualquer item editável também mostra uma barra de cores com duas fileiras de amostras:
- “A” = a cor do texto
- “BG” = a cor de fundo
Cada fileira mostra as cores da marca do seu próprio projeto, lidas ao vivo do seu design, mais um botão arco-íris que abre o seletor de cores do seu sistema para qualquer cor personalizada.
A cor muda na hora, como pré-visualização. Ela só é gravada no seu app quando você aperta “✓ Save”; “✕” devolve a cor antiga. Só a cor muda — tamanho, alinhamento e espaçamento ficam exatamente como estavam.
5. Troque uma foto pela sua (grátis)
Clique em uma foto e a barra de ferramentas mostra “⬆ Replace” (trocar) e “✨ Generate” (gerar).
Aperte “⬆ Replace” para abrir o seletor de arquivos e escolher uma imagem.
| Arquivos aceitos | PNG, JPG/JPEG, WebP, GIF, AVIF |
| Tamanho máximo | 15 MB |
| Custo | Grátis — a janela diz isso: “Ou envie sua própria foto — grátis” |
Você vê “Enviando sua foto…” e depois “Foto trocada”. A pré-visualização se atualiza sozinha uma vez quando o arquivo chega (em no máximo uns 12 segundos), então você não deve precisar atualizar na mão.
6. Ou gere uma foto nova com IA (custa créditos)
Aperte “✨ Generate” e uma janela se abre:
- Descreva a foto. Por exemplo: “interior de uma cafeteria aconchegante, luz quente”. No mínimo 2 caracteres.
- Escolha uma qualidade. Dois cards, cada um mostrando seu preço em créditos:
- “Padrão” — “Rápida e com boa qualidade” — cerca de 14 segundos
- “Premium” — “Melhor qualidade, ótima com texto” — cerca de 32 segundos
- Aperte “Gerar”. Uma barra de tempo real passa por “Compondo a cena…”, “Pintando os detalhes…”, “Finalizando…”.
- Decida. Você vê a foto antiga e a nova lado a lado, com os rótulos “Atual” e “Nova”, e os botões “Usar esta foto”, “Tentar outra” e “Mudar a descrição”.
⚠️ A cobrança acontece no momento em que a foto é criada — não quando você aceita. Apertar “Tentar outra” é uma segunda cobrança, e cancelar depois de ver uma foto não devolve os créditos. Uma mensagem avisa na hora: “{n} créditos cobrados por esta foto”. Nada é cobrado se a geração falhar.
Com as configurações de hoje, isso dá 1 crédito na “Padrão” e 22 créditos na “Premium”. Os preços são calculados ao vivo a partir da sua conta, então o número impresso no card é sempre a verdade — confie nele mais do que em qualquer valor citado em outro lugar.
✅ Pronto! Você vê “Salvo — sua alteração já está no código”, e a mudança aparece no seu app na mesma hora.
São mudanças reais no seu app, não truques de pré-visualização. E toda edição direta salva uma versão completa do seu projeto antes de gravar qualquer coisa — então o botão “Desfazer” de sempre devolve tudo exatamente como estava, inclusive a foto de verdade.
O que você pode e não pode mudar desse jeito
A edição com clique é estreita de propósito. Ela muda as palavras que você vê, a cor do texto, a cor de fundo e as fotos. A lista é só essa.
Todo o resto vai pelo chat:
- Layout, espaçamento, alinhamento, tamanho do texto
- Adicionar, remover ou reordenar seções e páginas
- Animações e movimento
- Comportamento dos botões, links, formulários
- Qualquer coisa que venha dos seus dados
Quando você clica em algo que ela não consegue mudar com segurança, ela recusa em vez de chutar:
| Mensagem | O que fazer |
|---|---|
| “This text comes from data — ask for the change in the chat.” (este texto vem dos seus dados) | Essa palavra é preenchida a partir de uma lista que seu app salva. Mude o registro em “Gerenciar ▾” → “Banco de dados”, ou digite a mudança no chat |
| “This element's styling is dynamic — ask for the change in the chat.” (o estilo deste elemento é dinâmico) | Digite a mudança de cor no chat |
| “This changed since you opened it — reopen and try again.” (isto mudou desde que você abriu) | Atualize a pré-visualização, clique no item de novo e refaça a edição |
| “Couldn't apply that edit — ask for the change in the chat instead.” (não foi possível aplicar essa edição) | Descreva a mudança no chat |
| “This image isn't part of your project — ask for the change in the chat.” (esta imagem não faz parte do seu projeto) | Essa foto vem de outro site. Peça no chat |
| “This file is managed by Chantan — ask in chat to change it.” (este arquivo é gerenciado por Chantan) | Peça no chat |
| “A build is running — try again when it finishes.” (uma construção está rodando) | Espere a construção terminar |
⚠️ Não existe nenhum botão “Perguntar à IA” em lugar nenhum. Versões antigas dessas mensagens mencionavam um; ele nunca existiu. “Peça no chat” significa simplesmente: digite seu pedido na caixa do chat, à esquerda, e envie.
Problemas no envio
| Mensagem | O que fazer |
|---|---|
| “Please choose an image file (PNG, JPG, WebP…).” (escolha um arquivo de imagem) | Escolha um arquivo de imagem de verdade |
| “That image is over 15 MB — please choose a smaller one.” (a imagem passa de 15 MB) | Recorte ou comprima a imagem antes |
| “That file doesn't look like an image — please choose a PNG, JPG or WebP.” (o arquivo não parece uma imagem) | Salve o arquivo de novo como PNG ou JPG |
| “Couldn't process that image — try a plain PNG or JPG (animated images aren't supported).” (imagens animadas não são aceitas) | Use uma imagem parada |
| “Could not save the image. Try again.” (não foi possível salvar a imagem) | Tente de novo — o problema não é o seu arquivo |
| “Slow down a moment — too many edits.” (edições demais) | Você bateu no limite de 40 edições por minuto. Pause alguns segundos |
Se você trocou uma foto e ainda vê a antiga depois de uns 12 segundos, aperte “Atualizar pré-visualização”. Se continuar velha, reinicie a pré-visualização pelo “Histórico de versões”.
Limites honestos
- Você não pode editar enquanto a IA está construindo. O lápis se desliga sozinho, e qualquer edição que escapar é recusada — assim seu clique e o trabalho da IA nunca brigam pelo mesmo arquivo.
- A edição fica bloqueada enquanto você está vendo uma versão antiga, de propósito.
- Se o lápis não estiver lá, essa pré-visualização em particular não informou que tem partes editáveis — projetos mais antigos mostram uma ferramenta de seta simples no lugar, que descreve o que você clicou e deixa essa descrição na caixa do chat para você. Acordar ou reiniciar a pré-visualização às vezes traz o lápis de volta. Você nunca vai ter um lápis que não faz nada.
- Algumas mensagens ficam em inglês em todos os idiomas do estúdio: a pequena barra flutuante sobre o item selecionado (“⬆ Replace”, “✨ Generate”, “✓ Save”), as mensagens de recusa “isso não pode ser editado aqui” e as mensagens de erro de envio. A barra verde, a janela de fotos e os nomes das qualidades estão traduzidos. Tudo funciona; só esses textos estão sem tradução.