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

# Import an existing Project

> Bring existing code or design work into Replit, understand how importing differs from attaching a file, and continue in the resulting Project.

export const ImportProjectCover = () => <div className="chat-mkt" role="img" aria-label="Existing project files and code arriving in a Replit Project canvas" 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 14% 0%, rgba(255,255,255,.82), transparent 40%), radial-gradient(circle at 94% 94%, rgba(255,185,147,.48), transparent 37%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 50%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "flex",
  width: "100%",
  minHeight: "inherit",
  alignItems: "center",
  justifyContent: "center",
  gap: "clamp(12px, 3vw, 32px)",
  padding: "clamp(14px, 3vw, 28px)",
  boxSizing: "border-box"
}}>
        <div style={{
  display: "grid",
  width: "clamp(102px, 19vw, 156px)",
  gap: "clamp(10px, 2vw, 18px)",
  transform: "translateY(-3%)"
}}>
          <div style={{
  display: "grid",
  gap: 7,
  padding: "clamp(11px, 2vw, 17px)",
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 16,
  background: "linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.11))",
  boxShadow: "0 14px 28px rgba(71,21,7,.16)",
  backdropFilter: "blur(6px)"
}}>
            {["78%", "52%", "86%", "64%"].map((width, index) => <span key={width} style={{
  width,
  height: index === 0 ? 6 : 4,
  borderRadius: 999,
  background: index === 0 ? "rgba(255,255,255,.78)" : "rgba(255,255,255,.4)"
}} />)}
          </div>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 7,
  padding: "clamp(10px, 1.7vw, 14px)",
  border: "1px solid rgba(255,255,255,.5)",
  borderRadius: 15,
  background: "rgba(255,255,255,.15)",
  boxShadow: "0 14px 28px rgba(71,21,7,.14)",
  backdropFilter: "blur(6px)"
}}>
            <span style={{
  width: 15,
  height: 18,
  border: "1px solid rgba(255,255,255,.82)",
  borderRadius: 3
}} />
            <span style={{
  width: "52%",
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.58)"
}} />
          </div>
        </div>
        <div style={{
  display: "flex",
  alignItems: "center",
  width: "clamp(28px, 7vw, 74px)",
  height: 2,
  borderRadius: 999,
  background: "linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.78), rgba(255,255,255,.2))",
  boxShadow: "0 0 12px rgba(255,255,255,.3)"
}}>
          {[0, 1, 2].map(node => <span key={node} style={{
  width: node === 1 ? 10 : 6,
  height: node === 1 ? 10 : 6,
  marginLeft: node === 0 ? "12%" : "auto",
  border: "1px solid rgba(255,255,255,.68)",
  borderRadius: 999,
  background: node === 1 ? "rgba(255,255,255,.74)" : "rgba(255,255,255,.2)"
}} />)}
        </div>
        <div style={{
  position: "relative",
  width: "clamp(182px, 38vw, 310px)",
  minWidth: "min(42%, 250px)",
  minHeight: "clamp(162px, 27vw, 220px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.64)",
  borderRadius: 21,
  background: "linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.12))",
  boxShadow: "0 22px 42px rgba(68,20,6,.24)",
  backdropFilter: "blur(8px)",
  boxSizing: "border-box"
}}>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 6
}}>
            {[0, 1, 2].map(dot => <span key={dot} style={{
  width: 7,
  height: 7,
  borderRadius: 999,
  background: dot === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.38)"
}} />)}
            <span style={{
  width: "32%",
  height: 6,
  marginLeft: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.62)"
}} />
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "minmax(20px, .42fr) minmax(0, 1fr)",
  gap: 9,
  minHeight: "clamp(106px, 18vw, 151px)",
  marginTop: "clamp(13px, 2.4vw, 20px)"
}}>
            <div style={{
  display: "grid",
  alignContent: "start",
  gap: 7,
  paddingRight: 7,
  borderRight: "1px solid rgba(255,255,255,.3)"
}}>
              {["86%", "61%", "72%"].map((width, index) => <span key={width} style={{
  width,
  height: 6,
  borderRadius: 999,
  background: index === 0 ? "rgba(255,255,255,.82)" : "rgba(255,255,255,.38)"
}} />)}
            </div>
            <div style={{
  display: "grid",
  gap: 8
}}>
              <span style={{
  border: "1px solid rgba(255,255,255,.48)",
  borderRadius: 10,
  background: "rgba(255,255,255,.2)"
}} />
              <span style={{
  border: "1px solid rgba(255,255,255,.34)",
  borderRadius: 10,
  background: "rgba(255,255,255,.1)"
}} />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>;

<ImportProjectCover />

If you have already been working on an app or project, you can bring it into Replit and continue the work in a Project. Importing is different from attaching a file as evidence or context for a Conversation.

## Choose a supported source

The source determines what you provide and how the existing work enters Replit. The current import guide documents these paths:

| Existing work                     | Supported sources                                                                                       |
| --------------------------------- | ------------------------------------------------------------------------------------------------------- |
| Repositories and builder projects | **GitHub**, **Bitbucket**, **Vercel**, **Bolt**, **Lovable**, **Base44**, and **Previous Agent export** |
| Designs                           | **Figma** and **Claude**                                                                                |
| Local files and data              | **ZIP** and **Spreadsheet** (`.xlsx`, `.csv`, or a public Google Sheets URL)                            |

Some builder imports use a GitHub repository exported from the original service. Review the source-specific guide before importing. Settings, secrets, database values, or provider-specific services may require additional setup afterward.

From the prompt box, select the **plus** menu, then **Import an existing project** to open the import flow.

## Import or attach?

* **Import a Project** when you want to continue building from existing code, a design, or structured project work.
* **Upload a file** when a document, spreadsheet, image, or screenshot provides context for a question or task in the current Conversation.

For the second path, see [Upload and use files](/chat/upload-and-use-files).

## Continue the work

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/build/import-from-providers">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="file-import" size={24} />
      </em>
    </div>

    <span>
      <Icon icon="file-import" size={19} />
    </span>

    <div className="chat-card-title">Import from a provider</div>
    <p>Choose a supported source and follow the complete import procedure.</p>
    <div className="chat-card-link">Open the Build guide →</div>
  </a>

  <a className="chat-example has-visual" href="/features/projects-and-artifacts/projects">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="diagram-project" size={24} />
      </em>
    </div>

    <span>
      <Icon icon="diagram-project" size={19} />
    </span>

    <div className="chat-card-title">Projects</div>
    <p>Understand the structured space where imported work continues.</p>
    <div className="chat-card-link">Learn about Projects →</div>
  </a>
</section>

Once the Project is in Replit, [use a design system](/chat/use-a-design-system) when the work should follow an established visual language.
