A aba Código — leia e edite o código do seu app
ResumindoA aba Código mostra todos os arquivos do app em uma árvore de pastas, com um editor ao lado. Clique em um arquivo para ler, digite para alterar e clique em Salvar (ou ⌘S / Ctrl+S); cada salvamento vira uma versão para a qual você pode voltar. Os apps são feitos com TanStack Start, React e TypeScript. O código é seu — baixe em Configurações do projeto → Exportar ou mantenha no GitHub.
Você nunca precisa abrir o código — o MonstarX escreve e altera tudo para você. Mas ele está todo ali, à vista, sempre que você (ou um desenvolvedor que trabalha com você) quiser dar uma olhada. A aba Código mostra todos os arquivos do app e permite que você faça suas próprias alterações.
O que a aba Código mostra?
Seção intitulada “O que a aba Código mostra?”À esquerda, uma árvore de pastas com todos os arquivos do app. À direita, o arquivo que você escolheu, com o código colorido e as linhas numeradas.
No celular, toque no nome do arquivo no topo para abrir a árvore em uma folha.
Onde fica cada coisa?
Seção intitulada “Onde fica cada coisa?”Você não precisa saber disso, mas ajuda quando quiser acompanhar o código:
| Pasta ou arquivo | O que tem dentro |
|---|---|
src/routes/ | Um arquivo por página — index.tsx é a página inicial, pricing.tsx é /pricing. |
src/components/ | Peças usadas em várias páginas, como o cabeçalho e o rodapé. |
src/server/ | O código que roda no servidor: salvar um agendamento, ler a grade de horários. |
src/db/ | A estrutura dos dados do app. |
migrations/ | Os passos que criam e alteram as tabelas do banco de dados. |
public/ | Arquivos servidos do jeito que estão, como ícones. |
src/styles.css | Cores, fontes e o restante do estilo. |
Com o que meu app é feito?
Seção intitulada “Com o que meu app é feito?”Os apps que o MonstarX cria são aplicações web modernas feitas com:
- TypeScript — JavaScript com verificações que pegam erros antes de o app rodar.
- React — a forma mais usada de construir interfaces web.
- TanStack Start — um framework que transforma essas páginas React em um app completo com servidor, para que as páginas carreguem rápido e seus dados fiquem protegidos no servidor.
- Tailwind CSS — um kit de estilos para cores, espaçamentos e layout.
É isso também que o cartão do projeto mostra na página Projetos, por exemplo TanStack Start · React · TypeScript. Um app que você importou continua com a tecnologia com que foi feito.
Como edito um arquivo por conta própria?
Seção intitulada “Como edito um arquivo por conta própria?”-
Abra a aba Código e clique no arquivo na árvore.
-
Clique no editor e faça a alteração. Aparece Não salvo no topo, com Descartar e Salvar.
-
Clique em Salvar ou aperte ⌘S (Mac) ou Ctrl+S (Windows). A prévia é atualizada na hora.
Cada salvamento fica guardado como uma versão com o nome Editar seguido do caminho do arquivo, como Editar src/routes/grade.tsx, para você poder voltar se algo der errado. Se o projeto estiver vinculado ao GitHub com o envio automático ligado (o padrão), a alteração também vai para lá. O MonstarX vê sua edição na próxima vez que você pedir alguma coisa.
Descartar joga fora as alterações que você não salvou.
Quando não consigo editar?
Seção intitulada “Quando não consigo editar?”- Enquanto o MonstarX está alterando o app. Os arquivos ficam só para leitura até ele terminar: O MonstarX está modificando seu app, então os arquivos estão em modo de leitura até que ele termine.
- Quando o arquivo mudou depois que você começou. Se o MonstarX ou outra pessoa salvou o arquivo nesse meio-tempo, você vê Este arquivo foi alterado depois que você começou a editar. e o botão Salvar fica apagado. Seu rascunho é mantido até você descartá-lo, então dá para comparar, descartar e refazer a alteração.
- Arquivos gerenciados pelo MonstarX. Nos apps que o MonstarX cria, os arquivos de configuração (como o
package.jsone as configurações do Vite e do TypeScript) e os serviços já incluídos para contas, banco de dados, e-mail, armazenamento e IA ficam por conta do MonstarX. Eles não aparecem na árvore, mas estão no zip quando você exporta. - Acesso só para visualizar. Quem recebeu o projeto com acesso Pode ver e comentar vê Somente leitura: você pode ver o código, mas não alterá-lo. Quem tem acesso Pode editar pode editar e salvar arquivos como você.
Posso baixar meu código?
Seção intitulada “Posso baixar meu código?”Sim. O código é seu: você é dono do que cria com o MonstarX, incluindo o código que ele escreve. Há duas formas de levar tudo com você:
- Baixar um zip — ConfiguraçõesExportar no espaço de trabalho e depois Baixar .zip. Você recebe um projeto independente que roda no seu próprio computador. Veja Exporte seu código.
- Manter no GitHub — vincule um repositório, e cada alteração vira um commit. Veja GitHub.
Perguntas frequentes
Seção intitulada “Perguntas frequentes”Preciso saber programar para usar o MonstarX?
Não. A aba Código está ali para quando você quiser dar uma olhada. Tudo pode ser feito descrevendo o que você quer no chat.
O MonstarX vai desfazer minhas edições?
Não. Ele lê os arquivos do jeito que estão quando você envia a próxima solicitação, incluindo suas edições. Se quiser que ele saiba por que você mudou algo, comente no chat.
Posso criar um arquivo novo na aba Código?
A aba Código edita arquivos que já existem. Para criar novas páginas ou arquivos, peça ao MonstarX no chat.
Como adiciono um pacote ou uma biblioteca?
Peça no chat — por exemplo, “Use uma biblioteca de seletor de data no formulário de agendamento”. O MonstarX adiciona os pacotes para você.
De quem é o código que o MonstarX escreve?
É seu. Os termos do MonstarX dizem que você é dono dos seus prompts, arquivos, código e apps, e pode exportá-los quando quiser.