Saltar para o conteúdo principal
O Editor de Projeto inclui gerenciamento de layout e ferramentas integradas que impulsionam sua experiência de criação de apps. Esses recursos do Editor de Projeto são especializados em lidar com aspectos específicos do processo de desenvolvimento, permitindo que você foque em criar em vez de configurar.

​
Layout personalizável do Editor de Projeto

As ferramentas de gerenciamento de layout do Editor de Projeto permitem personalizar os componentes do ambiente de desenvolvimento. Ele é composto pelos seguintes tipos de elementos de interface do usuário:
ElementoDescriçãoCapacidadesCasos de uso
JanelasAbas do navegador que contêm um ou mais painéis
  • Podem ser organizadas em várias telas
  • Organizar o Editor de Projeto em várias telas
  • Trabalhar em projetos diferentes simultaneamente
PainéisSeções de uma janela que contêm uma ou mais abas
  • Suportam divisão horizontal e vertical
  • Podem ser redimensionados e reorganizados
  • Podem ser convertidos em um painel flutuante dentro da janela
  • Ver o código e o preview lado a lado
  • Criar layouts personalizados para diferentes tarefas de desenvolvimento
AbasContêm exatamente uma ferramenta do Editor de Projeto, como o editor de arquivos, o Preview ou o Agent
  • Podem ser movidas entre painéis e reordenadas dentro deles
  • Podem alternar entre diferentes arquivos ou ferramentas com um único clique
  • Abrir diferentes ferramentas ou arquivos quando precisar deles
O vídeo a seguir identifica cada elemento de layout do Editor de Projeto:

​
Árvore de arquivos

A árvore de arquivos lista todos os arquivos e diretórios do seu Replit App.
Selecione o ícone ícone de pasta com setas de pasta à esquerda para alternar a visibilidade da árvore de arquivos.
Você pode realizar as seguintes ações na árvore de arquivos:
  • Selecionar uma pasta para exibir seu conteúdo
  • Selecionar um arquivo ou arrastá-lo para um painel para abri-lo em um editor de arquivos
  • Realizar operações de arquivo como duplicar, renomear, mover, baixar ou excluir
O vídeo a seguir mostra várias ações da árvore de arquivos:

​
Dock de ferramentas

O dock de ferramentas permite pesquisar e abrir ferramentas do Editor de Projeto em novas abas.
Selecione entre as ferramentas mais usadas ou selecione o ícone ícone Todas as ferramentas Todas as ferramentas para abrir o menu popup de busca de ferramentas.
A captura de tela a seguir mostra o menu popup Todas as ferramentas aberto no dock de ferramentas:
captura de tela do dock de ferramentas

​
Botão Run

O botão Run executa o workflow selecionado do seu Replit App.
O botão Run está localizado na parte superior da tela do Editor de Projeto. Selecione o botão para executar o workflow.Quando seu Replit App estiver em execução, o rótulo do botão é substituído por Stop. Selecione o botão para parar o app.
Para aprender a selecionar, visualizar e gerenciar workflows, consulte Workflows. O vídeo a seguir mostra como visualizar e executar um workflow:

​
Página de destaque (Spotlight)

A página de destaque permite visualizar e modificar a capa do seu Replit App e acessar opções de compartilhamento.
Selecione o nome do seu projeto no canto superior esquerdo do Editor de Projeto para alternar a página de destaque.
O vídeo a seguir mostra como acessar a página de destaque:
O menu de opções permite realizar os seguintes tipos de ações de layout:
  • Gerenciamento de janelas: Abra o Editor de Projeto do Replit App em uma nova janela
  • Gerenciamento de painéis: Adicione painéis, mova um painel, maximize um painel e alterne entre posições flutuantes e fixas
  • Gerenciamento de abas: Abra ou selecione outras abas, mova uma aba para outro painel e feche uma aba
Selecione os três pontos ícone de três pontos verticais verticais localizados no canto superior direito da aba ativa para abrir o menu de opções.
A captura de tela a seguir mostra o menu popup de opções no painel esquerdo:
captura de tela mostrando o menu de opções do Editor de Projeto

​
Barra de pesquisa

A barra de pesquisa permite encontrar arquivos, textos ou ferramentas dentro do Editor de Projeto.
  1. Para abrir a barra de pesquisa, selecione o ícone ícone de lupa de lupa na parte superior.
  2. Digite o texto que deseja pesquisar e selecione entre as sugestões de autocompletar.
A captura de tela a seguir mostra o menu popup de pesquisa:
captura de tela mostrando o menu de pesquisa do Editor de Projeto

​
Painel de recursos

O painel de recursos exibe os recursos computacionais e o uso do seu ambiente de desenvolvimento, incluindo RAM, CPU e armazenamento. Essa informação pode ajudar você a estimar e otimizar os requisitos de publicação do seu Replit App.
  1. Selecione o ícone ícone de computadores empilhados de recursos localizado próximo ao nome do seu app para alternar o painel.
  2. Passe o cursor sobre os itens de linha Compute ou Storage para mais detalhes.
A captura de tela a seguir mostra o painel de recursos:
captura de tela mostrando o painel de recursos do Editor de Projeto

​
Ferramentas

Para saber mais sobre outras ferramentas do Editor de Projeto, selecione uma das opções a seguir:

Secrets

Proteja as chaves de API, credenciais e senhas do seu app.

Histórico de arquivos

Volte no tempo para recuperar edições perdidas com o recurso de rastreamento de versões do Replit.

Multiplayer

Programe em conjunto em tempo real com dois ou mais usuários.

Configurações do Usuário

Personalize sua experiência de programação por meio da ferramenta de Configurações.

Console

Veja a saída do seu Replit App

Shell

Interaja com o Editor de Projeto usando uma interface de linha de comando.

Preview

Visualize e depure seu aplicativo web.