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

# Conversations vs. Projects

> Understand when to continue in a Conversation and when to turn substantial work into a Project.

export const ConversationsProjectsCover = ({handoff = false}) => <div className="chat-mkt" role="img" aria-label={handoff ? "A Replit Conversation flowing into a structured Project window" : "A frosted Replit Conversation window linked to a structured Project window"} style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "flex",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "inherit",
  alignItems: "center",
  justifyContent: "center",
  gap: handoff ? "clamp(5px, 1vw, 13px)" : "clamp(3px, .8vw, 10px)",
  padding: "clamp(10px, 1.6vw, 18px)"
}}>
        <div style={{
  position: "relative",
  flex: handoff ? "0 1 38%" : "0 1 45%",
  width: handoff ? "38%" : "45%",
  minWidth: 0,
  maxWidth: "none"
}}>
          <div aria-hidden="true" style={{
  position: "absolute",
  width: "84%",
  height: "82%",
  left: "10%",
  top: "9%",
  transform: "rotate(3deg)",
  border: "1px solid rgba(255,255,255,.28)",
  borderRadius: 20,
  opacity: 0.52
}} />
          <div aria-hidden="true" style={{
  position: "relative",
  display: "flex",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "clamp(138px, 20vw, 190px)",
  gap: "clamp(7px, 1.5vw, 14px)",
  padding: "clamp(10px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.1))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(5px)"
}}>
            <div style={{
  display: "grid",
  width: "clamp(20px, 4vw, 36px)",
  minWidth: "clamp(20px, 4vw, 36px)",
  alignContent: "start",
  gap: 8,
  paddingRight: "clamp(6px, 1vw, 11px)",
  borderRight: "1px solid rgba(255,255,255,.3)"
}}>
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 4,
  background: "rgba(255,255,255,.9)"
}} />
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 4,
  border: "1px solid rgba(255,255,255,.66)",
  background: "rgba(255,255,255,.12)"
}} />
              <span style={{
  width: 10,
  height: 10,
  borderRadius: 999,
  border: "1px solid rgba(255,255,255,.48)"
}} />
            </div>
            <div style={{
  display: "grid",
  minWidth: 0,
  flex: "1 1 auto",
  alignContent: "space-between",
  gap: 8
}}>
              <div style={{
  display: "grid",
  gap: 7
}}>
                <span style={{
  width: "66%",
  height: 17,
  border: "1px solid rgba(255,255,255,.44)",
  borderRadius: "10px 10px 10px 3px",
  background: "rgba(255,255,255,.17)"
}} />
                <span style={{
  justifySelf: "end",
  width: "56%",
  height: 17,
  borderRadius: "10px 10px 3px 10px",
  background: "rgba(255,255,255,.76)"
}} />
                <span style={{
  width: "76%",
  height: 21,
  border: "1px solid rgba(255,255,255,.4)",
  borderRadius: "10px 10px 10px 3px",
  background: "rgba(255,255,255,.14)"
}} />
              </div>
              <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: 6,
  padding: "7px 8px",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 10,
  background: "rgba(255,255,255,.14)"
}}>
                <span style={{
  width: "65%",
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.7)"
}} />
                <span style={{
  width: 14,
  height: 14,
  borderRadius: 5,
  background: "rgba(255,255,255,.88)"
}} />
              </div>
            </div>
          </div>
        </div>

        <div aria-hidden="true" style={{
  position: "relative",
  width: handoff ? "clamp(30px, 9vw, 92px)" : "clamp(24px, 7vw, 76px)",
  minWidth: handoff ? "clamp(30px, 9vw, 92px)" : "clamp(24px, 7vw, 76px)",
  height: "clamp(38px, 6vw, 56px)"
}}>
          <span style={{
  position: "absolute",
  left: 0,
  right: 0,
  top: "50%",
  width: "100%",
  height: 2,
  borderRadius: 999,
  background: "linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.86), rgba(255,255,255,.18))",
  boxShadow: "0 0 12px rgba(255,255,255,.36)"
}} />
          <span style={{
  position: "absolute",
  left: handoff ? "7%" : "13%",
  top: "calc(50% - 5px)",
  width: handoff ? 7 : 10,
  height: handoff ? 7 : 10,
  border: "1px solid rgba(255,255,255,.72)",
  borderRadius: 999,
  background: "rgba(255,255,255,.18)",
  boxShadow: "0 0 10px rgba(255,255,255,.24)"
}} />
          <span style={{
  position: "absolute",
  left: handoff ? "39%" : "46%",
  top: handoff ? "calc(50% - 6px)" : "calc(50% - 8px)",
  width: handoff ? 12 : 16,
  height: handoff ? 12 : 16,
  border: "1px solid rgba(255,255,255,.86)",
  borderRadius: 999,
  background: "rgba(255,255,255,.28)",
  boxShadow: "0 0 14px rgba(255,255,255,.34)"
}} />
          <span style={{
  position: "absolute",
  right: handoff ? "3%" : "8%",
  top: handoff ? "calc(50% - 9px)" : "calc(50% - 5px)",
  width: handoff ? 18 : 10,
  height: handoff ? 18 : 10,
  border: "1px solid rgba(255,255,255,.72)",
  borderRadius: 999,
  background: handoff ? "rgba(255,255,255,.42)" : "rgba(255,255,255,.18)",
  boxShadow: handoff ? "0 0 18px rgba(255,255,255,.46)" : "0 0 10px rgba(255,255,255,.24)"
}} />
        </div>

        <div style={{
  position: "relative",
  flex: handoff ? "0 1 52%" : "0 1 45%",
  width: handoff ? "52%" : "45%",
  minWidth: 0,
  maxWidth: "none",
  transform: handoff ? "translateX(1%)" : undefined
}}>
          <div aria-hidden="true" style={{
  position: "absolute",
  width: "84%",
  height: "82%",
  right: "10%",
  top: "9%",
  transform: "rotate(-3deg)",
  border: "1px solid rgba(255,255,255,.28)",
  borderRadius: 20,
  opacity: 0.52
}} />
          <div aria-hidden="true" style={{
  position: "relative",
  display: "grid",
  width: "100%",
  boxSizing: "border-box",
  minHeight: "clamp(138px, 20vw, 190px)",
  gridTemplateRows: "auto 1fr",
  gap: "clamp(9px, 1.8vw, 15px)",
  padding: "clamp(10px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.54)",
  borderRadius: 20,
  background: "linear-gradient(180deg, rgba(255,255,255,.27), rgba(255,255,255,.1))",
  boxShadow: "0 18px 36px rgba(55,27,18,.2)",
  backdropFilter: "blur(5px)"
}}>
            <div style={{
  display: "flex",
  alignItems: "center",
  gap: 6
}}>
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.92)"
}} />
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.52)"
}} />
              <span style={{
  width: 8,
  height: 8,
  borderRadius: 999,
  background: "rgba(255,255,255,.32)"
}} />
              <span style={{
  width: "34%",
  height: 6,
  marginLeft: 6,
  borderRadius: 999,
  background: "rgba(255,255,255,.62)"
}} />
            </div>
            <div style={{
  display: "grid",
  gridTemplateColumns: "minmax(18px, .45fr) minmax(0, 1fr)",
  gap: "clamp(7px, 1.5vw, 14px)",
  minWidth: 0
}}>
              <div style={{
  display: "grid",
  alignContent: "start",
  gap: 7,
  paddingRight: "clamp(5px, 1vw, 10px)",
  borderRight: "1px solid rgba(255,255,255,.3)"
}}>
                <span style={{
  width: "80%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.8)"
}} />
                <span style={{
  width: "64%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.42)"
}} />
                <span style={{
  width: "74%",
  height: 7,
  borderRadius: 999,
  background: "rgba(255,255,255,.26)"
}} />
              </div>
              <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
  gridTemplateRows: "repeat(2, minmax(0, 1fr))",
  gap: 7,
  minWidth: 0
}}>
                <span style={{
  border: "1px solid rgba(255,255,255,.48)",
  borderRadius: 9,
  background: "rgba(255,255,255,.2)"
}} />
                <span style={{
  border: "1px solid rgba(255,255,255,.32)",
  borderRadius: 9,
  background: "rgba(255,255,255,.1)"
}} />
                <span style={{
  gridColumn: "span 2",
  border: "1px solid rgba(255,255,255,.4)",
  borderRadius: 9,
  background: "rgba(255,255,255,.16)"
}} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>;

<ConversationsProjectsCover />

When you use Replit, you're either working in a Conversation or building a Project. Conversations are for questions, exploration, follow-ups, and Routines. Projects are for building applications and creating slides and designs.

[Learn how to turn a Conversation into a Project.](/chat/continue-or-create-a-project)

## How they differ

Although they're linked, Conversations and Projects serve different purposes. This is how they differ:

| Area             | Conversations                            | Projects                                                                                                                                   |
| ---------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| Best for         | Questions, exploration, and Routines     | Deeper build and design work such as apps, slides, dashboards, and multiple artifacts                                                      |
| Structure        | A single thread                          | A Project workspace with multiple artifacts                                                                                                |
| Background tasks | Not available                            | Can run in parallel                                                                                                                        |
| Routines         | Available                                | Not available                                                                                                                              |
| Integrations     | Available                                | Available                                                                                                                                  |
| Can create       | Assets, such as docs, images, and sheets | Assets, such as docs, images, and sheets, plus [Artifacts](/features/projects-and-artifacts/artifacts), such as slides, apps, and websites |
| Publishing       | Cannot be published                      | Can be published and made public                                                                                                           |

<Frame>
  <img src="https://mintcdn.com/replit/teDUL4A-lNO7dv1O/images/chat/conversation-and-project-icons.png?fit=max&auto=format&n=teDUL4A-lNO7dv1O&q=85&s=dd0308cf6783c2345507028dbcf27533" alt="Replit sidebar showing the chat icon for a Conversation and the grid icon for a Project" width="466" height="290" data-path="images/chat/conversation-and-project-icons.png" />
</Frame>