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

# Projetos e Artefatos

> Aprenda o que são projetos e artefatos no Replit e decida quando manter artefatos em um único projeto ou criar projetos separados.

export const ArtifactGrid = () => {
  if (typeof document !== "undefined" && !document.getElementById("artifact-grid-styles")) {
    const style = document.createElement("style");
    style.id = "artifact-grid-styles";
    style.textContent = `
      .artifact-grid-wrap {
        --ag-bg: var(--replit-docs-bg, #F6F6F4);
        --ag-icon-bg: var(--replit-docs-bg-elevated, #F1F1EE);
        --ag-icon-border: var(--replit-docs-border, #DEDAD5);
        --ag-text: var(--replit-docs-text-muted, #5C5C5C);
        --ag-icon-color: var(--replit-docs-text-muted, #5C5C5C);
      }
      .dark .artifact-grid-wrap,
      html.dark .artifact-grid-wrap,
      [data-theme="dark"] .artifact-grid-wrap {
        --ag-bg: var(--replit-docs-bg, #1E1E1F);
        --ag-icon-bg: var(--replit-docs-bg-elevated, #222223);
        --ag-icon-border: var(--replit-docs-border, #39393D);
        --ag-text: var(--replit-docs-text-muted, #B8B8BE);
        --ag-icon-color: var(--replit-docs-text-muted, #B8B8BE);
      }
      @keyframes ag-fade-in {
        from { transform: translateY(8px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
      @media (hover: hover) {
        .artifact-grid-wrap .ag-icon-btn:hover {
          background: var(--ag-icon-border) !important;
        }
      }
    `;
    document.head.appendChild(style);
  }
  const types = [{
    name: "Web",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M12 1.25c5.937 0 10.75 4.813 10.75 10.75S17.937 22.75 12 22.75 1.25 17.937 1.25 12 6.063 1.25 12 1.25Zm-9.217 11.5a9.25 9.25 0 0 0 7.468 8.333 15.25 15.25 0 0 1-2.982-8.333H2.783Zm13.948 0a15.249 15.249 0 0 1-2.983 8.333 9.25 9.25 0 0 0 7.469-8.333H16.73Zm-7.958 0A13.748 13.748 0 0 0 12 20.876a13.748 13.748 0 0 0 3.227-8.126H8.773Zm1.478-9.834a9.251 9.251 0 0 0-7.468 8.334H7.27a15.251 15.251 0 0 1 2.982-8.334ZM12 3.123a13.747 13.747 0 0 0-3.227 8.127h6.454A13.748 13.748 0 0 0 12 3.123Zm1.748-.207a15.25 15.25 0 0 1 2.983 8.334h4.486a9.251 9.251 0 0 0-7.469-8.334Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Mobile",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M7 2.75c-.69 0-1.25.56-1.25 1.25v16c0 .69.56 1.25 1.25 1.25h10c.69 0 1.25-.56 1.25-1.25V4c0-.69-.56-1.25-1.25-1.25H7ZM4.25 4A2.75 2.75 0 0 1 7 1.25h10A2.75 2.75 0 0 1 19.75 4v16A2.75 2.75 0 0 1 17 22.75H7A2.75 2.75 0 0 1 4.25 20V4Zm7 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Slides",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M20 2.25A2.75 2.75 0 0 1 22.75 5v14A2.75 2.75 0 0 1 20 21.75h-8A2.75 2.75 0 0 1 9.25 19V5A2.75 2.75 0 0 1 12 2.25h8Zm-8 1.5c-.69 0-1.25.56-1.25 1.25v14c0 .69.56 1.25 1.25 1.25h8c.69 0 1.25-.56 1.25-1.25V5c0-.69-.56-1.25-1.25-1.25h-8Z" clipRule="evenodd" />
          <path d="M6 4.25a.75.75 0 0 1 .75.75v14a.75.75 0 0 1-1.5 0V5A.75.75 0 0 1 6 4.25ZM2 6.25a.75.75 0 0 1 .75.75v10a.75.75 0 0 1-1.5 0V7A.75.75 0 0 1 2 6.25Z" />
        </svg>
  }, {
    name: "Design",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M6.5 11.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM17.5 9.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM8.5 6.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM13.5 5.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z" />
          <path fillRule="evenodd" d="M12 1.25c2.827 0 5.553 1.01 7.573 2.828C21.596 5.9 22.75 8.388 22.75 11A5.749 5.749 0 0 1 17 16.75h-2.25a1 1 0 0 0-.8 1.6l.3.4.1.143a2.5 2.5 0 0 1-2.1 3.857H12a10.75 10.75 0 1 1 0-21.5Zm0 1.5a9.25 9.25 0 1 0 0 18.5h.25a1 1 0 0 0 .8-1.6l-.3-.4a2.5 2.5 0 0 1 2-4H17l.21-.005A4.25 4.25 0 0 0 21.25 11c0-2.161-.953-4.252-2.68-5.807C16.84 3.636 14.476 2.75 12 2.75Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Animation",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M10.024 7.25c.31.004.613.091.878.251l4.996 2.996a1.752 1.752 0 0 1 .625 2.367 1.75 1.75 0 0 1-.625.639v-.001l-4.995 2.995.001.001a1.75 1.75 0 0 1-2.654-1.505v-5.99a1.75 1.75 0 0 1 1.774-1.753Zm-.02 1.5a.252.252 0 0 0-.22.124.253.253 0 0 0-.034.127v5.998a.252.252 0 0 0 .127.219.253.253 0 0 0 .252-.004l.002-.001 4.997-2.997.002-.001a.252.252 0 0 0 .122-.215.25.25 0 0 0-.122-.215h-.002L10.13 8.786h-.002a.25.25 0 0 0-.125-.037Z" clipRule="evenodd" />
          <path fillRule="evenodd" d="M12 1.25c5.937 0 10.75 4.813 10.75 10.75S17.937 22.75 12 22.75 1.25 17.937 1.25 12 6.063 1.25 12 1.25Zm0 1.5a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Data Viz",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M5 14.25a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75ZM12 8.25a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75ZM19 2.25a.75.75 0 0 1 .75.75v18a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75Z" />
        </svg>
  }, {
    name: "3D Game",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M11.25 9.675A3.751 3.751 0 0 1 12 2.25a3.75 3.75 0 0 1 .75 7.425v4.575H19A2.75 2.75 0 0 1 21.75 17v2A2.75 2.75 0 0 1 19 21.75H5A2.75 2.75 0 0 1 2.25 19v-2A2.75 2.75 0 0 1 5 14.25h.25V13a.75.75 0 0 1 1.5 0v1.25h4.5V9.675ZM9.75 6a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 0 0-4.5 0ZM4.116 16.116A1.25 1.25 0 0 1 5 15.75h14A1.25 1.25 0 0 1 20.25 17v2A1.25 1.25 0 0 1 19 20.25H5a1.25 1.25 0 0 1-1.244-1.126L3.75 19v-2c0-.331.132-.65.366-.884Z" clipRule="evenodd" />
        </svg>
  }];
  const rows = [types.slice(0, 4), types.slice(4, 7)];
  const iconBtnStyle = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "48px",
    height: "48px",
    border: "1px solid var(--ag-icon-border)",
    borderRadius: "12px",
    background: "var(--ag-icon-bg)",
    cursor: "default",
    color: "var(--ag-icon-color)",
    padding: 0,
    transition: "background 120ms ease-out",
    flexShrink: 0
  };
  return <div className="artifact-grid-wrap" style={{
    fontFamily: "'IBM Plex Sans', sans-serif",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "12px",
    padding: "32px",
    background: "var(--ag-bg)",
    borderRadius: "16px",
    width: "100%",
    maxWidth: "460px",
    margin: "32px auto",
    opacity: 0,
    animation: "ag-fade-in 300ms ease-out forwards"
  }}>
      {rows.map((row, ri) => <div key={ri} style={{
    display: "flex",
    gap: "12px",
    justifyContent: "center"
  }}>
          {row.map(type => <div key={type.name} style={{
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "6px"
  }}>
              <div className="ag-icon-btn" style={iconBtnStyle}>
                {type.icon}
              </div>
              <span style={{
    fontSize: "11px",
    color: "var(--ag-text)",
    textAlign: "center",
    lineHeight: "1.2"
  }}>
                {type.name}
              </span>
            </div>)}
        </div>)}
    </div>;
};

Um **projeto** é o contêiner para tudo que você constrói no Replit. **Artefatos** são as saídas publicáveis dentro dele — web apps, apps móveis, decks de slides, animações, visualizações de dados, jogos 3D e designs.

Quando você está construindo mais de uma coisa, tem duas opções: adicionar múltiplos artefatos a um único projeto ou criar projetos separados. A escolha certa depende de se seus apps compartilham dados, lógica e um ciclo de vida de deployment. Esta página aborda ambos os termos em profundidade e mostra quando manter artefatos em um único projeto versus quando criar projetos separados.

## O que é um projeto?

Um projeto é o contêiner que guarda seu código, dados e todos os artefatos que você cria. Quando você diz ao Agent o que quer, ele configura um projeto e constrói os artefatos dentro dele.

Pense em um projeto como uma área de trabalho na sua mesa. Tudo fica em um lugar e pode compartilhar as mesmas informações, mas cada peça serve a um propósito diferente.

Por exemplo, se você pedir ao Agent para criar um app de rastreamento de fitness, ele cria um projeto com um artefato de app móvel junto com o backend, banco de dados e armazenamento necessários para funcionar.

Conceitos-chave:

* **Projeto**: O contêiner que guarda tudo — seu código, dados e todos os seus artefatos.
* **Artefato**: Uma saída publicável dentro de um projeto (um web app, deck de slides, vídeo e assim por diante).
* **Recursos**: Todo artefato tem acesso automático a um backend, banco de dados e armazenamento de arquivos — sem necessidade de configuração.

Para tudo que você pode fazer com um projeto — gerenciar, filtrar, fixar, ordenar — veja [Projetos](/pt/features/projects-and-artifacts/projects).

## O que é um artefato?

Artefatos são as coisas que você pode publicar no Replit. Cada um é uma saída completa e independente que recebe sua própria URL compartilhável quando você publica.

Todo o resto no seu projeto — arquivos, imagens, CSVs, código — suporta seus artefatos, mas não pode ser publicado por conta própria.

<ArtifactGrid />

| Tipo                                                               | O que é                                                                      |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------- |
| **[Web app](/pt/features/artifact-types/web-apps)**                | Sites e aplicações web que gerenciam usuários, bancos de dados e mais.       |
| **[App móvel](/pt/features/artifact-types/building-mobile-apps)**  | Apps nativos para iPhone e Android.                                          |
| **[Deck de slides](/pt/features/artifact-types/slide-decks)**      | Decks de apresentação que você pode apresentar ou exportar.                  |
| **[Animação](/pt/features/artifact-types/animated-videos)**        | Motion graphics e vídeos animados. Exporte como MP4.                         |
| **[Visualização de Dados](/pt/features/artifact-types/data-apps)** | Dashboards interativos e visualizações para explorar dados e criar gráficos. |
| **Jogo 3D**                                                        | Jogos 3D, simulações e experiências interativas.                             |
| **[Design](/pt/design/canvas)**                                    | Direções visuais e protótipos explorados no canvas de design.                |

Para tudo que você pode fazer com artefatos — alternar entre eles, adicionar novos, a barra lateral da Biblioteca — veja [Artefatos](/pt/features/projects-and-artifacts/artifacts).

## O que os artefatos compartilham em um projeto

Quando os [artefatos](/pt/features/projects-and-artifacts/artifacts) vivem no mesmo [projeto](/pt/features/projects-and-artifacts/projects), eles compartilham automaticamente:

* **Banco de dados**: Um artefato escreve dados, os outros leem instantaneamente.
* **Backend e API**: Lógica de servidor compartilhada, sem código duplicado.
* **Armazenamento de arquivos**: Imagens, documentos e uploads acessíveis em todos os artefatos.
* **Deployment**: A publicação implanta tudo junto e em sincronia.

Isso significa que você não precisa configurar conexões ou duplicar código entre artefatos. Mas também significa que você não pode publicar um artefato sem publicar os outros.

## Guia rápido

Aqui estão os cenários principais a considerar ao decidir se deve adicionar artefatos a um projeto existente ou criar um separado.

| **Use múltiplos artefatos em um projeto**                                    | **Use projetos separados**                                                  |
| ---------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| Os apps compartilham os mesmos dados e backend                               | Os apps não compartilham lógica ou dados subjacentes                        |
| Você quer que tudo seja implantado junto                                     | Você precisa de ciclos de deployment independentes                          |
| São complementares (como um app de cliente e um painel de administrador)     | São produtos não relacionados ou para clientes diferentes                   |
| Você quer que as mudanças em um artefato reflitam automaticamente nos outros | O projeto é temporário, como uma landing page de campanha ou site de evento |

## Exemplos

### Mesmo projeto: web app + app móvel para um produto

Um restaurante constrói um web app para os clientes navegarem no cardápio e um app móvel para a equipe gerenciar pedidos. Ambos se conectam ao mesmo banco de dados de itens do cardápio, pedidos e informações do cliente.

**Por que um projeto:** os apps compartilham os mesmos dados e backend. Quando um cliente faz um pedido pelo web app, a equipe o vê imediatamente no app móvel.

### Mesmo projeto: app + painel de administrador + deck de pitch para investidores

Uma startup constrói seu produto principal, um painel administrativo interno para gerenciar conteúdo e um deck de slides para captação de recursos — tudo em um projeto.

**Por que um projeto:** o painel de administrador gerencia os mesmos dados que o app exibe, e o deck de pitch pode referenciar métricas ao vivo do backend compartilhado.

### Projetos separados: dois apps de clientes não relacionados

Um freelancer constrói uma loja de e-commerce para um cliente e um sistema de reservas para outro.

**Por que projetos separados:** os apps não têm dados ou lógica compartilhados. Cada cliente precisa de deployment independente e você não quer que mudanças em um afetem o outro.

### Projetos separados: landing page de campanha ao lado de um produto principal

Você tem um app de produção que roda durante o ano todo e uma landing page temporária para uma campanha de marketing.

**Por que projetos separados:** a página de campanha tem seu próprio ciclo de vida — você vai colocá-la no ar, executá-la por algumas semanas e tirá-la do ar. Mantê-la separada evita desorganizar seu produto principal e permite que você publique ou remova-a independentemente.

## Perguntas frequentes

<Accordion title="Posso mover um artefato para um projeto diferente?">
  Não atualmente. Se você precisar separar um artefato, crie um novo [projeto](/pt/features/projects-and-artifacts/projects) e peça ao Agent para reconstruí-lo lá.
</Accordion>

<Accordion title="Há um limite para quantos artefatos um projeto pode ter?">
  Um projeto pode conter no máximo 7 artefatos, com um limite de **1 app móvel por projeto**. Esse limite existe porque artefatos adicionais consomem mais memória, o que pode deixar a prévia mais lenta. Se você precisar de mais artefatos, comece outro [projeto](/pt/features/projects-and-artifacts/projects).
</Accordion>

<Accordion title="Posso publicar apenas um artefato de um projeto?">
  Não atualmente. A publicação implanta tudo junto. Se você precisar de deployment independente, use projetos separados.
</Accordion>

<Accordion title="Os artefatos compartilham dados entre si?">
  Sim. Todos os artefatos em um projeto compartilham o mesmo banco de dados e serviços de backend. Se seu web app escreve dados, seu app móvel e dashboard de dados podem lê-los imediatamente.
</Accordion>

<Accordion title="Qual é a diferença entre um artefato e um arquivo?">
  Artefatos são coisas que você pode publicar — apps, slides, vídeos e assim por diante. Arquivos (como CSVs, imagens ou código) são ativos dentro do seu projeto que suportam seus artefatos, mas não podem ser publicados por conta própria.
</Accordion>