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

# How Replit works

> Learn how Replit's AI tools help you turn ideas into production-ready apps.

export const MentalModelDiagram = ({defaultActive} = {}) => {
  if (typeof document !== 'undefined' && !document.getElementById('mm-styles')) {
    const style = document.createElement('style');
    style.id = 'mm-styles';
    style.textContent = `
      .mental-model {
        --mm-bg: var(--replit-docs-bg, #F6F6F4);
        --mm-surface: var(--replit-docs-bg-elevated, #F1F1EE);
        --mm-border: var(--replit-docs-border, #DEDAD5);
        --mm-text: var(--replit-docs-text, #1D1D1D);
        --mm-muted: var(--replit-docs-text-subtle, #858585);
        --mm-body: var(--replit-docs-text-muted, #5C5C5C);
        --mm-accent: #0079F2;
        --mm-agent: #F26522;
      }

      .dark .mental-model,
      html.dark .mental-model,
      [data-theme="dark"] .mental-model {
        --mm-bg: var(--replit-docs-bg, #1E1E1F);
        --mm-surface: var(--replit-docs-bg-elevated, #222223);
        --mm-border: var(--replit-docs-border, #39393D);
        --mm-text: var(--replit-docs-text, #F5F5F5);
        --mm-muted: var(--replit-docs-text-subtle, #8E8F97);
        --mm-body: var(--replit-docs-text-muted, #B8B8BE);
        --mm-accent: #0079F2;
        --mm-agent: #F26522;
      }

      .mm-pillar-btn {
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      }
      .mental-model[data-active-pillar] .mm-pillar-btn {
        opacity: 0.4;
        transform: scale(0.92);
      }
      .mental-model[data-active-pillar] .mm-pillar-btn.mm-active {
        opacity: 1;
        transform: scale(1.06);
      }
      .mental-model:not([data-active-pillar]) .mm-pillar-btn {
        opacity: 1;
        transform: scale(1);
      }

      .mm-pillar-card {
        border-radius: 10px;
        padding: 12px 8px;
        border: 1.5px solid var(--mm-border);
        background: var(--mm-bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        transition: border-color 0.3s ease;
      }
      .mm-active .mm-pillar-card {
        border-color: var(--mm-accent);
      }

      .mm-pillar-icon {
        color: var(--mm-muted);
        transition: color 0.3s ease;
      }
      .mm-active .mm-pillar-icon {
        color: var(--mm-accent);
      }

      .mm-pillar-label {
        font-size: 13px;
        font-weight: 500;
        color: var(--mm-text);
        transition: color 0.3s ease;
      }
      .mm-active .mm-pillar-label {
        color: var(--mm-accent);
      }

      .mm-conn-line {
        opacity: 0.4;
        transition: opacity 0.3s ease, stroke 0.3s ease;
      }
      .mental-model[data-active-pillar] .mm-conn-line {
        opacity: 0.12;
      }
      .mental-model[data-active-pillar] .mm-conn-line.mm-active {
        opacity: 0.7;
        stroke: var(--mm-accent);
      }

      .mm-detail-panel {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease, padding 0.35s ease;
        margin-top: 0;
        padding: 0 24px;
        border-radius: 10px;
        border: 1px solid var(--mm-border);
        background: var(--mm-bg);
        position: relative;
      }
      .mm-detail-panel.mm-detail-visible {
        max-height: 300px;
        opacity: 1;
        margin-top: 16px;
        padding: 20px 24px;
      }

      .mm-close-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--mm-muted);
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      @media screen and (max-width: 480px) {
        .mm-pillar-card {
          padding: 10px 4px;
        }
        .mm-pillar-label {
          font-size: 11px;
        }
        .mm-pillar-subtitle {
          font-size: 9px !important;
        }
      }
    `;
    document.head.appendChild(style);
  }
  const pillars = [{
    id: 'project-editor',
    label: 'Project Editor',
    subtitle: 'IDE & tools',
    iconPath: '<rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>',
    description: 'Your cloud development environment. Agent reads, writes, and manages files, runs terminal commands, and uses language tools - all without leaving the browser.',
    bullets: ['Full IDE with file editing and LSP diagnostics', 'Integrated terminal for commands and scripts', 'Workflows to manage long-running tasks']
  }, {
    id: 'projects',
    label: 'Projects',
    subtitle: 'apps, slides & more',
    iconPath: '<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/><path d="m10 13 2 2 4-4"/>',
    description: 'Your project is the container for everything you build. It holds your artifacts, including web apps, mobile apps, slides, videos, and more, along with shared resources like databases and storage.',
    bullets: ['Web and mobile apps with one-click deploy', 'Presentation slides and animated videos', 'Live preview updates as Agent works']
  }, {
    id: 'design-canvas',
    label: 'Design Canvas',
    subtitle: 'visual editing',
    iconPath: '<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/>',
    description: 'A visual editing surface for designing and refining your artifacts. Edit layouts, styles, and content directly - no code required.',
    bullets: ['Visual drag-and-drop editing for layouts and styles', 'Direct manipulation of UI components', 'Seamless handoff between Agent and manual design']
  }, {
    id: 'storage',
    label: 'Storage',
    subtitle: 'DB & objects',
    iconPath: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/>',
    description: 'Persistent data layer. Agent provisions PostgreSQL databases, defines schemas with Drizzle ORM, and manages migrations \u2014 all from natural language.',
    bullets: ['Built-in PostgreSQL with automatic provisioning', 'Object storage for files, images, and assets', 'Type-safe schemas shared across the stack']
  }, {
    id: 'integrations',
    label: 'Integrations',
    subtitle: 'APIs & MCP',
    iconPath: '<path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a6 6 0 0 1-6 6 6 6 0 0 1-6-6V8z"/>',
    description: 'Connect to external services without managing API keys manually. Agent discovers and configures integrations for auth, payments, and more.',
    bullets: ['Pre-built connectors for Stripe, GitHub, Slack', 'MCP servers extend Agent with custom tools', 'OAuth and credentials managed automatically']
  }];
  const topPillars = pillars.filter(p => p.id === 'project-editor' || p.id === 'design-canvas');
  const bottomPillars = pillars.filter(p => p.id !== 'project-editor' && p.id !== 'design-canvas');
  const agentX = 400;
  const agentY = 210;
  const topY = 60;
  const bottomY = 370;
  const topPositions = [280, 520];
  const bottomPositions = [133, 400, 667];
  const handlePillarClick = e => {
    const btn = e.currentTarget;
    const container = document.querySelector('.mental-model');
    if (!container) return;
    const pillarId = btn.dataset.pillar;
    const currentActive = container.dataset.activePillar;
    if (currentActive === pillarId) {
      delete container.dataset.activePillar;
      container.querySelectorAll('.mm-pillar-btn').forEach(b => b.classList.remove('mm-active'));
      container.querySelectorAll('.mm-conn-line').forEach(l => l.classList.remove('mm-active'));
      container.querySelectorAll('.mm-detail-panel').forEach(p => p.classList.remove('mm-detail-visible'));
    } else {
      container.dataset.activePillar = pillarId;
      container.querySelectorAll('.mm-pillar-btn').forEach(b => {
        b.classList.toggle('mm-active', b.dataset.pillar === pillarId);
      });
      container.querySelectorAll('.mm-conn-line').forEach(l => {
        l.classList.toggle('mm-active', l.dataset.pillar === pillarId);
      });
      container.querySelectorAll('.mm-detail-panel').forEach(p => {
        p.classList.toggle('mm-detail-visible', p.dataset.pillar === pillarId);
      });
    }
  };
  const handleClose = () => {
    const container = document.querySelector('.mental-model');
    if (!container) return;
    delete container.dataset.activePillar;
    container.querySelectorAll('.mm-pillar-btn').forEach(b => b.classList.remove('mm-active'));
    container.querySelectorAll('.mm-conn-line').forEach(l => l.classList.remove('mm-active'));
    container.querySelectorAll('.mm-detail-panel').forEach(p => p.classList.remove('mm-detail-visible'));
  };
  const initRef = el => {
    if (!el || !defaultActive) return;
    if (el.dataset.activePillar) return;
    el.dataset.activePillar = defaultActive;
    el.querySelectorAll('.mm-pillar-btn').forEach(b => {
      b.classList.toggle('mm-active', b.dataset.pillar === defaultActive);
    });
    el.querySelectorAll('.mm-conn-line').forEach(l => {
      l.classList.toggle('mm-active', l.dataset.pillar === defaultActive);
    });
  };
  return <div ref={initRef} className="mental-model" style={{
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '12px 0'
  }}>
      {}
      <div style={{
    position: 'relative',
    width: '100%',
    maxWidth: 640,
    aspectRatio: '800 / 440'
  }}>
        {}
        <svg viewBox="0 0 800 440" fill="none" style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    pointerEvents: 'none'
  }}>
          {}
          {topPillars.map((pillar, i) => {
    const px = topPositions[i];
    const midY = (topY + agentY) / 2;
    const curveOffset = (px - agentX) * 0.15;
    return <path key={pillar.id} className="mm-conn-line" data-pillar={pillar.id} d={`M ${px} ${topY + 48} C ${px - curveOffset} ${midY + 20}, ${agentX + curveOffset} ${midY - 20}, ${agentX} ${agentY - 24}`} stroke="var(--mm-border)" strokeWidth={1.5} strokeDasharray="6 4" strokeLinecap="round" fill="none" />;
  })}
          {}
          {bottomPillars.map((pillar, i) => {
    const px = bottomPositions[i];
    const midY = (agentY + bottomY) / 2;
    const curveOffset = (px - agentX) * 0.15;
    return <path key={pillar.id} className="mm-conn-line" data-pillar={pillar.id} d={`M ${agentX} ${agentY + 24} C ${agentX + curveOffset} ${midY - 20}, ${px - curveOffset} ${midY + 20}, ${px} ${bottomY - 24}`} stroke="var(--mm-border)" strokeWidth={1.5} strokeDasharray="6 4" strokeLinecap="round" fill="none" />;
  })}
        </svg>

        {}
        {topPillars.map((pillar, i) => <button key={pillar.id} className="mm-pillar-btn" data-pillar={pillar.id} onClick={handlePillarClick} style={{
    position: 'absolute',
    top: '4%',
    left: `${i === 0 ? 15 : 55}%`,
    width: '28%',
    zIndex: 10
  }}>
            <div className="mm-pillar-card">
              <svg className="mm-pillar-icon" width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{
    __html: pillar.iconPath
  }} />
              <span className="mm-pillar-label">{pillar.label}</span>
              <span className="mm-pillar-subtitle" style={{
    color: 'var(--mm-muted)',
    fontSize: 10
  }}>{pillar.subtitle}</span>
            </div>
          </button>)}

        {}
        <div style={{
    position: 'absolute',
    top: '42%',
    left: '50%',
    transform: 'translateX(-50%)',
    zIndex: 10,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: 2,
    padding: '10px 28px',
    borderRadius: 10,
    border: '1px solid var(--mm-border)',
    background: 'var(--mm-bg)'
  }}>
          <span style={{
    color: 'var(--mm-agent)',
    fontSize: 14,
    fontWeight: 600
  }}>Agent</span>
          <span style={{
    color: 'var(--mm-muted)',
    fontSize: 11,
    fontWeight: 400
  }}>orchestrator</span>
        </div>

        {}
        {bottomPillars.map((pillar, i) => <button key={pillar.id} className="mm-pillar-btn" data-pillar={pillar.id} onClick={handlePillarClick} style={{
    position: 'absolute',
    bottom: '4%',
    left: `${5 + i * 31}%`,
    width: '26%',
    zIndex: 10
  }}>
            <div className="mm-pillar-card">
              <svg className="mm-pillar-icon" width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{
    __html: pillar.iconPath
  }} />
              <span className="mm-pillar-label">{pillar.label}</span>
              <span className="mm-pillar-subtitle" style={{
    color: 'var(--mm-muted)',
    fontSize: 10
  }}>{pillar.subtitle}</span>
            </div>
          </button>)}
      </div>

      {}
      <p style={{
    fontSize: 12,
    color: 'var(--mm-muted)',
    textAlign: 'center',
    marginTop: 8,
    maxWidth: 400,
    fontWeight: 400
  }}>
        Agent orchestrates all five pillars so you can focus on what to build
      </p>

      {}
      {pillars.map(pillar => <div key={pillar.id} className="mm-detail-panel" data-pillar={pillar.id} style={{
    width: '100%',
    maxWidth: 480
  }}>
          <button className="mm-close-btn" onClick={handleClose}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
          </button>

          <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    marginBottom: 10
  }}>
            <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke="var(--mm-accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{
    __html: pillar.iconPath
  }} />
            <span style={{
    fontSize: 14,
    fontWeight: 600,
    color: 'var(--mm-text)'
  }}>{pillar.label}</span>
          </div>

          <p style={{
    fontSize: 12,
    lineHeight: 1.6,
    color: 'var(--mm-body)',
    margin: '0 0 14px 0'
  }}>
            {pillar.description}
          </p>

          <ul style={{
    margin: 0,
    padding: 0,
    listStyle: 'none',
    display: 'flex',
    flexDirection: 'column',
    gap: 6
  }}>
            {pillar.bullets.map((bullet, idx) => <li key={idx} style={{
    fontSize: 11,
    lineHeight: 1.5,
    color: 'var(--mm-muted)',
    paddingLeft: 12,
    position: 'relative'
  }}>
                <span style={{
    position: 'absolute',
    left: 0,
    color: 'var(--mm-accent)',
    fontSize: 10
  }}>-</span>
                {bullet}
              </li>)}
          </ul>
        </div>)}
    </div>;
};

Replit is an all-in-one platform for creating your ideas with AI. At the center is **Agent**, an AI development partner that coordinates everything, from helping you design a prototype, to adding features, and launching your application.

## How Replit fits together

<MentalModelDiagram />

* **[Agent](/core-concepts/agent)** orchestrates the entire workflow, from generating code to setting up databases and deploying your app.
* **[Workspaces](/core-concepts/workspaces)** are collaborative spaces that bring together your projects, teammates, settings, and billing.
* **[Project Editor](/core-concepts/project-editor)** is your browser-based IDE where you and Agent write, debug, and preview code.
* **[Design Canvas](/replitai/canvas)** is a visual editing surface for designing and refining your projects: edit layouts, styles, and content directly.
* **[Projects](/replitai/projects)** — your project is everything you build — web apps, mobile apps, slides, videos, and more.
* **[Storage](/category/storage-and-databases)** covers databases (SQL) and object storage (files, images) that Agent provisions automatically.
* **[Integrations](/replitai/integrations)** connect your app to external services like Stripe, APIs, and MCP servers.

## Getting started

The fastest way to experience Replit is to describe what you want to build. Agent takes it from there, setting up your project, writing code, and deploying a live app. Follow the [Create with AI quickstart](/getting-started/quickstarts/ask-ai/) to build your first app in minutes.

## Next steps

<CardGroup cols={3}>
  <Card title="Agent" href="/core-concepts/agent" icon="robot">
    Build complete apps from natural language descriptions
  </Card>

  <Card title="Workspaces" href="/core-concepts/workspaces" icon="users">
    Organize projects, teammates, settings, and billing
  </Card>

  <Card title="Project Editor" href="/core-concepts/project-editor" icon="laptop-code">
    Explore your cloud IDE with real-time preview and debugging
  </Card>

  <Card title="Design Canvas" href="/replitai/canvas" icon="palette">
    Visually design and refine layouts, styles, and content
  </Card>

  <Card title="Projects" href="/replitai/projects" icon="rocket">
    Web apps, mobile apps, slides, videos, and more
  </Card>

  <Card title="Storage" href="/category/storage-and-databases" icon="database">
    Provision databases and object storage for your app
  </Card>

  <Card title="Integrations" href="/replitai/integrations" icon="plug">
    Connect to external APIs, payments, and MCP servers
  </Card>
</CardGroup>