{}

{
    const ta = e.currentTarget;
    ta.style.height = "auto";
    ta.style.height = ta.scrollHeight + "px";
    updateAgentInputButtonState(findAgentInputContainer(ta));
  }} style={{
    display: "block",
    width: "100%",
    minHeight: "21px",
    maxHeight: "calc(14px * 1.5 * 10)",
    padding: 0,
    margin: 0,
    border: "none",
    outline: "none",
    resize: "none",
    fontSize: "14px",
    lineHeight: "1.5",
    color: "var(--ai-text-primary)",
    background: "transparent",
    fontFamily: "inherit",
    boxSizing: "border-box",
    overflowY: "auto"
  }} />
          </div>
          {}
          <div style={{
    position: "absolute",
    left: "8px",
    right: "8px",
    bottom: "8px",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center"
  }}>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    overflow: "hidden",
    minWidth: 0
  }}>
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Add attachment" type="button">
                {PlusIcon}
              </button>
              <div id="agent-input-pills" data-agent-input-role="pills" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    overflow: "hidden"
  }}></div>
            </div>
            {}
            <div style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    flexShrink: 0
  }}>
              {highlightPlan ? <div className="ai-plan-wrap" onClick={e => {
    const wrap = e.currentTarget;
    wrap.classList.toggle("ai-plan-off");
  }}>
                  <label className="ai-plan-btn-highlight" style={{
    display: "flex",
    alignItems: "center",
    gap: "6px",
    height: "32px",
    padding: "0 8px",
    cursor: "pointer",
    fontSize: "12px",
    fontFamily: "inherit",
    transition: "background 120ms ease-out"
  }}>
                    <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" defaultChecked />
                    <span>Plan</span>
                  </label>
                </div> : <label className="ai-plan-checkbox-label">
                  <input className="ai-plan-checkbox-input" type="checkbox" aria-label="Plan mode" name="Plan mode" />
                  <span>Plan</span>
                </label>}
              <button className="ai-icon-btn" style={iconBtnStyle} aria-label="Start voice input" type="button">
                {MicIcon}
              </button>
              {highlightStart ? <div className="ai-start-wrap">
                  <button data-agent-input-role="start-button" className="ai-icon-btn ai-start-btn-highlight" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    borderRadius: "6px",
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                    {ArrowUpIcon}
                  </button>
                </div> : <button data-agent-input-role="start-button" className="ai-icon-btn" onClick={handleStartClick} type="button" aria-label="Start" style={{
    ...iconBtnStyle,
    background: "#0079F2",
    color: "#fff",
    opacity: defaultPrompt ? "1" : "0.4",
    cursor: defaultPrompt ? "pointer" : "not-allowed"
  }}>
                  {ArrowUpIcon}
                </button>}
            </div>
          </div>
        </div>
      </div>
    </div>;
};

## What is the Project Editor?

The Project Editor is your home base on Replit: the environment where you start building, manage your projects, and see your apps come to life. From here, you can describe what you want to build, and [Agent](/core-concepts/agent) takes it from there, writing code, setting up your project, and showing you a live preview in real time.

## Getting started

Type what you want to build into the prompt box. Describe your idea in plain language — "a budget tracker that charts my spending", "a landing page for my coffee shop", "an AI comic book generator for kids" — and Agent handles the rest.

You can also select a project type from the carousel to tell Agent what kind of output you want — web app, mobile app, slides, design, and more. Or skip the selection entirely and just describe your idea; Agent figures out the right setup automatically.

To jump right in, follow the [Create with AI quickstart](/getting-started/quickstarts/ask-ai/).

## Plan mode

Plan mode allows you to brainstorm, ask questions, and map out your project. Agent creates an ordered task list you can review and refine — when you're happy with the plan, approve it and Agent starts building. You can also use Plan mode to ask questions or explore ideas; Agent won't make any changes until you exit.

Toggle Plan mode from the button at the bottom of the input. Learn more in the [Plan mode guide](/core-concepts/agent/plan-mode).

## What you can build

Select a project type to tell Agent what you want, or just describe your idea and let Agent pick the right setup.

* **Web apps** — Dashboards, internal tools, SaaS products, landing pages
* **Mobile apps** — iOS and Android apps from a single prompt
* **Slides and presentations** — Generate decks with rich layouts
* **Animations** — Interactive walkthroughs and motion graphics
* **Designs** — Visual mockups and prototypes on the [Design Canvas](/replitai/canvas)
* **Data visualizations** — Charts, dashboards, and database-backed tools
* **Documents** — CSVs, PDFs, PowerPoint files, Markdown docs
* **Spreadsheets** — Data tables and structured outputs

## The Project Editor

Once Agent starts building, the Project Editor is where you see your project take shape. It's split into panels: your conversation with Agent on one side, and a live preview of your app on the other.

### Threads

Every conversation with Agent happens in a thread. Your main thread is where you describe what you want and watch Agent build it. When you use the [task system](/core-concepts/agent/task-system), each background task gets its own thread — so Agent can keep task work isolated without mixing up the conversations.

### Task board

The task board organizes your work into columns — **Drafts**, **Active**, **Ready**, and **Done**. Each task moves from left to right as it progresses, so you can see at a glance what's planned, what Agent is working on, and what's finished. Learn more in [Build in parallel](/core-concepts/agent/task-system).

### Design Canvas

The Design Canvas is a visual editor where you can create and refine mockups before committing to code. Drag elements, adjust layouts, and iterate on your design — then let Agent turn it into a working app. Learn more in [Design Canvas](/replitai/canvas).

## Collaboration

Create a Team Workspace to build together. Invite teammates, share projects, and work on the same app in real time. See [Team workspaces](/core-concepts/workspaces/team-workspaces) for team setup and [Invite teammates](/replitai/invite-teammates) for project-level collaboration.

## Import code and design

Already have a project? Bring it into Replit from GitHub, Figma, or upload files directly. Agent can pick up where you left off and continue building from your existing code or design. See [Import to Replit](/core-concepts/project-editor/app-setup/import).

## Next steps

<CardGroup cols={2}>
  <Card title="Editor & tools" href="/core-concepts/project-editor/editor-and-tools" icon="window-restore">
    The main panels where you see your app's preview, console output, and other tools
  </Card>

<Card title="App setup" href="/core-concepts/project-editor/app-setup/configuration" icon="gear">
    Configure your app's settings, dependencies, secrets, and environment
  </Card>

<Card title="Version control" href="/core-concepts/project-editor/version-control" icon="clock-rotate-left">
    Track changes, roll back to earlier versions, and manage your app's history
  </Card>

<Card title="Publishing" href="/category/replit-deployments" icon="rocket">
    Deploy your app to a live URL so anyone can use it
  </Card>
</CardGroup>

## Frequently asked questions

<Accordion title="Do I need to know how to code?">
  No. Describe what you want in plain language and Agent handles the technical details. You can also make direct edits if you want to.
</Accordion>

<Accordion title="What happens when I close my browser?">
  Your project is saved in the cloud. Come back any time and pick up right where you left off: your files, history, and running app are all preserved.
</Accordion>

<Accordion title="Can I work with other people?">
  Yes. You can invite collaborators to a specific project or create a Team Workspace where members access all projects. See [Team workspaces](/core-concepts/workspaces/team-workspaces) and [Invite teammates](/replitai/invite-teammates).
</Accordion>

<Accordion title="How do I publish my app?">
  When your app is ready, deploy it to a live URL directly from the Project Editor. See [Deployments](/category/replit-deployments).
</Accordion>

## Availability

The Project Editor is available on all plans. Some features like increased compute and always-on deployments require a paid plan. See [Billing](/billing/ai-billing) for details.