> ## 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.

# Editor e Ferramentas

> Saiba mais sobre as ferramentas disponíveis no Editor de Projetos — o editor, Preview, Console, Shell e muito mais.

O Editor de Projetos inclui gerenciamento de layout e ferramentas integradas que potencializam sua experiência de criação de apps.
Esses recursos do Editor de Projetos são especializados em lidar com aspectos específicos do processo de desenvolvimento, permitindo que você
se concentre em criar em vez de configurar.

## Layout personalizável do Editor de Projetos

As ferramentas de gerenciamento de layout do Editor de Projetos permitem personalizar os componentes do ambiente de desenvolvimento.
Ele consiste nos seguintes tipos de elementos de interface:

| Elemento    | Descrição                                                                                           | Funcionalidades                                                                                                                                                               | Casos de Uso                                                                                                                      |
| ----------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Janelas** | Abas do navegador que contêm um ou mais painéis                                                     | <ul><li>Podem ser organizadas em várias telas</li></ul>                                                                                                                       | <ul><li>Organizar o Editor de Projetos em várias telas</li><li>Trabalhar em diferentes projetos simultaneamente</li></ul>         |
| **Painéis** | Seções de uma janela que contêm uma ou mais abas                                                    | <ul><li>Suportam divisão horizontal e vertical</li><li>Podem ser redimensionados e reorganizados</li><li>Podem ser convertidos em painel flutuante dentro da janela</li></ul> | <ul><li>Ver código e prévia lado a lado</li><li>Criar layouts personalizados para diferentes tarefas de desenvolvimento</li></ul> |
| **Abas**    | Contêm exatamente uma ferramenta do Editor de Projetos, como o editor de arquivos, Preview ou Agent | <ul><li>Podem ser movidas entre painéis e reordenadas dentro deles</li><li>Permitem alternar entre diferentes arquivos ou ferramentas com um único clique</li></ul>           | <ul><li>Abrir diferentes ferramentas ou arquivos quando necessário</li></ul>                                                      |

O vídeo a seguir identifica cada elemento de layout do Editor de Projetos:

<Frame>
  <iframe src="https://www.loom.com/embed/495838f6de3a42a890461572615ad48e?sid=df5d78b9-6d2e-4396-8853-4e3fa2b81db4" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Árvore de arquivos

A árvore de arquivos lista todos os arquivos e diretórios do seu Replit App.

<Accordion title="Como acessar a árvore de arquivos">
  Selecione o ícone <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/files-icon.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=4b9ac8b70c07960d9f9a3f6eacee4ab6" alt="ícone de pasta com setas" width="16" height="16" data-path="images/icons/files-icon.svg" /> na esquerda para alternar
  a visibilidade da árvore de arquivos.
</Accordion>

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 no 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 na árvore de arquivos:

<Frame>
  <iframe src="https://www.loom.com/embed/84129671e4fd4346b426b726609a7cae?sid=ea104265-b5ac-4f93-bf50-6136258de174" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Dock de ferramentas

O dock de ferramentas permite pesquisar e abrir ferramentas do Editor de Projetos em novas abas.

<Accordion title="Como acessar o dock de ferramentas">
  Selecione entre as ferramentas mais usadas ou selecione o ícone <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=579643854fb13c402de516695e52c554" alt="Ícone de Todas as ferramentas" width="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" /> **Todas as ferramentas**
  para abrir o menu popup de pesquisa de ferramentas.
</Accordion>

A captura de tela a seguir mostra o menu popup **Todas as ferramentas** aberto no dock de ferramentas:

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/tools-dock.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=7a48f62509f3cb7aaab01c8aa7f8ba24" alt="captura de tela do dock de ferramentas" height="50" data-path="images/workspace/tools-dock.png" />
</Frame>

## Botão Executar

O botão **Executar** executa o workflow selecionado do Replit App.

<Accordion title="Como acessar o botão Executar">
  O botão **Executar** está localizado na parte superior da tela do Editor de Projetos. 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 **Parar**. Selecione o botão para parar o app.
</Accordion>

Para saber como selecionar, visualizar e gerenciar workflows, veja [Workflows](/core-concepts/project-editor/app-setup/workflows/).

O vídeo a seguir mostra como visualizar e executar um workflow:

<Frame>
  <iframe src="https://www.loom.com/embed/086c8447bf234ca290ad11f0bbb2e13e?sid=1e8597e5-a3c4-4b36-b42e-f3ad97533334" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Página Spotlight

A página Spotlight permite visualizar e modificar a capa do seu Replit App e acessar as opções de compartilhamento.

<Accordion title="Como acessar a página Spotlight">
  Selecione o nome do seu projeto no canto superior esquerdo do Editor de Projetos para alternar a página Spotlight.
</Accordion>

O vídeo a seguir mostra como acessar a página Spotlight:

<Frame>
  <iframe src="https://www.loom.com/embed/568fa9603a5546919e97b06695ea1da5?sid=cbc2a2f4-ae3f-4a96-85ef-45941f587d35" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Menu de opções

O menu de opções permite realizar os seguintes tipos de ações de layout:

* **Gerenciamento de janelas**: Abrir o Editor de Projetos do Replit App em uma nova janela
* **Gerenciamento de painéis**: Adicionar painéis, mover um painel, maximizar um painel e alternar entre posições flutuante e fixa
* **Gerenciamento de abas**: Abrir ou selecionar outras abas, mover uma aba para outro painel e fechar uma aba

<Accordion title="Como acessar o menu de opções">
  Selecione os <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/vertical-dots.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=7b4b6a9992b3b20202297b60b6ef416d" alt="ícone de três pontos verticais" height="16" width="16" data-path="images/icons/vertical-dots.svg" /> três pontos verticais
  localizados no canto superior direito da aba ativa para abrir o menu de opções.
</Accordion>

A captura de tela a seguir mostra o menu popup de opções no painel esquerdo:

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/workspace-options-menu.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=5d8892fb1057bfc37de6aff5af278295" alt="captura de tela mostrando o menu de opções do Editor de Projetos" width="1968" height="1136" data-path="images/workspace/workspace-options-menu.png" />
</Frame>

## Barra de pesquisa

A barra de pesquisa permite encontrar arquivos, texto ou ferramentas dentro do Editor de Projetos.

<Accordion title="Como acessar a barra de pesquisa">
  1. Para abrir a barra de pesquisa, selecione o ícone de <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=d3feed840da2d19e1ee4873d137114dc" alt="ícone de lupa" width="16" height="16" data-path="images/icons/workspace-search-icon.svg" /> lupa na parte superior.
  2. Digite o texto de pesquisa e selecione nas sugestões de preenchimento automático.
</Accordion>

A captura de tela a seguir mostra o menu popup de pesquisa:

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/search-menu.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=205cdb6244d368c4b7e57215f1328e42" alt="captura de tela mostrando o menu de pesquisa do Editor de Projetos" width="1732" height="1224" data-path="images/workspace/search-menu.png" />
</Frame>

## Painel de recursos

O painel de recursos exibe os recursos de computação e o uso do seu ambiente de desenvolvimento, incluindo RAM, CPU e armazenamento.
Essas informações podem ajudá-lo a estimar e otimizar os requisitos de publicação do seu Replit App.

<Accordion title="Como acessar o painel de recursos">
  1. Selecione o ícone de <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/resources.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=8df05261182e3e39f28dcccf809d66c2" alt="ícone de computadores empilhados" width="16" height="16" data-path="images/icons/resources.svg" /> recursos localizado ao lado do nome do seu app para alternar o painel.
  2. Passe o mouse sobre os itens **Computação** ou **Armazenamento** para mais detalhes.
</Accordion>

A captura de tela a seguir mostra o painel de recursos:

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/resources-panel.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=63449b197613dc36bf9dcd1f9c17e7c7" alt="captura de tela mostrando o painel de recursos do Editor de Projetos" width="1214" height="652" data-path="images/workspace/resources-panel.png" />
</Frame>

## Ferramentas

Para saber mais sobre outras ferramentas do Editor de Projetos, selecione na lista a seguir:

<CardGroup cols={3}>
  <Card title="Secrets" icon="key" iconType="solid" href="/core-concepts/project-editor/app-setup/secrets" horizontal={true}>
    Proteja as chaves de API, credenciais e senhas do seu app.
  </Card>

  <Card title="Histórico de Arquivos" icon="clock-rotate-left" iconType="solid" href="/core-concepts/project-editor/version-control/file-history" horizontal={true}>
    Volte no tempo para recuperar edições perdidas com o recurso de rastreamento de versões do Replit.
  </Card>

  <Card title="Multiplayer" icon="users" iconType="solid" href="/replitai/invite-teammates" horizontal={true}>
    Programe em tempo real com dois ou mais usuários.
  </Card>

  <Card title="Configurações do Usuário" icon="gear" iconType="solid" href="/core-concepts/project-editor/editor-and-tools/user-settings" horizontal={true}>
    Personalize sua experiência de programação pela ferramenta Configurações.
  </Card>

  <Card title="Console" icon="terminal" iconType="solid" href="/pt/core-concepts/project-editor/editor-and-tools/console" horizontal={true}>
    Visualize a saída do seu Replit App
  </Card>

  <Card title="Shell" icon="terminal" iconType="solid" href="/pt/core-concepts/project-editor/editor-and-tools/shell" horizontal={true}>
    Interaja com o Editor de Projetos usando uma interface de linha de comando.
  </Card>

  <Card title="Preview" icon="laptop" iconType="solid" href="/pt/core-concepts/project-editor/editor-and-tools/preview" horizontal={true}>
    Visualize e depure seu aplicativo web.
  </Card>
</CardGroup>
