Server	Description	Install
Atlassian	Project management and team collaboration tools.
Amplitude	Product analytics and user behavior insights.
Linear	Create and update issues directly from Agent.
Miro	Collaborative AI-powered visual platform for planning and design.
Notion	Sync docs, notes, and project trackers into Agent context.
PostHog	Product analytics, session replay, and feature flags.
Sentry	Error tracking and performance monitoring.
Stripe	Payment processing and financial infrastructure.

</div>
              <div style={{
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    height: '32px'
  }}>
                <a href="#" id="agent-input-start-btn" onClick={handleStartClick} style={{
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
    padding: '0 14px',
    height: '32px',
    fontSize: '14px',
    border: 'none',
    borderRadius: '8px',
    transition: 'all 120ms ease-out',
    color: 'var(--ai-button-text-disabled)',
    background: 'var(--ai-button-bg-disabled)',
    cursor: 'not-allowed',
    textDecoration: 'none'
  }}>
                  <span>Start</span>
                  {ArrowIcon}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>;
};

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

Replit is an AI-powered platform that lets you create and publish apps from a single browser tab.
Instead of wrestling with complex development environments, you get coding, publishing, and collaboration tools in one integrated interface.

Building apps traditionally requires installing programs, languages, and packages—a time-consuming setup process.
On Replit, the platform configures your environment instantly, so you can start building whether you're a beginner or experienced developer.

You have everything required to create apps from one browser tab—no installation required.
With AI coding tools, real-time collaboration, and instant sharing, Replit gets you from idea to app, fast.

## Quickstart guides

To create your app on Replit, choose the guide that matches your needs:

### Create new apps

<CardGroup cols={2}>
  <Card title="Build your first app" icon="robot" href="/getting-started/quickstarts/ask-ai/">
    ⏱️ *5 minutes*

Build your first app with AI-powered Replit tools.
  </Card>

<Card title="Remix an existing app" icon="shuffle" href="/getting-started/quickstarts/remix-an-app/">
    ⏱️ *1 minute*

Jump-start your project by building on community-contributed apps.
  </Card>
</CardGroup>

### Import existing projects

<CardGroup cols={2}>
  <Card title="Import from GitHub" icon="github" href="/getting-started/quickstarts/import-from-github/">
    ⏱️ *2 minutes*

Import an existing GitHub repository into Replit.
  </Card>

<Card title="Import from Figma" icon="figma" href="/getting-started/quickstarts/import-from-figma/">
    ⏱️ *3 minutes*

Convert your Figma designs into functional React applications.
  </Card>

<Card title="Import from Bolt" icon="bolt" href="/getting-started/quickstarts/import-from-bolt/">
    ⏱️ *4 minutes*

Migrate your Bolt projects to Replit with Agent assistance.
  </Card>

<Card title="Import from Lovable" icon="heart" href="/getting-started/quickstarts/import-from-lovable/">
    ⏱️ *4 minutes*

Transfer your Lovable projects to Replit and continue building.
  </Card>
</CardGroup>

### Workspace features

Replit provides the following essential app creation tools:

* [Real-time preview](/replit-workspace/workspace-features/preview) of your app
* [Publish in minutes](/category/replit-deployments)
* Browser native app that requires zero installation and configuration
* [Full-featured code editor](/category/workspace-features)
* [Mobile app](/platforms/mobile-app) for building apps from your phone or tablet
* [AI-assisted app creation](/replitai/agent)
* [Version control integration](/replit-workspace/workspace-features/version-control) for tracking changes
* [Team collaboration](/teams/public_profiles) for building together

### AI companion capabilities

Replit [Agent](/replitai/agent) accelerates app creation with the following capabilities:

* Complete app generation and setup from natural language descriptions
* Code suggestions and autocomplete
* Automated error detection and debugging assistance
* Documentation generation for your app

### Share in minutes

Publish your apps in minutes using the following tools:

* App publishing to the cloud in a few clicks
* Database integration and hosting
* Custom domain support and connection encryption for your applications

## Additional information

To learn more about all of Replit's features, see the following resources:

* [Starter Plan](/getting-started/starter-plan): Learn about Starter plan features and what you can build for free
* Learn about the Workspace features from [Workspace Features](/category/workspace-features).
* Learn about the capabilities of the Replit AI-powered features from [Replit Agent](/replitai/agent/).
* Learn how to share your creations from [Sharing Your Replit App](/replit-app/collaborate/).
* [Download the mobile app](https://replit.com/mobile/) for iOS or Android devices.

---

# Source: https://docs.replit.com/extensions/development/react/introduction.md

# Introduction

> Learn how to build Replit extensions using React with our official package, hooks, and components for a streamlined development experience.

Aside from the original API Client, we have a React-specific package which eliminates the need for extension developers to do a lot of boilerplate setup when using React for Extension development.

The package comes with a set of hooks and components that combine to make a blazingly fast and seamless developer experience.

* [NPM Package](https://www.npmjs.com/package/@replit/extensions-react)
* [GitHub Repository](https://github.com/replit/extensions-react)

## Installation

```
npm install @replit/extensions-react
yarn add @replit/extensions-react
pnpm add @replit/extensions-react
```

## Usage

Fork the [React Extension Template](https://replit.com/@replit/React-Extension?v=1) to get started.  Alternatively, you can start from scratch by wrapping your application with the `HandshakeProvider` component imported from `@replit/extensions-react`.

```tsx  theme={null}
import { HandshakeProvider } from '@replit/extensions-react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
  <HandshakeProvider>
    <App />
  </HandshakeProvider>
)
```

In the `App` function, check the handshake status with the `useReplit` hook.

```tsx  theme={null}
import { useReplit } from '@replit/extensions-react';

function App() {
  const { status, error, replit } = useReplit();

if(status === "loading") {
    return <div>Loading...</div>
  }

if(status === "error") {
    return <div>An error occurred: {error?.message}</div>
  }

return <div>
    Extension is Ready!
  </div>
}
```

---

# Source: https://docs.replit.com/extensions/examples/javascript-commands.md

# JavaScript Commands

> Learn how to build an extension that adds JavaScript-related commands to Replit for managing npm packages and running scripts.

This tutorial assumes that you have basic web development knowledge, some familiarity with Replit, and familiarity with the Command system.

In a gist, we will fork an extension template, add a background script, and in that background script, write code that adds Commands to to the Replit workspace. Our command can be thought of as a simple tree. There's a root command called "JavaScript tools". It returns three subcommands:

* "Install": This command lets you search the npm registry for packages to install, based on what you've typed. Selecting a package opens a new shell and invokes `npm install <package name>`

* "Scripts": This command displays scripts in your package.json file. Selecting the script opens a new shell and invokes that command.

* "Uninstall": This returns all your installed packages. Selecting a package uninstalls it

## Setting up your extension replit app

The first thing you want to do is fork an extension template. We recommend using the [React Extension Template](https://replit.com/@replit/React-Extension?v=1). although we are not going to write any react code in this tutorial.

Add a background script to your extension. You can scaffold a background script by typing in `replkit add background` in the shell. This creates a new folder `src/background`. The `src/background/main.tsx` file here is where we'll be writing our code.

## Adding a root command

Let's add a simple root command to the command bar to contain our subcommands.

```typescript  theme={null}
async function main() {
  await replit.commands.add({
    id: "js-commands",
    contributions: [replit.ContributionType.CommandBar],
    command: {
      label: "JS",
      description: "JavaScript Commands",
      icon: "js.png",
      commands: async () => {
        // This is where subcomands go:
        return [];
      },
    },
  });
}

main();
```

This adds an empty 'context' command, AKA a command that contains other sub-commands. This is what it looks like:

## Building "Uninstall"

Let's start with Uninstall. This command first figures out what packages you have installed, and then runs `npm uninstall ${package}`

The simplest way to figure out what you have installed is by parsing `package.json`, and looking at the dependencies object. Since this tutorial is focused on commands, here's the code that reads `package.json` and returns an array of installed packages:

```typescript  theme={null}
async function getPackageJson() {
  // This uses replit's filesystem API to read the package.json file. The command returns an object containing `content` as a string, or an `error` field if something went wrong
  const res = await replit.fs.readFile("package.json");

if (res.error) return { error: res.error, result: null };

try {
    let packageJsonObject = JSON.parse(res.content);
    return { error: null, result: packageJsonObject };
  } catch (e) {
    return {
      error: new Error("Failed to parse package.json: " + e.message),
      result: null,
    };
  }
}

async function getInstalledPackages() {
  const packageJsonRes = await getPackageJson();

if (packageJsonRes.error) return packageJsonRes;

// This returns an array of { name, version } objects
  const packages = Object.entries(packageJsonRes.result.dependencies).map(([name, version]) => ({
    name,
    version,
  }));

return {
    error: null,
    result: packages,
  }
}
```

Armed with these functions, we can build the uninstall subcommand. The subcommand returns a list of action commands, one per package.

```typescript  theme={null}
const uninstallCommand = {
  label: "Uninstall",
  description: "Uninstall npm packages",
  commands: async () => {
    const packagesRes = await getInstalledPackages();

if (packagesRes.error) {
      return null;
    }

return packagesRes.result.map(({ name, version }) => {
      return {
        label: name,
        description: version,
        run: async () => {
          await replit.exec.exec(`npm uninstall ${name}`);
        },
      };
    });
  },
};
```

To add this command to our root command, simply include `uninstallCommand` as one of the commands returned by the root command:

```typescript  theme={null}
    {
      commands: async () => {
        // This is where subcomands go:
        return [
            uninstallCommand,
        ];
      },
    }
```

This is what it looks like in our JavaScript command now:

As you can see, the uninstall command lists installed npm packages that you can uninstall

## Building "Scripts"

"Scripts" is very similar to uninstall, except that we need to surface the output from the script. For this, we use an experimental API called execInShell.

Other than that, we can reuse most of the code from "Uninstall"

```typescript  theme={null}
async function getScripts() {
  const packageJsonRes = await getPackageJson();

if (packageJsonRes.error) return packageJsonRes;

// This returns an array of { name, version } objects
  const scripts = Object.entries(packageJsonRes.result.scripts).map(
    ([name, cmd]) => ({
      name,
      cmd,
    }),
  );

return {
    error: null,
    result: scripts,
  };
}

const scriptsCommand = {
  label: "Scripts",
  description: "Run scripts in your package.json",
  commands: async () => {
    const scriptsRes = await getScripts();

if (scriptsRes.error) {
      return null;
    }

return scriptsRes.result.map(({ name, cmd }) => {
      return {
        label: name,
        description: cmd,
        run: async () => {
          await replit.experimental.execInShell(`npm run ${name}`);
        },
      };
    });
  },
};
```

Let's add the scripts command to our root command!

```typescript  theme={null}
    {
      commands: async () => {
        // This is where subcomands go:
        return [
            scriptsCommand,
            uninstallCommand,
        ];
      },
    }
```

Here's our command!

## Building "Install"

"Install" is somewhat different: we are pulling external data from the npm registry in response to the user typing in a search query. And we only want to explicitly trigger this search when the user has indicated that they want to search for npm packages to install

```typescript  theme={null}
async function getNpmPackages(search) {
  try {
    const res = await fetch(
      `https://registry.npmjs.org/-/v1/search?text=${search}`,
    );
    const json = await res.json();

return { error: null, result: json.objects };
  } catch (e) {
    return { error: e, result: null };
  }
}

const installCommand = {
  label: "Install",
  description: "Install a package from npm",
  commands: async ({ search, active }) => {
    // This makes sure we do not perform a search unless someone selects "Install"
    if (!active) {
      return;
    }

const packagesRes = await getNpmPackages();

if (packagesRes.error) {
      return null;
    }

return packagesRes.result.map((pkg) => {
      return {
        label: pkg.package.name,
        description: pkg.package.description,
        run: async () => {
          await replit.experimental.execInShell(`npm i ${pkg.package.name}`);
        },
      };
    });
  },
};
```

Notice the `search` and `active` parameters?

* `active` is `true` when users have selected the "Install" command (as opposed to the command system merely querying for subcommands in advance). We can check for it to make sure that we only query npm when we know that a user is interested in installing an extension.
* `search` returns what the user has typed into the command bar, which we use for searching the npm registry

This means that extensions can decide which scripts are directly accessible from the root CommandBar. For example, the scripts extension can let users search and trigger scripts immediately after opening the CommandBar:

We are ready to add "Install" to the root command! This is what our root command object looks like now:

```typescript  theme={null}
  await replit.commands.add({
    id: "js-commands",
    contributions: [replit.ContributionType.CommandBar],
    command: {
      label: "JS",
      description: "JavaScript Commands",
      commands: async () => {
        // This is where subcomands go:
        return [
            installCommand,
            scriptsCommand,
            uninstallCommand,
        ];
      },
    },
  });
```

Open the command bar, type in "Install", select your new command, and give it a try!

## Exercises left to the reader

We built a basic version of the JavaScript commands extension. This could be improved quite a bit:

* Did you notice that we only use `npm` in all the examples? JavaScript ecosystem has a plethora of package managers, including yarn, pnpm, and bun. How can we support all of them? And can we do it "magically" where someone using this extension doesn't have to manually select their package manager in our command? (Hint: it involves the lockfiles)

* We can probably cache the npm registry fetch call, so when you backspace through any letters, the results for that search query appear instantly.

* We can debounce npm search requests to prevent hitting npmjs.com excessively while you're typing out the package you're looking for.

* What happens if someone uses this command in a replit app that isn't a JavaScript project? We can probably check for the presence of `package.json` before showing the command. And maybe, if someone doesn't have a `package.json` yet, we can instead show a command to `npm init` their project!

If you just want to look at the solution, see the JavaScript commands extension on the store:

* Here's the link to the [extension](https://replit.com/extension/@ArnavBansal/adccbcd2-c9d6-4778-b0cb-20e1bf289634)
* Here's a link to the extension's [source replit app](https://replit.com/@ArnavBansal/js-commands-extension?v=1)

---

# Source: https://docs.replit.com/extensions/examples/json-editor.md

# JSON Editor

> Build a custom JSON editor extension for Replit using React and react-json-view to enable structured editing and code folding of JSON files.

# Create a JSON editor

In this tutorial, we will create a JSON editor Extension with React and the [react-json-view](https://www.npmjs.com/package/react-json-view) package. Our application will display a JSON file's content and allow users to edit, add or delete properties directly from the editor. When a user finishes editing the JSON, the file will automatically update with the changes.

## Prerequisites

This tutorial assumes that you have a basic knowledge and understanding of web development and React.

## Set up your Replit App

1. Fork the [Replit React Extension Template](https://replit.com/@replit/React-Extension?v=1).
2. Install the `react-json-view` package with `npm install --force react-json-view`. The package uses React 17 as a peer dependency but works fine with React 18 as well.

## Configure the manifest file

Configure the title and description in `public/extension.json` (the Extension [manifest file](../api/manifest)).

```json  theme={null}
{
  "name": "JSON Editor",
  "description": "A viewer/editor for JSON files, providing code folding and structured editing",
  "tags": ["editor"]
}
```

Add the `fileHandlers` property to `extension.json` and provide a handler for JSON files. This tells Replit that your extension handles a particular file pattern using a page provided by your extension at the `handler` path. In this case, the handler is `/`, meaning that Replit shows the page at the root as the handler for all `.json` files

```json  theme={null}
  "fileHandlers": [
    {
      "glob": "*.json",
      "handler": "/"
    }
  ],
```

## Build the JSON editor

Import the following dependencies in `src/App.jsx`.

```js  theme={null}
import * as React from "react";
import ReactJson from "react-json-view";
import "./App.css";
import {
  useReplit,
  useReplitEffect,
  useWatchTextFile,
} from "@replit/extensions-react";
```

Remove all the existing code from the `App` function and a state variable `path`, which will point to the JSON file your Extension will render.

```js  theme={null}
function App() {
  const [path, setPath] = React.useState(null);

return <div>My app</div>;
}
```

### Initialize the Handshake

Initialize the handshake and derive the `status` and `error` properties from the [`useReplit hook`](../development/react/hooks/useReplit) within the `App` function.

The `status` property is an enumerated value indicating whether the handshake connection with Replit is `loading`, `ready`, or has resulted in an `error`.

```js  theme={null}
function App() {
  ...

const { status, error } = useReplit();

...
}
```

### Get the File Path

Use the [`useReplitEffect`](../development/react/hooks/useReplitEffect) hook and set the `path` state to the `extensionPort`'s file path. This will set the `path` state once the handshake between Replit and your Extension has been established.

```js  theme={null}
useReplitEffect(async ({ extensionPort }) => {
  const filePath = await extensionPort.filePath;

setPath(filePath);
}, []);
```

### Create the File Watcher

You can easily create a file watcher with the [`useWatchTextFile`](../development/react/hooks/useWatchTextFile) hook. Call the hook, pass in the file path, and derive `content` and `writeChange` from it.

```js  theme={null}
const { content, writeChange } = useWatchTextFile({
  filePath: path,
});
```

### Reflecting file contents

Create a `parsedContent` [React Memo](https://react.dev/reference/react/useMemo) that returns the `content` file value as parsed JSON. If there is an error parsing it, return `null` instead.

The [React useMemo hook](https://react.dev/reference/react/useMemo) caches a result based on an array of dependencies between re-renders to improve performance. Caching reduces the amount of computing required in a process, ultimately improving performance.

```js  theme={null}
const parsedContent = React.useMemo(() => {
  try {
    return JSON.parse(content);
  } catch (e) {
    return null;
  }
}, [content]);
```

### Handle file changes

Create a function which handles changes from the [react-json-view](https://www.npmjs.com/package/react-json-view) editor component. The `updated_src` property passed into this function is a JSON object.

Stringify the JSON object and then write it to the JSON file using the `writeChange` function.

Finally, update the `setContent` state to reflect the contents of the file.

```js  theme={null}
const handleChange = async ({ updated_src: newContent }) => {
  const stringified = JSON.stringify(newContent, null, 2);

writeChange({
    from: 0,
    to: content.length,
    insert: stringified,
  });
};
```

### Build the UI

It's time to start building the UI.

First, handle loading and error states.

```js  theme={null}
function App() {
  ...

if (status === "error") {
    return <main>
      <div className="notice error">{error.toString()}</div>
    </main>
  }
  else if (status === "loading") {
    return <main>
      <div className="notice">Loading...</div>
    </main>
  }
  else if (status === "ready") {
    return <main>Ready</main>
  }
}
```

[Install the Extension](/extensions/development/installation) by opening up the Command Bar (**cmd**/**ctrl** + k), navigating to **Extensions**, and selecting **From this Replit App**. The extension should load and display "Ready" almost instantly.

If you open the webview using the Preview tool, your extension should load for a few seconds and fail. Extensions should be developed and used within the correct pane rather than the webview.

If both `path` and `content` are valid strings, render the editor. If not, tell the user to select a file.

```js  theme={null}
else if (status === "ready") {
  return <main>
    {path && content ?
      <ReactJson
        style={{ width: '100vw', height: "100vh", padding: "1em" }}
        theme="ocean"
        displayDataTypes={false}
        src={parsedContent}
        onEdit={handleChange}
        onAdd={handleChange}
        onDelete={handleChange}
      /> :
      <div className="notice">
        Please select a file
      </div>
    }
  </main>
}
```

That's it. Now install and load your Extension, and it should work.

### Style your Extension

Right now, the Extension has barely any styles applied to it. To make it look more polished, paste the following into `App.css`:

```css  theme={null}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: flex;
  font-family: sans-serif;
  background: black;
  color: white;
}

#root,
main {
  flex-grow: 1;
  display: flex;
  width: 100%;
}

.notice {
  flex-grow: 1;
  align-self: center;
  justify-self: center;
  text-align: center;
  color: white;
  font-size: 24px;
}
```

***

Your Extension is now complete! [Install it](/extensions/development/installation), press the kebab menu on a JSON file in the file tree and then select "Open with JSON Editor" to start editing your JSON files with ease.

[See full solution](https://replit.com/@IroncladDev/JSON-editor-example?v=1).

---

# Source: https://docs.replit.com/extensions/basics/key-concepts.md

# Key Concepts

> On this page, you'll learn the key concepts of Replit Extensions. If you're new to Extensions, we recommend you start with the [Get Started guide](/extensions/).

## Platform

### Extension

Extensions allow you to add custom functionality, tools, and third-party integrations to the Workspace. Extensions can be installed by any user via the Store.

### Store

The Extensions Store is a marketplace for Extensions. Anyone can create and release an extension on the store. You can also share private links to unlisted Extensions, which is great for testing, internal tools, and more.

***

## Development

### Extension Replit App

Extension Replit Apps contain the frontend code for your Extension. You can use HTML / CSS / JavaScript, and any web framework of your choice. We provide templates that use React and Vanilla JavaScript.

### Devtools

Extension Devtools are a set of tools that help you build and test your Extension. In the Extension Replit App workspace, you can access the Devtools by clicking the "Devtools" button in the header.

## Extension Features

### Tool (*Extension UI*)

A custom user interface presented as a Tab in the workspace. Examples include a ReplDB editor or a Chat Extension. Learn how to [build your first tool](/extensions/examples/snippet-manager).

### File Handler (*File Editors and Icons*)

File handlers allow you to build Tools and add icons for specific file types. Examples include a JSON file editor or a CSV file editor. Learn how to [build your first file handler](/extensions/examples/json-editor). Under the hood, file handlers are just tools with a filetype association.

### Command

Commands allow you to add custom commands to the CLUI command bar. Commands are a great way to build a CLI-like experience for your extension, and enable quick actions for your users.

### Background Script

Background scripts are loaded when the Replit App opens. They remain permanently loaded until the extension is uninstalled or you close the workspace.

---

# Source: https://docs.replit.com/replit-workspace/keyboard-shortcuts.md

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

# Keyboard Shortcuts

> Learn how to view, add, and modify keyboard shortcuts that can boost your productivity in Replit.

Keyboard shortcuts let you run commands, modify text, and navigate the workspace
using configurable key combinations. You can set and use keyboard shortcuts in
the Replit.com web app and desktop app.

## Viewing keyboard shortcuts

<Info>
  The Replit.com web app and desktop apps keep separate shortcut preferences. Changes in one environment don't affect the other.
</Info>

To view your keyboard shortcut settings, follow these steps:

1. Open a Replit App to navigate to the workspace.
2. Open the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=39c5a0a4872b7416378ddad9f2bef608" alt="gear icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/settings-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e0a36e6a9a2078c02467d2abf0b8ba9e 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3be97f139b63f478d536ccaa51518c9a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4eba230fefbe9836ffd37672275aa7d1 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=97e5099639faf4a5490d8e000c00149a 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4d9552209cee3306d2bc2a02e747ecb6 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d84a81284c0c9af295e0b86273d5c291 2500w" /> **User Settings** tab from <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="all tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** in the dock.
   Alternatively, search for "User Settings" using the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass.
3. Select the **Keyboard shortcuts** tab to view the list of commands and their assigned shortcuts.

## Customizing keyboard shortcuts

To add or modify a keyboard shortcut, follow these steps:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a6613ac9b303fa6dea65e5cf08ddca06" alt="plus icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-app-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0f0aa42a2a63cca6629fe393ffb100e4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e6cce9e17a54ec2279d57d255e5233ba 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6a6f30d08c7ab4811ba927af66ca7311 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f7249d48a50a7db0713ea3f92f4c422f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f2a12316d646b72674a837cbe70a10f8 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cc3b1f288cf5086a84aadaa9b1d4fba 2500w" />**Add shortcut**, located next
   to the unassigned command, or the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9fe8b0d62049a6cc25ff54186cd82167" alt="pencil icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/pencil-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=70f222a550c10565fda88d2a405f0919 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2e0254eba779d03f1854e9dceaca64f3 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=63823efefad606fd66371d96f5d4069a 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0529386335540e80fc49377dbccc8cdd 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0479fb149fec299ab1c26d5c723a534f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a9a6290741fad3dcd5d918c07bd79adc 2500w" /> pencil icon for assigned commands.
2. When "Recording..." appears next to the command, press the key combination you want to assign.
   To cancel recording, click an empty area inside the tab.
3. To revert the shortcut, select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/rollback-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=34791076a8d31ed55a923fff97179a6f" alt="rollback icon" data-og-width="12" width="12" data-og-height="12" height="12" data-path="images/icons/rollback-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/rollback-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f4c01c9de40b3f082ec90b725d68c13d 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/rollback-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=81eebf41994b2b6efaa2155ed2bd3030 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/rollback-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=db132485bb79a63b97a4afd74d879864 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/rollback-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a4bf6a6fa2b53af44b23b3a1c0546b79 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/rollback-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8e829bfcacb9e2d7c53406f9411a9039 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/rollback-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=36866c365d865b45e0216641e343779b 2500w" /> rollback icon.

## Removing keyboard shortcuts

To remove a keyboard shortcut, select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8f151791088b8b241632ca547f90265e" alt="trash icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/trash-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2623b12e7af8f79729b14508489b0418 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=31c030d2861933867568ad11b940a210 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d3de8c448b8ab0d7b3bd8978fa346ddb 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=70b9aaae5e97d97328752b89a2d6d963 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0d4a3e8a7b503e3fa067daf5d6262b88 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3712a7908610fc2a9295f31cd2c5c0c7 2500w" /> trash icon next to the command.

## Tab navigation

You can use the browser **Tab** key navigation to navigate between the interactive elements
on a page. However, the File Editor, Console, and Shell tools capture the **Tab** key as
input for purposes including indentation.

To continue  cycling through page elements while in these tools, follow these steps:

1. Press **Esc** to release focus from the tools
2. Press **Tab** to move to the next element

---

# Source: https://docs.replit.com/category/legal-and-security.md

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

# Legal and Security

> Learn about Replit's policies on security, privacy, licensing, usage limits, and other legal matters to help you use the platform safely and effectively.

<CardGroup cols={2}>
  <Card title="Reporting Abuse on Replit" href="/legal-and-security-info/abuse-report" icon="bug" horizontal>
    At Replit, we strive to maintain a safe and welcoming environment for all our users. Report any abusive, harmful, or inappropriate content immediately.
  </Card>

<Card title="Copyright claims and takedown requests" href="/legal-and-security-info/copyright-claims-takedown-requests" icon="copy" horizontal>
    It is against our Terms and Conditions to publish content that violates copyrights, privacy, or contract rights. We act immediately on takedown requests.
  </Card>

<Card title="Licensing information" href="/legal-and-security-info/licensing-info" icon="file" horizontal>
    Find details on how your Replit Apps are licensed here.
  </Card>

<Card title="Strike system FAQ" href="/legal-and-security-info/strike-system-faq" icon="triangle" horizontal>
    Learn about warnings, bans, and the site ban process at Replit.
  </Card>

<Card title="Account Inactivity" href="/legal-and-security-info/account-inactivity" icon="user" horizontal>
    Replit reserves the right to terminate inactive accounts after 6 months of no activity.
  </Card>

<Card title="Deleting your data" href="/legal-and-security-info/deleting-your-data" icon="trash" horizontal>
    Instructions for deleting your personal information from Replit.
  </Card>

<Card title="Security" href="/legal-and-security-info/security" icon="lock" horizontal>
    Information on how Replit secures your code, applications, and user data.
  </Card>

<Card title="Support Policy" href="/legal-and-security-info/support-policy" icon="headset" horizontal>
    Learn about the support options Replit offers for users, both free and members.
  </Card>

<Card title="Trust and Safety at Replit" href="/legal-and-security-info/trust-and-safety" icon="shield" horizontal>
    We strive to create a trusted and safe community. Here's how we do it.
  </Card>

<Card title="Usage Quota & Limits" href="/legal-and-security-info/usage" icon="gauge" horizontal>
    Learn about Replit's service limits, soft limits, and hard limits.
  </Card>

<Card title="Replit web accessibility statement" href="/legal-and-security-info/web-accessibility" icon="eye" horizontal>
    See Replit's accessibility features and commitment to web accessibility.
  </Card>
</CardGroup>

---

# Source: https://docs.replit.com/legal-and-security-info/licensing-info.md

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

# Licensing information

> Learn how public and private Replit Apps are licensed, including MIT license details and how to specify custom licenses for your projects.

Here, you will find information about how your Replit Apps are licensed.

## Public Replit Apps

Content you create in a public Replit App in a team or personal context is automatically subject to an MIT license. The full text of the MIT license reads as follows:

> Copyright

> Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

> The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

## Specific Replit App Licenses

<Note>
  Adding a license file to a public Replit App does not prevent the Replit App from being made available under the MIT license. To make a license file effective, the Replit Apps must be made private as described below.
</Note>

For specific Replit Apps, we may offer features to allow users to change the default license. For example, we might enable the ability to earn or to pay in Cycles for rights in a Replit Apps, or for access to specific features or digital items.

## Private Replit Apps

Content in a private Replit Apps in a Team or personal context is licensed to Replit on a platform basis under the [Terms of Service](https://replit.com/site/terms).

If you would like to attach your own license to the code, we recommend you include the license as a (code) comment or a readme.txt file, as part of the Replit Apps.

---

# Source: https://docs.replit.com/teams/identity-and-access-management/managing-members.md

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

# Managing Members

> You can manage members on your Replit team to control access, collaboration, and permissions across your organization's apps and projects.

Managing members is one of the most important functions of Replit Teams, allowing you to add collaborators to your organization and control who has access to your team's resources.

## Features

The **Members** tab displays a list of current organization members, showing their default group and recent activity. From this view, you can manage your team through several key capabilities:

* **Add Members**: Invite new collaborators to join your organization and assign them appropriate permissions
* **Remove Members**: Remove people from your organization when they no longer need access
* **Assign Roles**: Set member permissions with Admin, Member, Guest, or Viewer roles
* **Manage Invitations**: Send email invitations to non-Replit users and track invitation status
* **Seat Management**: Control billing capacity and monitor available seats

<CardGroup cols={2}>
  <Card title="Add Members" icon="person">
    Add team members so you can share apps and ideas.
  </Card>

<Card title="Remove Members" icon="trash">
    Remove members or change who's on your team.
  </Card>
</CardGroup>

## Usage

### Adding members

<Note>
  For automated user management and bulk operations, see [SCIM](/teams/identity-and-access-management/scim) instead.
  *Note: SCIM is available for enterprise customers only.*
</Note>

Selecting the **Add** button in the corner of the Members page opens a modal with a search input. The **Add** button may become disabled if there are not enough seats available or if you don't have permissions to add new organization members.

You can find existing Replit members via username or email, while you can add non-Replit members by email. After selecting someone or entering an email address, you can set the member's group with the following options:

* **Admin**: Admins have full administrative access to organization settings and all resources.
* **Member**: Members can see all other members, and can create Apps and Projects.
* **Guest**: Guests can only edit and access apps shared with them.
* **Viewer**: Viewers have read-only access to apps and deployments in your organization.

Existing members join immediately, and the seat becomes active immediately. Non-Replit members join the organization after creating an account. The seat won't become active until this happens. The invitation sent via email expires after seven days.

Additional documentation:

* [SCIM](/teams/identity-and-access-management/scim)
* [SAML](/teams/identity-and-access-management/saml)
* [Viewer Seats](/teams/identity-and-access-management/viewer-seats)

### Removing members

Eligible members can remove people from the organization using the trash can icon. You can also use the context menu opened from the triple dot to the right of each member row.

Removing someone from the organization requires a confirmation step. After you remove them, a seat becomes available immediately and you can use it to invite a new organization member.

### Managing seats

Managing seats is different from managing members. While member management involves adding or removing people from your team, seat management controls your billing capacity—how many seats you're paying for.

For detailed information on adding seats and removing seats, see [Managing Seats](/billing/teams-billing/managing-seats).

---

# Source: https://docs.replit.com/billing/teams-billing/managing-seats.md

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

# Managing Seats

> Learn how to add and remove seats in your organization, including prorated billing and scheduling changes for the next billing period.

<Warning>
  The Teams plan is being replaced by the new Pro plan. These changes will take effect on February 20th, 2026. You will no longer have to pay per seat on the Pro plan and it has a maximum of 15 seats. [Learn more about what's changing](https://blog.replit.com/pro-plan).
</Warning>

## Where to manage seats

Seats can be managed from the Organization's billing settings or the members page.

## Adding Seats

Adding a seat happens immediately and you will pay a prorated value for the seat for the remainder of your billing period and get a prorated Monthly Credit. For example, if you are half way through the billing period, the seat will cost 50% of the full cost, and the Monthly Credit for the seat will be 50%. At the next billing period cycle, the seat will cost full value and the Monthly Credit will be the full amount.

## Removing Seats

To remove a seat from your organization, that seat must be empty. Any seat that is associated with a user cannot be removed. Removing a seat does not immediately take effect - you will have access to this seat until the end of your current billing period. At the start of the next billing period, your organization will have the updated number of seats.

### Adding members to seats scheduled for removal

If you have a seat scheduled to be removed at the start of the next billing period, you still can add a member to consume that seat. Adding a member will stop that seat from being removed at the start of the next billing period.

---

# Source: https://docs.replit.com/billing/managing-spend.md

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

# Managing Your Spend

> Control AI costs and monitor spending with usage alerts, budgets, Plan Mode, and autonomy settings. Learn strategies to optimize your Replit usage and reduce unnecessary token consumption.

export const CreditPackTable = () => <table>
    <thead>
      <tr>
        <th>Credit Pack</th>
        <th style={{
  textAlign: 'right'
}}>Price</th>
        <th style={{
  textAlign: 'right'
}}>Discount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>$100 credits</td>
        <td style={{
  textAlign: 'right'
}}>$100</td>
        <td style={{
  textAlign: 'right'
}}>—</td>
      </tr>
      <tr>
        <td>$300 credits</td>
        <td style={{
  textAlign: 'right'
}}>$290</td>
        <td style={{
  textAlign: 'right'
}}>$10 off</td>
      </tr>
      <tr>
        <td>$500 credits</td>
        <td style={{
  textAlign: 'right'
}}>$480</td>
        <td style={{
  textAlign: 'right'
}}>$20 off</td>
      </tr>
      <tr>
        <td>$1,000 credits</td>
        <td style={{
  textAlign: 'right'
}}>$950</td>
        <td style={{
  textAlign: 'right'
}}>$50 off</td>
      </tr>
    </tbody>
  </table>;

export const OrganizationBudgetIncrement = '$500';

You can control your costs on Replit by using built-in budget controls, optimizing how you work with [AI Agent](/replitai/agent), purchasing credit packs, and monitoring your usage patterns. Learn more about [AI billing](/billing/ai-billing).

## Optimize AI costs

AI features like [Agent](/replitai/agent) are powerful tools, but strategic use can help you maximize value while controlling costs. Here are effective ways to reduce AI spending.

### Use Plan Mode for cost-effective collaboration

[Plan Mode](/replitai/plan-mode) is one of the most effective ways to save on AI costs. When you enable Plan Mode, Agent creates a detailed plan without making any code changes. This approach offers several cost benefits:

* **Chat before committing**: Discuss and refine the approach with Agent before any work begins
* **Lower token costs**: Planning conversations use fewer tokens than code generation and editing
* **Precision targeting**: Review and adjust the plan to ensure Agent only works on what matters
* **Iterative refinement**: Get the scope right before spending tokens on implementation

Use [Plan Mode](/replitai/plan-mode) when you're exploring solutions, refining requirements, or want to understand the approach before implementation.

### Control costs with autonomy settings

[Agent's autonomy modes](/replitai/autonomy-level) give you direct control over how much automatic work is performed, which directly impacts your token usage:

* **Lower autonomy modes**: Give you more control over each change, reducing unnecessary edits and token consumption
* **Review before execution**: Monitor what Agent plans to do before it makes changes
* **Selective approval**: Choose which changes to apply, avoiding work that doesn't align with your goals
* **Reduced iterations**: More oversight means fewer correction cycles and wasted tokens

Consider using [lower autonomy settings](/replitai/autonomy-level) when working on critical code, during budget-conscious periods, or when you want to learn from Agent's approach while maintaining tight cost control.

<Tip>
  Combine [Plan Mode](/replitai/plan-mode) with [lower autonomy settings](/replitai/autonomy-level) for maximum cost control. Plan first, then approve changes step by step.
</Tip>

## Purchase credit packs

If you're on a Core or Teams plan and need additional credits beyond your monthly subscription allowance, you can purchase credit packs directly from your billing page. Credit packs have discounts when you buy larger amounts, making them ideal for covering temporary usage spikes or preparing for larger projects.

### Available credit packs

Credit packs are available in four sizes, with increasing discounts on larger purchases:

### How credit packs work

* **Purchase location**: Available on your billing page for Core and Teams plan customers
* **Expiration**: Credit packs expire six months after the purchase date
* **No renewal**: Credit packs do not automatically renew
* **No rollover**: Unused credits from a pack do not roll over after expiration
* **Automatic usage**: Credits are automatically used from the credit pack that expires earliest first, helping you maximize the value of your purchases

<Note>
  Your usage alerts and budgets will apply to usage after you use any credit packs you may have. If you want to limit your usage to just credits you've purchased in your pack, set any alerts or limits to \$0.01.
</Note>

## Set up alerts and budgets

You can establish monthly usage alerts and budgets for all usage-based billing services to monitor and control your costs.

### Usage alerts

Usage alerts notify you when you reach a specific spending threshold beyond your monthly credits. You'll receive notifications on Replit and via email when you hit your set amount.

For Core accounts, visit your [account page](https://replit.com/account#billing) to set up a usage alert. For organizations, you can set your usage alert via the [usage page](https://replit.com/usage) by selecting **Manage** under **Usage total**.

### Service shutdown limit

When this limit is reached, services will be suspended until the budget is increased or the next billing cycle begins. This will help prevent extra charges.

For Core accounts, visit your [account page](https://replit.com/account#billing) to set up a service shutdown limit.

### Organization budgets

For organizations, you can set your usage budget from the [settings page](https://replit.com/t/replit/settings/billing). Budgets must be in increments of {OrganizationBudgetIncrement}.

<Note>You must have organization admin or owner permissions to enable a monthly usage limit. If you don't have access, contact your organization owner.</Note>

### Organization admin controls

Organization admins can manage AI model access and integrations from the [organization billing settings](https://replit.com/t/replit/settings/billing).

**Disable external AI model integrations**

Enable this setting to block all users in the organization from using external AI model integrations (such as OpenAI, Anthropic, xAI, and Perplexity through Replit's managed connectors).

Enable this setting to block all users in the organization from using Replit-managed AI integrations.

---

# Source: https://docs.replit.com/extensions/api/manifest.md

# Extension manifest reference

> Learn how to configure your Replit Extension with the extension.json manifest file. View required fields, optional properties, and supported types.

The `extension.json` file contains the manifest for an Extension and needs to be placed in a public directory such that it is served at the root (`/extension.json`). You are required to provide a manifest file to publish an Extension to the Extensions Store.

## Properties

| Property         | Type                                | Description                                                                                                                                      |
| ---------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| name             | `string`                            | Required. The Extension's name. Length can be 1-60 characters.                                                                                   |
| description      | `string`                            | Required. The Extension's description. Length can be 1-255 characters.                                                                           |
| longDescription? | `string`                            | Optional. The Extension's longer description. Markdown is supported and recommended.                                                             |
| icon?            | `string`                            | Optional. The Extension's icon. This is a reference to a file on the replit app. Any web based image format is accepted, but SVGs are preferred. |
| tags?            | `string[]`                          | Optional. A list of tags that describe the extension.                                                                                            |
| coverImages?     | [`CoverImage[]`](#coverimage)       | Optional. A Cover Image belonging to an Extension. Max 4 coverImages per extension.                                                              |
| website?         | `string`                            | Optional. The Extension's website                                                                                                                |
| authorEmail?     | `string`                            | Optional. The email address of the extension author. This is made public                                                                         |
| fileHandlers?    | [`FileHandler[]`](#filehandler)     | Optional. An array of [file handlers](/extensions#file-handler-file-editors-and-icons) registered by the extension.                              |
| tools?           | [`Tool[]`](#tool)                   | Optional. An array of [tools](/extensions#tool-extension-ui) registered by the extension.                                                        |
| scopes?          | [`Scope[]`](#scope)                 | Optional. An array of scopes required by the extension.                                                                                          |
| background?      | [`BackgroundPage`](#backgroundpage) | Optional. A path to a background script                                                                                                          |

## Types

### CoverImage

A Cover Image belonging to your extension. Currently, only the first image will be used in the extension store. The `path` should reference an image file on the Replit App's file system.

| Property | Type     | Description                                                           |
| -------- | -------- | --------------------------------------------------------------------- |
| path     | `string` | The path to the image. This is relative to the statically served root |
| label    | `string` | The label of the image. This is used as the alt text for the image    |

### FileHandler

A [file handler](/extensions#file-handler-file-editors-and-icons) is a custom user experience around a particular file in the Workspace, in the form of a Pane.

| Property | Type     | Description                                                                                             |
| -------- | -------- | ------------------------------------------------------------------------------------------------------- |
| glob     | `string` | A glob pattern that matches the files that this handler should be used for                              |
| handler  | `string` | The path to the handler. This is relative to the statically served root.                                |
| name?    | `string` | Optional. Required if more than one file handler is registered. Fallback value is the extension's name. |
| icon?    | `string` | Optional. Required if more than one file handler is registered. Fallback value is the extension's icon. |

### Tool

A [tool](/extensions/basics/key-concepts) is a custom user experience in the Workspace, in the form of a Pane.

| Property | Type     | Description                                                                                     |
| -------- | -------- | ----------------------------------------------------------------------------------------------- |
| handler  | `string` | The path to the handler. This is relative to the statically served root.                        |
| name?    | `string` | Optional. Required if more than one tool is registered. Fallback value is the extension's name. |
| icon?    | `string` | Optional. Required if more than one tool is registered. Fallback value is the extension's icon. |

### Scope

Scopes/Permissions required by the extension.

| Property | Type                      | Description                                   |
| -------- | ------------------------- | --------------------------------------------- |
| name     | [`ScopeType`](#scopetype) | The name of the scope                         |
| reason   | `string`                  | The reason why the extension needs this scope |

### ScopeType

* `read` - Read any file in a Replit App
* `write-exec` - Write to any file, and execute any code or shell command in a Replit App
* `repldb:read` - Read all data in the key-value [ReplDB](https:/.replit.com/cloud-services/storage-and-databases/replit-database) in a Replit App
* `repldb:write` - Write or delete any key in the key-value [ReplDB](https:/.replit.com/cloud-services/storage-and-databases/replit-database) in a Replit App
* `experimental-api` - Use experimental APIs that may be unstable, may change in behavior or be removed entirely

```ts  theme={null}
"read" | "write-exec" | "repldb:read" | "repldb:write" | "experimental-api"
```

### BackgroundPage

The path to a specified route that will run a background script.

```javascript  theme={null}
{
  page: string;
}
```

---

# Source: https://docs.replit.com/tutorials/mcp-in-3.md

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

# Learn about MCP in 3 minutes

> Learn how to use Model Context Protocol (MCP) to give AI models access to tools, data sources, and real-world capabilities in just 3 minutes.

## Why AI models need MCP to connect with the real world

AI models like Claude and GPT are powerful but limited to what they were trained on. Without access to external tools and data sources, they can't:

* Access up-to-date information
* Interact with external systems
* Perform actions in the real world
* Work with your private data

## What MCP does: The universal connector for AI apps

Model Context Protocol (MCP) solves this by creating a universal way for AI to connect to tools and data sources - similar to how USB-C standardized device connections.

MCP is a standardized protocol that allows AI models to:

* Access specialized tools and APIs
* Work with private data sources
* Perform actions in the real world
* Connect to other systems seamlessly

## How MCP works: Understanding the key components

The MCP architecture has three main components:

1. **The Client Side**: AI models like Claude or applications that need to access external tools
2. **The Communication Layer**: The protocol itself that standardizes how requests and responses are formatted
3. **The Server Side**: Programs that provide access to tools, data sources, and specialized capabilities

<AccordionGroup>
  <Accordion title="What's an MCP client?">
    An MCP client is something like Claude or a command-line interface that connects to a large language model (LLM). It's the device that needs to plug into external tools or data sources.

Examples of MCP clients:

* Claude in the browser
    * Command-line interfaces for AI
    * Custom applications built with AI SDKs
  </Accordion>

<Accordion title="What's an MCP server?">
    An MCP server provides tools and capabilities to AI models. Think of it like giving AI a set of specialized tools to solve problems.

Examples of what MCP servers enable:

* Accessing specific data sources to answer questions
    * Connecting AI to APIs so it can go online
    * Enabling video summarization or transcript fetching
    * Writing files to your computer
    * Making calculations or running code
  </Accordion>
</AccordionGroup>

## MCP capabilities that extend AI functionality

MCP provides several key features that make it powerful for AI applications:

* **Resources**: Share data and content with AI models
* **Tools**: Let AI models perform actions through your services
* **Prompts**: Create reusable templates for consistent AI interactions
* **Sampling**: Allow your services to request information from AI models
* **Transports**: Connect clients and servers efficiently

## Try MCP yourself: Build an AI tool in minutes

<Steps>
  <Step title="Set up an MCP environment">
    Replit provides Templates that let you experiment with MCP without installing anything. These Templates include all the necessary components to connect AI models to useful tools.

To get started quickly:

1. Remix this template: [Learn about MCP](https://replit.com/@matt/Learn-about-MCP?v=1\&utm_source=matt\&utm_medium=blog\&utm_campaign=mcp-in-3)
    2. Wait for the environment to load completely
    3. You'll have a ready-to-use MCP setup with no configuration needed
  </Step>

<Step title="Run a practical example">
    A simple demonstration shows how MCP enables AI to:

1. Fetch a YouTube video using just a URL
    2. Get the content or transcript of that video
    3. Write a summary to a file on your system

Try this command in our MCP Template:

```bash  theme={null}
    llm "Summarize this video https://youtu.be/1qxOcsj1TAg and write the summary to summary.txt"
    ```

This demonstrates how MCP gives AI models abilities they wouldn't normally have.
  </Step>

<Step title="Customize for your needs">
    Once you understand the basics, you can connect MCP servers to your own data sources or create custom tools that your AI can use to solve specific problems.
  </Step>
</Steps>

## Real-world applications you can build with MCP

MCP enables a wide range of powerful AI applications:

* **Customer service systems** that can access company databases to answer specific questions
* **Research assistants** that can search and summarize content from multiple sources
* **Productivity tools** that can interact with your files and applications
* **Content creation tools** that can access media libraries and publishing platforms

## Benefits of using MCP for your AI projects

MCP offers three key benefits:

* Ready-to-use integrations your AI can connect to immediately
* The ability to switch between different AI providers without rewriting your connections
* Security features that keep your sensitive data protected

This is transformative for developers building AI applications and for users who want AI that can do more than just generate text.

<Note>
  MCP is an emerging standard with growing support across the AI ecosystem. More tools and integrations are being added regularly.
</Note>

## Next steps: Go further with MCP development

<AccordionGroup>
  <Accordion title="Explore more MCP examples">
    * Check out Templates on Replit to experiment without installing anything
    * Look through the MCP protocol documentation to understand how it works
    * Join the MCP community to see what others are building
  </Accordion>

<Accordion title="Build your own MCP server">
    * Create custom tools that connect to your data sources
    * Develop specialized capabilities for your AI applications
    * Share your MCP servers with the community
  </Accordion>

<Accordion title="Resources">
    * [MCP Protocol Documentation](https://modelcontextprotocol.io)
    * [Anthropic MCP Starter](https://github.com/anthropics/mcp-starter)
    * [Everything you need to know about MCP](https://blog.replit.com/everything-you-need-to-know-about-mcp)
  </Accordion>
</AccordionGroup>

MCP might sound technical, but the concept is simple—it's about giving AI models access to tools and data through a standardized connection. This expands what AI can accomplish and makes building powerful AI applications more accessible to everyone.

---

# Source: https://docs.replit.com/extensions/api/me.md

# me API

> Access information about the current extension context, including file paths for file handlers and extension-specific data.

The `me` api module exposes information specific to the current extension.

## Usage

```ts  theme={null}
import { me } from '@replit/extensions';
```

## Methods

### `me.filePath`

Returns the path to the current file the extension is opened with, if it is a [File Handler](/extensions#file-handler-file-editors-and-icons).

```ts  theme={null}
filePath(): Promise<string>
```

---

# Source: https://docs.replit.com/replitai/message-queue.md

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

# Message Queue

> Schedule follow-up tasks for Replit Agent while it's working. Queue messages to be executed in order after each Agent work loop completion.

The Message Queue is a new way of interacting with Replit Agent while it's working.
Instead of interrupting ongoing work, you can schedule follow-up tasks that will be executed in
order after every completion of an Agent work loop.

## How it works

When the Agent is actively handling a request, you can schedule a follow-up task by adding
messages to the Queue. These tasks or requests will be processed in order after every completion of
an Agent work loop. The queue is automatically cleared when Agent finishes all tasks.

All message options are available with the Queue, such as [Visual Editor](/replitai/visual-editor)
and file attachments.

<Info>
  Queued messages will only be processed automatically while you have an active
  workspace connected to the Agent (either on desktop or mobile).
</Info>

## Using the Message Queue

### When the Queue appears

The Message Queue appears automatically as a drawer above the chat input when you submit a message
while Agent is working. It closes once all queued messages are processed.

### Managing queued messages

When the queue drawer is open, you can:

* **Edit messages**: Click the edit icon to modify a queued message before it's processed
* **Delete messages**: Remove unwanted tasks from the queue
* **Reorder items**: Drag and drop to change the execution order of queued messages
* **Add more messages**: Continue adding new tasks to the queue via the chat input

### Immediate interruption

If you need to interrupt Agent and send a message immediately, you can use the **Pause** button
in the status bar. This will stop the current Agent work loop and allow you to send an immediate
message, bypassing any queued messages (if any exist).

## Best practices

### When to use the Message Queue

* **Multi-step workflows**: Queue a series of related tasks that build upon each other
* **Batch operations**: Group similar requests together for efficient processing
* **Follow-up requests**: Add clarifications or additional requirements after the initial task
* **Non-urgent tasks**: Queue lower-priority requests while Agent works on critical tasks

### When to use immediate interruption

* **Urgent changes**: When you need to stop current work immediately
* **Critical errors**: If you notice an issue that needs immediate attention
* **Change of direction**: When you want to completely change what Agent is working on

## Queue behavior

* **Ordered execution**: Messages are processed in the order they were added to the queue
* **Work loop completion**: Each queued message is processed after Agent completes its current work loop
* **Context preservation**: Agent maintains context between queued messages in the same conversation

---

# Source: https://docs.replit.com/extensions/api/messages.md

# messages API

> Display custom toast notifications in the Replit workspace using the messages API to show confirmations, errors, warnings, and notices.

The messages API allows you to send custom notices in the Replit workspace.

## Usage

```ts  theme={null}
import { messages } from '@replit/extensions';
```

## Methods

### `messages.showConfirm`

Shows a confirmation toast message within the Replit workspace for `length` milliseconds. Returns the ID of the message as a UUID

```ts  theme={null}
showConfirm(str: string, length: number): Promise<string>
```

### `messages.showError`

Shows an error toast message within the Replit workspace for `length` milliseconds. Returns the ID of the message as a UUID

```ts  theme={null}
showError(str: string, length: number): Promise<string>
```

### `messages.showNotice`

Shows a notice toast message within the Replit workspace for `length` milliseconds. Returns the ID of the message as a UUID

```ts  theme={null}
showNotice(str: string, length: number): Promise<string>
```

### `messages.showWarning`

Shows a warning toast message within the Replit workspace for `length` milliseconds. Returns the ID of the message as a UUID

```ts  theme={null}
showWarning(str: string, length: number): Promise<string>
```

### `messages.hideMessage`

Hides a message by its IDs

```ts  theme={null}
hideMessage(id: string): Promise<void>
```

### `messages.hideAllMessages`

Hides all toast messages visible on the screens

```ts  theme={null}
hideAllMessages(): Promise<void>
```

---

# Source: https://docs.replit.com/tutorials/mobile-app-troubleshooting.md

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

# Mobile app troubleshooting

> Fix common issues when building mobile apps with Expo and React Native on Replit.

When building mobile apps on Replit, you may encounter issues with previews, bundling, or package dependencies. This guide helps you resolve common problems, starting with quick fixes and progressing to deeper debugging steps.

## Quick fixes

Try these first—they resolve most issues:

| Problem                           | What to try                                                 |
| --------------------------------- | ----------------------------------------------------------- |
| Changes not showing on your phone | Shake your phone to open the Expo menu, then tap **Reload** |
| Changes not showing in preview    | Press **R** in the console to rebundle                      |
| App stuck or unresponsive         | Stop and restart the app from the console                   |

## Common issues

<AccordionGroup>
  <Accordion title="Changes aren't appearing on my device">
    When you make changes but don't see them on your phone:

1. **Shake your phone** to open the Expo developer menu
    2. Tap **Reload** to redownload the bundle

On the web preview, press **R** in the console to trigger a rebundle.

If changes still don't appear, try clearing the cache (see [Clear the Metro cache](#clear-the-metro-cache) below).
  </Accordion>

<Accordion title="Red error screen in Expo Go">
    A red error screen usually indicates a JavaScript error or missing module. Read the error message—it often points to the specific file and line.

**Common causes:**

* A package isn't installed or is the wrong version
    * A module works on web but not on native (or vice versa)
    * Syntax error in your code

**What to try:**

1. Read the error message carefully—it often tells you exactly what's wrong
    2. Ask Agent to help fix the error by sharing the message
    3. If the error mentions a specific package, try reinstalling dependencies (see [Reinstall packages](#reinstall-packages))
  </Accordion>

<Accordion title="App works on web but crashes on phone (or vice versa)">
    Some packages or features work differently across platforms. React Native compiles to three targets: iOS, Android, and web. A library that works on web might not support native, or might need different configuration.

**What to try:**

1. Check if the package supports your platform in its documentation
    2. Ask Agent: "Is this package compatible with Expo Go?"
    3. Consider moving the functionality to your server if it's not supported on mobile

<Tip>
      When researching packages, look for "Expo compatible" or check the [Expo SDK documentation](https://docs.expo.dev/versions/latest/) for supported modules.
    </Tip>
  </Accordion>

<Accordion title="QR code won't scan or app won't connect">
    **Check your network:**

* Your phone and computer must be on the same WiFi network
    * Some corporate or public networks block the connection

**Try tunnel mode:**
    If you're on a restricted network, tunnel mode routes traffic through Expo's servers. Ask Agent to start the app with tunnel mode, or run `npx expo start --tunnel` in the shell.

**Restart Expo Go:**
    Close Expo Go completely and reopen it before scanning.
  </Accordion>

<Accordion title="Build takes a long time">
    The first build is always slower because there's no cache. Subsequent builds should be faster.

**What affects build time:**

* Number of packages in your project
    * First run after clearing the cache
    * Network speed when downloading packages

If builds are consistently slow, check if you have unnecessary packages installed.
  </Accordion>

<Accordion title="Module not found errors">
    When you see "Unable to resolve module" or "Module not found":

1. The package might not be installed—ask Agent to install it
    2. The package might be installed but the cache is stale—clear the cache
    3. The package might not exist or be misspelled—check the package name

Try [reinstalling packages](#reinstall-packages) if the module should exist.
  </Accordion>
</AccordionGroup>

## Debugging commands

When quick fixes don't work, these commands help reset various caches and states. Run them in the Shell.

### Clear the Metro cache

Metro is the bundler that compiles your React Native code. Clearing its cache forces a fresh build.

In the shell, run:

```bash  theme={null}
npx expo start --clear
```

This clears the bundler cache and restarts the development server. You'll see "Bundler cache is empty. Rebuilding." in the output.

<Tip>
  If you're frequently hitting cache issues, you can add `-c` to your start command. Ask Agent to update the dev command to include the clear flag.
</Tip>

### Reinstall packages

If you're seeing module errors or version mismatches, reinstalling packages often helps.

In the shell, run:

```bash  theme={null}
rm -rf node_modules && npm install
```

This deletes all installed packages and reinstalls them from scratch based on your `package.json`.

<Note>
  If your project uses a different package manager (like `bun` or `pnpm`), use the appropriate install command: `bun install` or `pnpm install`.
</Note>

### Check for version mismatches

Expo Doctor scans your project for common issues like version mismatches between packages.

In the shell, run:

```bash  theme={null}
npx expo-doctor
```

Review the output for warnings. If it suggests fixes, evaluate them carefully—don't blindly upgrade packages, as this can introduce new issues.

<Warning>
  Only update packages when there's a specific reason to do so. Upgrading "just because" can break your app if the new version has incompatible changes.
</Warning>

## Full reset

When nothing else works, a full reset clears all caches and reinstalls everything.

<Accordion title="Nuclear option: Full reset command">
  This command removes all caches and reinstalls packages from scratch. Use it as a last resort.

```bash  theme={null}
  rm -rf node_modules .expo && npm cache clean --force && npm install && npx expo start --clear
  ```

**What this does:**

1. `rm -rf node_modules` — Deletes installed packages
  2. `rm -rf .expo` — Deletes Expo's local cache
  3. `npm cache clean --force` — Clears npm's global cache
  4. `npm install` — Reinstalls all packages
  5. `npx expo start --clear` — Starts with a fresh Metro cache

After running this, your next build will take longer as everything rebuilds from scratch.
</Accordion>

### Clear cache on your device

If the app on your phone seems stuck with old code even after reloading:

* **iOS**: In Expo Go, go to **Settings** and tap **Clear Cache**
* **Android**: Go to **Settings > Apps > Expo Go > Storage > Clear Cache**

## Quick reference

| Problem                   | Try first                | Then try                 |
| ------------------------- | ------------------------ | ------------------------ |
| Changes not showing       | Shake phone → Reload     | Clear Metro cache        |
| Bundler errors            | `npx expo start --clear` | Delete node\_modules     |
| Module not found          | Reinstall dependencies   | Full reset               |
| Version mismatch warnings | Run `npx expo-doctor`    | Evaluate suggested fixes |
| New package not working   | Restart the server       | Clear Metro cache        |
| Changed app.json          | Restart the server       | —                        |

## Getting more help

If you're still stuck:

* **Ask Agent**: Describe the error and what you've tried. Agent can often diagnose and fix issues.
* **Check Expo docs**: The [Expo troubleshooting guide](https://docs.expo.dev/troubleshooting/overview/) covers additional scenarios.
* **Search the error**: Copy the exact error message and search—someone has likely encountered it before.

## Next steps

* Return to [Native Mobile Apps](/replitai/building-mobile-apps)
* Learn the full publishing flow: [Build and launch a mobile app](/tutorials/build-and-launch-a-mobile-app)

---

# Source: https://docs.replit.com/platforms/mobile-app.md

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

# Replit Mobile App

> The Replit Mobile App for iOS and Android lets you create apps using all of Replit's tools on the go.

The <a href="https://replit.com/mobile" target="_blank">Replit mobile app</a> is a full-featured development environment optimized for phone and tablet. Build and publish apps wherever you are using all of Replit's powerful tools, including Agent.

## What is the Replit Mobile App

The Replit Mobile App brings the complete Replit experience to your iOS or Android device. You can create apps with Agent, access your workspace, and publish your projects—all from your mobile device. The app is designed for on-the-go development with an interface optimized for touch and mobile screens.

## Getting started

Follow these steps to learn to install the app and create a Replit App.

### Install the app

To install the app on your compatible mobile device, follow these steps:

1. Navigate to the <a href="https://replit.com/mobile" target="_blank">mobile app download page</a> and install the app for your mobile device OS.
2. Open the app and sign up for a new account or log in with an existing one.
   If you register for a new account, you must verify your email address to complete the process.
3. Create a Replit App from the home screen.

### Create your first app

Start building from the Create tab—it's the first thing you'll see when you open the app. Every app you create includes Agent.

<Accordion title="Build with Agent">
  1. Open the **Create** tab
  2. Describe what you want to build
  3. Tap **Start chat**

Agent starts building your app right away.
</Accordion>

<Accordion title="Start from a template or GitHub">
  1. Open the **Create** tab
  2. Tap ⋮ in the top right
  3. Choose **Remix a Template** or **Import from GitHub**
  4. Pick what you need
</Accordion>

## Features

* **[Replit AI](/category/replit-ai)**: Agent and AI-powered tools for building apps
* **[Replit Workspace](/category/replit-workspace)**: Full-featured development environment
* **[Publishing](/replit-app/visibility)**: Share Replit Apps with zero setup

<Accordion title="Live Activities">
  Follow along with Agent's progress on the go.

**Enable Live Activities:**
  When Agent starts, you'll see a notification. Tap **Allow** on your lock screen. Now you can check progress without opening Replit.

**Supported Devices:**

* iPhone running iOS 18 or later
  * iPad running iOS 18 or later
  * Mac running macOS Tahoe or later
  * Paired Apple Watch
</Accordion>

<Accordion title="Notifications">
  Get updates that matter, wherever you are.

**Enable Notifications:**
  Go to Account > Notifications and ensure Notifications is toggled on. Tap allow if prompted.

**When we'll notify:**

* Agent needs your help
  * Agent is done working
  * Important billing updates
</Accordion>

<Accordion title="Tablet Keyboard Mode">
  Create on your tablet with a keyboard.

**How it works:**
  Connect a keyboard to your tablet for a creation experience optimized for larger screens. When you first open the workspace with a keyboard connected, we'll ask if you want to enable it.

**Turn it on or off:**
  Go to Account > Keyboard Settings anytime to toggle.

**What you'll see:**
  A workspace layout designed for keyboard and larger screens.
</Accordion>

## Upgrade and billing

<Accordion title="Get Core or Teams">
  **Core:**

1. Go to **Account**
  2. Tap **Upgrade**
  3. Choose your plan
  4. Tap **Continue with Core**

**Teams:** Teams isn't available for purchase in the mobile app. It must be purchased on Replit.com.
</Accordion>

<Accordion title="Add more Agent usage">
  Core subscriptions purchased from Apple and Google include \$25 in credits refreshed every month.

Add a payment method for [usage-based billing](/billing/about-usage-based-billing) to use Agent beyond this limit.

**On the web:**

1. Go to replit.com
  2. Open Account → Billing
  3. Add your payment info

**In the app (iOS in US only):**

1. Open Account > Billing
  2. Add payment method
</Accordion>

## Next steps

* **[Replit AI](/category/replit-ai)**: Learn more about Agent and AI-powered tools
* **[Replit Workspace](/category/replit-workspace)**: Explore the full development environment
* **[Publishing](/replit-app/visibility)**: Share Replit Apps with zero setup

---

# Source: https://docs.replit.com/cloud-services/deployments/monitoring-a-deployment.md

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

# Published App Monitoring

> The Publishing tool provides real-time insights for your published Replit Apps.

Published app monitoring lets you track performance metrics, modify settings, and ensure your published apps run optimally.

## Features

* **Real-time tracking**: View published app status, analytics, and configuration details
* **Performance analytics**: Monitor page views, response times, and user engagement metrics
* **Configuration management**: Update commands, secrets, and published app options with just a few clicks

## Usage

You can access monitoring tools in the Publishing tab.

<Accordion title="How to access Publishing">
  From the left **Tool dock**:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select Publishing <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=df3fa2573b451c54591523c9d9111db1" alt="Publishing icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/deploy-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=115e9383e0350a6ef201a41f78f8a19a 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=667b93ae66d0b69569409fb90d9fc280 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ae927e5aadcb7a470ad726f0acb0f782 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=16ee8f7b3d9db6b4f74ea8c2ebb6730f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ad04a5984543c13895fd30182294ec0a 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=2449268bce371256727b17027eb180f3 2500w" /> **Publishing**.
  3. Select **Overview** at the top.

From the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool
  2. Type "Publishing" to locate the tool and select it from the results.
  3. Select **Overview** at the top.
</Accordion>

### Overview tab

The **Overview** tab lets you keep track of your published app's status and configuration. It provides the following details:

* **Status**: Status of the Replit published app, providing insights into the various stages of the process.
* **Domain**: URL where you can access your Replit App
* **Deployment Type**: Autoscale, Reserved VM, Static, or Scheduled

You can perform the following actions from the **Overview** tab:

* **Republish**: Overwrite your current published app with a new snapshot and published app options. You can monitor the status of this published app in this tab.
* **Edit Commands and Secrets**: Modify the public directory, build command, and published app secrets.
* **View publish logs**: Access the logs for your published app.
* **View published app**: Open your published app in a new browser tab.
* **QR code**: Generate a QR code that you can scan with your mobile device to access the published app.
* **Manage**: View or update the published app's settings.
* **See all usage**: View the Usage billing page.

### Logs tab

The **Logs** tab provides real-time logs for your published app. You can filter logs by the following categories:

* **Errors only**: View only error logs
* **Search**: Enter a phrase to search for in the logs
* **Date**: Select a date range

### Resources tab

The **Resources** tab provides a detailed view of your published app's resource usage. It includes the following information:

* **CPU Utilization**: Percentage of CPU usage over time
* **Memory Utilization**: Percentage of memory usage over time

### Analytics tab

<Note>
  Analytics are available for Autoscale, Static, and Reserved VM Deployments.
</Note>

The **Analytics** tab shows statistics regarding visits to web pages in your published app.
You can customize the time period using the date selector at the top.
The analytics metrics include the following:

* **Page Views**: Number of HTTP requests your Replit App receives per hour
* **Top URLs**: Most frequently visited URL paths
* **Top Referrers**: Traffic sources directing users to your website
* **HTTP Statuses**: HTTP response codes served by your Replit App
* **Request Durations**: Server-side load times
* **Top Browsers**: Browser usage among your users
* **Top Devices**: Operating systems and devices used to access your Replit App
* **Top Countries**: Geographic distribution of your users

### Schedule tab

<Note>Schedules are available only for Scheduled Deployments.</Note>

The **Schedule** tab lets you view the published app's run history, and includes the following information:

* Time since the last run
* Date and time the run started
* Amount of time the run took
* Run status

You can perform the following actions in the **Schedule** tab:

* **View logs**: Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/menu.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e1d03f749baf33da89695ccb2b555a98" alt="menu icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/menu.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/menu.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b414c3020519383cab31a8b60075aa9e 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/menu.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=34696c6bff46032a320476f342d3d49f 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/menu.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e399c46e85192d8130ca11eaddbd8b0d 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/menu.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7f210d0f5fddf78977dfa7198ea8f84b 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/menu.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b2563eda6b8f62b6db61124fe643e127 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/menu.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=57ea478a55e471dbacce0798d83ed30b 2500w" /> view logs icon next to the entry to view log messages.
* **Cancel run**: Select the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/cancel.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=5411b564040a2c137b559a01e9a76363" alt="cancel icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/cancel.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/cancel.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ac0adc8f168fa2d3d66bcf9399222717 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/cancel.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0a379342424f9dc1f31cf925ba10994e 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/cancel.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=8472f51f1e463899cfdd5a220260f7c2 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/cancel.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ced856ad68839b178a1b823f705ca295 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/cancel.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=d02b2bc425b70f8d773971580f85c37c 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/cancel.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=920c63877db10dd11f11a2bb716c0857 2500w" /> cancel icon next to the entry to stop a run in progress.
* **Start a run**: Select **Run Now** to manually start a run without altering the schedule.
* **Refresh**: Use the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/refresh.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7a81c480595407d96ed1e81afca3a9bf" alt="refresh icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/refresh.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/refresh.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=85c0275fed1bbb0cbf08f2ec6e400a14 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/refresh.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ec4d0062224222984d4879ada30290fd 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/refresh.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3db1fbe01add6a51ff377392075c1fa 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/refresh.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=de8fa93d642edf27d63bd3a96d3acfb9 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/refresh.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ce8555ecf2ed7198b8151e62811d9372 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/refresh.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=1293df3a11d909e4b7d41b1dafce23e1 2500w" /> refresh icon to update the run history.

### Manage tab

The **Manage** tab includes the following published app configuration settings:

* **Resource usage**: View the machine's CPU, RAM, and usage cost for your published app.
* **Domains**: Link a custom domain using the **Link a domain** button.
* **Pause**: Temporarily stop your published app. This action makes your published app inaccessible, but billing continues.
* **Change deployment type**: Switch between different Deployment types. For example, if you initially chose Static Deployment, you can change it to reserved VM Deployments.
* **Shut Down**: Delete your published app and stop its billing cycle. Select **Shut down** to permanently stop your current published app.

## Next steps

* [Mobile app](https://replit.com/mobile/): Publish Replit Apps from your mobile device
* [Publishing](/category/replit-deployments/): Learn more about Replit Deployment types
* [Publishing costs](/billing/deployment-pricing): View the costs for all Deployment types

---

# Source: https://docs.replit.com/replit-workspace/workspace-features/multiplayer.md

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

# Multiplayer

> Multiplayer lets you collaborate in real time with other users on your Replit App.

Multiplayer transforms your Replit workspace into a collaborative environment where up to
four users can create and update apps together in real time.

This shared experience provides collaborators the same workspace tools and environment to
create a seamless team development experience.

## Features

Multiplayer includes the following features:

* **Real-time collaboration**: Work on the same Replit App and instantly view changes and workspace runs

* **Shared workspace**: Experience full workspace sharing including Shell and Console output in real time

* **Observation mode**: See collaborators' code changes and file navigation as they happen

## Usage

To start collaborating, open your Replit App and invite collaborators.
The following sections show how to access and use the Multiplayer tool's features.

### Invite collaborators

<Accordion title="How to invite collaborators">
  To invite users by email address or Replit username:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3a9db036d95b87cb9e619557836fd747" alt="person with plus icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/invite.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=973419e34173934f3e2e104ff2f08f3f 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=21310a49b258e4973bed1c9f6122db93 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c9cb70801069a1f507970dbf5961bd45 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d75afc761db4b4ec3e79b4a3ad011241 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5ce12b641fd5fa9c25fc898baef00f6f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5441aecc7fb0ac0b4eed7a78862f7cd3 2500w" /> **Invite**
     to open the Multiplayers popup dialog
  2. Enter a username or email in the text field and select **Invite** to send an email invitation

To invite users using the private link:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3a9db036d95b87cb9e619557836fd747" alt="person with plus icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/invite.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=973419e34173934f3e2e104ff2f08f3f 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=21310a49b258e4973bed1c9f6122db93 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c9cb70801069a1f507970dbf5961bd45 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d75afc761db4b4ec3e79b4a3ad011241 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5ce12b641fd5fa9c25fc898baef00f6f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5441aecc7fb0ac0b4eed7a78862f7cd3 2500w" /> **Invite**
     to open the Multiplayers popup dialog
  2. Toggle the Private join link option to the **on** position
  3. Select **Copy join link** to copy the URL to your clipboard
  4. Send the link to your collaborators

When you invite collaborators:

* Replit sends a notification email with a join link when you invite someone by their email address or username
* Collaborators can follow the link to open the Replit App in the shared workspace
* You see a list of collaborators in the Multiplayers popup menu
* The workspace displays online collaborators as icons to the left of the **Invite** button

### Remove collaborators

<Accordion title="How to remove collaborators">
  1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3a9db036d95b87cb9e619557836fd747" alt="person with plus icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/invite.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=973419e34173934f3e2e104ff2f08f3f 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=21310a49b258e4973bed1c9f6122db93 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c9cb70801069a1f507970dbf5961bd45 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d75afc761db4b4ec3e79b4a3ad011241 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5ce12b641fd5fa9c25fc898baef00f6f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5441aecc7fb0ac0b4eed7a78862f7cd3 2500w" /> **Invite**
     to open the Multiplayers popup dialog
  2. Select the **X** next to the collaborator's username
</Accordion>

When you remove a collaborator, they instantly lose access to the Replit App workspace.

<Warning>
  When you enable **Private join link**, removing collaborators does not prevent them from rejoining
  using the private join link. To prevent collaborators from joining using this link, change it by selecting
  **Generate a new link**.
</Warning>

### Toggle observation mode

<Accordion title="How to toggle observation mode">
  To **turn on** observation mode, select the collaborator's profile icon.

To **exit** observation mode, select any area in the workspace.
</Accordion>

As a collaborator, you can view the following without enabling observation mode:

* Text input location and real-time edits in the file editor
* Shell input and output when viewing the same shell instance
* Console output
* Whether the workflow is running or stopped
* Any online collaborators, indicated by a profile icon next to the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3a9db036d95b87cb9e619557836fd747" alt="person with plus icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/invite.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=973419e34173934f3e2e104ff2f08f3f 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=21310a49b258e4973bed1c9f6122db93 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c9cb70801069a1f507970dbf5961bd45 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d75afc761db4b4ec3e79b4a3ad011241 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5ce12b641fd5fa9c25fc898baef00f6f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/invite.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5441aecc7fb0ac0b4eed7a78862f7cd3 2500w" /> **Invite** button.

When you enter observation mode:

* File editor automatically switches to the file that contains the active user cursor
* View which collaborators are observing you in the status bar

## Next steps

To learn more about collaboration, see the following resources:

* [Teams](/category/teams): Learn about the enterprise solution for creating and publishing apps with your organization
* [Secrets](/replit-workspace/workspace-features/secrets): Understand the visibility of your sensitive data in shared apps

---

# Source: https://docs.replit.com/getting-started/quickstarts/next-js-app.md

# Create a Next.js app

> Build and publish a modern React application using Next.js on Replit. Learn how to use server-side rendering and static generation.

Learn how to create a Next.js application with server-side rendering capabilities. This guide shows you how to publish a React app using Replit's autoscaling published apps.

## What you'll learn

<CardGroup cols={2}>
  <Card title="Next.js" icon="react">
    Build modern React applications
  </Card>

<Card title="Server-Side Rendering" icon="server">
    Enable SSR for better performance
  </Card>

<Card title="Autoscaling" icon="arrows-up-down">
    Publish with automatic scaling
  </Card>

<Card title="Performance" icon="gauge-high">
    Optimize for production
  </Card>
</CardGroup>

## Create your app

<Steps>
  <Step title="Fork the template">
    Sign in to Replit and fork the [Next.js template](https://replit.com/@replit/Nextjs?v=1#README). Select **+ Use Template** and follow the prompts to create your Replit App.
  </Step>

<Step title="Set up publishing">
    1. Select **Publish** in the workspace header
    2. Choose **Autoscale** deployment
    3. Configure your app:
       * Machine: 1vCPU, 2 GiB RAM (default)
       * Max machines: 3 (default)
       * Build command: `npm run build`
       * Run command: `npm run start`

<Note>
      Autoscale deployments automatically adjust resources based on traffic.
    </Note>
  </Step>

<Step title="Launch">
    Select **Publish** to launch your app. It will be live in a few minutes!
  </Step>
</Steps>

## Next steps

<CardGroup cols={3}>
  <Card title="Custom Domain" icon="globe" href="/cloud-services/deployments/custom-domains">
    Add your own domain
  </Card>

<Card title="Autoscaling" icon="server" href="/cloud-services/deployments/autoscale-deployments">
    Learn about scaling
  </Card>

<Card title="Performance" icon="gauge-high" href="/category/replit-deployments">
    Optimize your app
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Create a static blog" icon="newspaper" href="/getting-started/quickstarts/static-blog-astro">
    Build a blog with Astro
  </Card>

<Card title="Build with AI" icon="wand-magic-sparkles" href="/getting-started/quickstarts/build-with-ai">
    Create apps using Agent
  </Card>
</CardGroup>

<Note>
  Want to learn more about web development? Check out our [publishing documentation](/category/replit-deployments).
</Note>

---

# Source: https://docs.replit.com/getting-started/quickstarts/no-code-cat-image-generator.md

# Create a cat image generator

> Build a fun image generator in 5 minutes using Replit's AI tools. Perfect for beginners exploring no-code development.

Learn how to create apps without writing code. This guide shows you how to build a playful cat image generator using Replit's AI tools.

## What you'll learn

<CardGroup cols={2}>
  <Card title="AI Development" icon="wand-magic-sparkles">
    Create apps through natural language conversations
  </Card>

<Card title="No-Code Building" icon="code">
    Build without writing code
  </Card>

<Card title="Tool Selection" icon="screwdriver-wrench">
    Choose the right AI tool for each task
  </Card>

<Card title="Deployment" icon="rocket">
    Take your app live in minutes
  </Card>
</CardGroup>

<Note>
  You'll need a Replit account and Core subscription to access Agent.
</Note>

## Start with Agent

<Steps>
  <Step title="Open Replit">
    Head to [Replit](https://replit.com) and sign in. You'll see the prompt editor where you can instruct Agent.

<Step title="Create your prompt">
    Start with a simple request:

```text  theme={null}
    Let's build a cat generator that displays a random image of a cat from the internet 
    every time I press a button.
    ```

<Tip>
      Use the "Improve Prompt" button to add more details to your request.
    </Tip>
  </Step>

<Step title="Review the plan">
    Agent will outline a development plan using Flask and JavaScript. Don't worry about the technical terms—Agent handles the complexity for you.

## Develop iteratively

### Using Agent for major changes

Agent excels at structural changes and core functionality. Try improving the UI:

```text  theme={null}
Can you change the UI to be more beautiful and playful? Use cat emojis to improve 
the appearance of the app.
```

### Refining with Assistant

Switch to Assistant for targeted improvements. For example, add dark mode:

```text  theme={null}
Can we add a dark mode to the app with a toggle button to switch between dark 
and light mode?
```

<Tip>
  Ask Assistant to explain how your app works:

```text  theme={null}
  Help me understand the framework this app is built on.
  ```
</Tip>

## Publish your app

<Steps>
  <Step title="Start publishing">
    Select **Publish** in the top navigation.
  </Step>

<Step title="Configure">
    1. Choose the recommended publishing option
    2. Name your app (e.g., "whisker-wonder")
    3. Select **Publish**
  </Step>

<Step title="Go live">
    Wait 2-3 minutes for publishing. Your app will be available at `your-app-name.replit.app`.

## Best practices

<CardGroup cols={2}>
  <Card title="Development tips">
    * Start simple and iterate
    * Don't worry about technical details initially
    * Provide context in prompts
  </Card>

<Card title="Tool selection">
    * Use Agent for broad changes
    * Switch to Assistant for specific improvements
    * Test locally before publishing
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="Databases" icon="database" href="/cloud-services/storage-and-databases/sql-database">
    Add data persistence with ReplDB
  </Card>

<Card title="Cloud Services" icon="cloud" href="/category/replit-deployments">
    Learn about publishing options
  </Card>

<Card title="Custom Domain" icon="globe" href="/cloud-services/deployments/custom-domains">
    Set up your own domain name
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Create a file converter" icon="file-arrow-up" href="/getting-started/quickstarts/build-with-ai">
    Build a file conversion app using Agent and Assistant
  </Card>

<Card title="Create a Slack summarizer" icon="slack" href="/getting-started/quickstarts/ai-slack-channel-summarizer">
    Build a bot that summarizes Slack channels with AI
  </Card>
</CardGroup>

<Note>
  Want to learn more about Replit's AI tools? Check out [Replit AI](/category/replit-ai/).
</Note>

---

# Source: https://docs.replit.com/billing/object-storage-billing.md

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

# App Storage Billing

> Learn how Replit charges for App Storage.

export const ObjectStorageAdvancedOperationsPer1k = '$0.0075';

export const ObjectStorageBasicOperationsPer1k = '$0.0006';

export const ObjectStorageDataTransfer = '$0.10';

export const ObjectStorageMonth = '$0.03';

## Billing categories

Replit categorizes App Storage billing into the following areas:

* **Storage**: Amount of data capacity used per month. All stored objects have a minimum billing period of seven days.
* **Data Transfer**: Total amount of data uploaded and download throughout the month.
* **Basic Operations**: Operations associated with updating buckets and objects. See Class A Operations in <a href="https://cloud.google.com/storage/pricing" target="_blank">Google Cloud Storage pricing</a> for details.
* **Advanced Operation**: All other cloud object storage operations including retrieving configuration and metadata about objects and buckets. See Class B Operations in <a href="https://cloud.google.com/storage/pricing" target="_blank">Google Cloud Storage pricing</a> for details.

## Prices

The following table lists the prices for each usage category.

| Category                        | Price                                                        |
| ------------------------------- | ------------------------------------------------------------ |
| App Storage                     | {ObjectStorageMonth} per GiB per month                       |
| App Storage Data Transfer       | {ObjectStorageDataTransfer} per GiB                          |
| App Storage Basic Operations    | {ObjectStorageBasicOperationsPer1k} per thousand requests    |
| App Storage Advanced Operations | {ObjectStorageAdvancedOperationsPer1k} per thousand requests |

---

# Source: https://docs.replit.com/reference/object-storage-javascript-sdk.md

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

# App Storage JavaScript SDK

> The Replit App Storage Client is the official JavaScript SDK for managing interactions with Replit App Storage. This lets you programmatically copy, delete, upload, and download files within Replit App Storage buckets.

This reference guide explains the `Client` class from the `object-storage` library and provides code examples for its methods.

## Client

The `Client` class manages interactions with Replit App Storage. This class features methods for performing operations on files in a bucket.

To import the class from the library, add the following line to your JavaScript code:

```javascript  theme={null}
import { Client } from "@replit/object-storage";
```

Use the following code to create a `Client` instance that interacts with Replit Object Storage:

```javascript  theme={null}
const client = new Client();
```

## Constructors

**constructor**

* **new Client**(`options?`): `Client`

Creates a new Client instance to interact with Replit App Storage.

**Parameters**

**Returns**

`Client`

## Methods

### copy

* **copy**(`objectName`, `destObjectName`): `Promise`\<`Result`\<`null`, `RequestError`>>

Copies an object within the same bucket.
This method overwrites any existing object at the destination path.

**Parameters**

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

***

### delete

* **delete**(`objectName`, `options?`): `Promise`\<`Result`\<`null`, `RequestError`>>

Deletes an object from the bucket.

**Parameters**

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

***

### downloadAsBytes

* **downloadAsBytes**(`objectName`, `options?`): `Promise`\<`Result`\<`Buffer`, `RequestError`>>

Downloads an object and returns its raw contents as a buffer.

**Parameters**

**Returns**

`Promise`\<`Result`\<`Buffer`, `RequestError`>>

***

### downloadAsStream

* **downloadAsStream**(`objectName`, `options?`): `Readable`

Creates a readable stream of the object's contents.
The stream emits any errors encountered during the download.

**Parameters**

**Returns**

`Readable`

### downloadAsText

* **downloadAsText**(`objectName`, `options?`): `Promise`\<`Result`\<`string`, `RequestError`>>

Downloads an object and returns its contents as a string.

**Parameters**

**Returns**

`Promise`\<`Result`\<`string`, `RequestError`>>

### downloadToFilename

* **downloadToFilename**(`objectName`, `destFilename`, `options?`): `Promise`\<`Result`\<`null`, `RequestError`>>

Downloads an object and saves it to the specified location on the local filesystem.

**Parameters**

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

### exists

* **exists**(`objectName`): `Promise`\<`Result`\<`boolean`, `RequestError`>>

Checks if an object exists in the bucket.

**Parameters**

**Returns**

`Promise`\<`Result`\<`boolean`, `RequestError`>>

### getBucket

* **getBucket**(): `Promise`\<`Bucket`>

**Returns**

`Promise`\<`Bucket`>

### init

* **init**(`bucketId?`): `Promise`\<`Bucket`>

**Parameters**

**Returns**

`Promise`\<`Bucket`>

### list

* **list**(`options?`): `Promise`\<`Result`\<`StorageObject`\[], `RequestError`>>

Returns a list of all objects in the bucket.

**Parameters**

**Returns**

`Promise`\<`Result`\<`StorageObject`\[], `RequestError`>>

### mapUploadOptions

* **mapUploadOptions**(`options?`): `undefined` | `UploadOptions`

**Parameters**

**Returns**

`undefined` | `UploadOptions`

### uploadFromBytes

* **uploadFromBytes**(`objectName`, `contents`, `options?`): `Promise`\<`Result`\<`null`, `RequestError`>>

Uploads an object using its in-memory byte representation.
This method overwrites any existing object with the same name.

**Parameters**

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

### uploadFromFilename

* **uploadFromFilename**(`objectName`, `srcFilename`, `options?`): `Promise`\<`Result`\<`null`, `RequestError`>>

Uploads a file from the local filesystem to the bucket.
This method overwrites any existing object with the same name.

**Parameters**

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

### uploadFromStream

* **uploadFromStream**(`objectName`, `stream`, `options?`): `Promise`\<`void`>

Uploads an object by reading its contents from the provided stream.
The stream emits any errors encountered during the upload. This method overwrites any existing object with the same name.

**Parameters**

**Returns**

`Promise`\<`void`>

### uploadFromText

* **uploadFromText**(`objectName`, `contents`, `options?`): `Promise`\<`Result`\<`null`, `RequestError`>>

Uploads an object using its in-memory text representation.
This method overwrites any existing object with the same name.

**Parameters**

**Returns**

`Promise`\<`Result`\<`null`, `RequestError`>>

## Method examples

The following sections provide code examples for managing your files using the Replit Object Storage SDK.

### Retrieve an object as text

```javascript  theme={null}
const { ok, value: textValue, error } = await client.downloadAsText('file.json');
if (!ok) {
    // ... handle error ...
}
```

### Retrieve an object as its raw byte representation

```javascript  theme={null}
const { ok, value: bytesValue, error } = await client.downloadAsBytes('file.png');
if (!ok) {
    // ... handle error ...
}
```

### Retrieve an object from a stream

```javascript  theme={null}
const { ok, value: stream, error } = await client.downloadAsStream('file.json');
if (!ok) {
    // ... handle error ...
}
```

### Download an object to the filesystem

```javascript  theme={null}
const { ok, error } = await client.downloadToFilename('file.json', destFilename);
if (!ok) {
    // ... handle error ...
}
```

### List objects in the bucket

```javascript  theme={null}
const { ok, value, error } = await client.list();
if (!ok) {
    // ... handle error ...
}
```

### Upload an object from text

```javascript  theme={null}
const { ok, error } = await client.uploadFromText('file.json', data);
if (!ok) {
    // ... handle error ...
}
```

### Upload an object as bytes

```javascript  theme={null}
const { ok, error } = await client.uploadFromBytes('file.png', data);
if (!ok) {
    // ... handle error ...
}
```

### Upload an object from the filesystem

```javascript  theme={null}
const { ok, error } = await client.uploadFromFilename('file.json', srcFilename);
if (!ok) {
    // ... handle error ...
}
```

### Upload an object from a stream

```javascript  theme={null}
const { ok, error } = await client.uploadFromStream('file.json', stream);
if (!ok) {
    // ... handle error ...
}
```

### Delete an object from the bucket

```javascript  theme={null}
const { ok, error } = await client.delete('file.json');
if (!ok) {
    // ... handle error ...
}
```

---

# Source: https://docs.replit.com/getting-started/quickstarts/object-storage-javascript.md

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

# Manage App Storage in JavaScript

> Learn how to use the JavaScript App Storage client library to manage files from your Replit App.

This guide demonstrates how to use the JavaScript client library to upload, list, download, and delete files in your App Storage bucket.

<Note>
  This client library, written in TypeScript, can be used for projects that use JavaScript runtimes such as Bun, Deno, and Node.js 14 and later.
</Note>

## Create a TypeScript Replit App

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a6613ac9b303fa6dea65e5cf08ddca06" alt="plus sign" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-app-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0f0aa42a2a63cca6629fe393ffb100e4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e6cce9e17a54ec2279d57d255e5233ba 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6a6f30d08c7ab4811ba927af66ca7311 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f7249d48a50a7db0713ea3f92f4c422f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f2a12316d646b72674a837cbe70a10f8 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cc3b1f288cf5086a84aadaa9b1d4fba 2500w" /> **Create App** from the home screen.
2. Navigate to the **Choose a Template** tab.
3. Type "TypeScript" in the template search field and select it as shown below:
   <Frame>
     <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=20d5c2a7d84cafe0bbcb2488abad6623" alt="TypeScript template selection screen" data-og-width="2590" width="2590" data-og-height="1064" height="1064" data-path="images/tutorials/typescript-template.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=2009d52e7c62428dfbdeaac67d4c76b7 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=4688223d56cbd924ebe5e0d5fa307d33 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=5c9e52fee4cf2b0f91e77d43cfe7f73d 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=0b95cc7fc800d73e2fa5eddf7bc572b2 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=c306db4a9b98697c639b88bc08da4fcc 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/typescript-template.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=d3daef19ef4d0b3cbdee842e5fecde50 2500w" />
   </Frame>
4. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a6613ac9b303fa6dea65e5cf08ddca06" alt="plus sign" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-app-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0f0aa42a2a63cca6629fe393ffb100e4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e6cce9e17a54ec2279d57d255e5233ba 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6a6f30d08c7ab4811ba927af66ca7311 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f7249d48a50a7db0713ea3f92f4c422f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f2a12316d646b72674a837cbe70a10f8 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cc3b1f288cf5086a84aadaa9b1d4fba 2500w" /> **Create App**.

## Install the official client library

To install the client library, follow the one-click setup or package manager instructions below.

<Tabs>
  <Tab title="One-click setup">
    <Steps>
      <Step title="Access the App Storage tool">
        1. Navigate to the **App Storage** tab.
        2. Select the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=aa97c1d6b9eae7dfa4af01802636a8a5" alt="angled brackets icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/angled-brackets.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=27b4cca399aa3b3514339fe68a009a48 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=550894bc46ebe65b7d45c4d53f2a9b68 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=4743dfbd26844b1b4482a41e40b79f66 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=84f1640fb44502b77f4db2a553341bef 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=eeb65fe53c551e5a3f2358c28dff9524 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/angled-brackets.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=d2661b0703d206906cd198357bd20efd 2500w" /> **Commands** view in the **App Storage** tab.

The installation screen should resemble the following screenshot:

<Step title="Install the dependencies">
        1. Select "JavaScript" from the programming language dropdown on the top left.
        2. Select **Install @replit/object-storage package**.
        3. When completed, the button text should read **Package installed**.
      </Step>
    </Steps>
  </Tab>

<Tab title="npm">
    Use this option if your Replit App uses Node Package Manager (`npm`) to manage its dependencies.

Open the **Shell** tool in your workspace and enter the following command:

```sh  theme={null}
    npm install @replit/object-storage
    ```
  </Tab>

<Tab title="yarn">
    Use this option if your Replit App uses `yarn` to manage its dependencies.

Open the **Shell** tool in your workspace and enter the following command:

```sh  theme={null}
    yarn add @replit/object-storage
    ```
  </Tab>
</Tabs>

## Create a bucket

Before storing files, you must create a bucket. Follow the steps below to create a new bucket:

1. Navigate to the **App Storage** tool
2. Select **Create new bucket**
3. Enter a name for the bucket in the **Name** field
4. Select **Create bucket**

## Add and run the example code

<Steps>
  <Step title="Locate index.ts">
    Open the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=dcf170c63430088fc4e28058849eec4f" alt="files icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/files-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b72e6d298af9f96117a8a5492b9d8a42 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=af6a952cc85e5f742968c8a91b1e5137 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7f13cd1bcab1279e81e042c7a80d3033 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c4b325c9fc5e0e80d3e98b68715f2aa1 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=dcefa4a3a120cf6be1af51a67430632f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=78a61e721c9d71f1d41541aea469befc 2500w" /> **Files** tool from the left dock.

Select `index.ts` to open it in a file editor.
  </Step>

<Step title="Add the client code">
    Replace the contents of `index.ts` with the following code:

```javascript  theme={null}
    import { Client } from "@replit/object-storage";
    const client = new Client();

// Upload a text file that contains the text "Hello, World!"
    const { ok: uploadOk, error: uploadError } = await client.uploadFromText(
      "file.txt",
      "Hello World!",
    );
    if (!uploadOk) console.error("Upload failed:", uploadError);

// List the files in the bucket
    const { ok: listOk, value: listValue, error: listError } = await client.list();
    if (!listOk) console.error("List failed:", listError);
    else console.log("Bucket contents:", listValue);

// Retrieve and print the contents of the uploaded file
    const {
      ok: downloadOk,
      value,
      error: downloadError,
    } = await client.downloadAsText("file.txt");
    if (!downloadOk) console.error("Download failed:", downloadError);
    else console.log("file.txt contents:", value);
    ```
  </Step>

<Step title="Run the app">
    Select **Run** to execute the example code.

Navigate to the **Console** tab to view the output, which should resemble the output below:

```
    Bucket contents: [ { name: 'file.txt' } ]
    file.txt contents: Hello World!
    ```

Confirm that the `file.txt` file appears in your bucket in the **Objects** view of the
    **App Storage** tool.

<Tip>
      Reload the page to update the object list if `file.txt` fails to appear.
    </Tip>
  </Step>
</Steps>

## Delete the object

To remove the `file.txt` file from the bucket,

1. Replace the content of `index.ts` with the following code:

```javascript  theme={null}
   import { Client } from "@replit/object-storage";
   const client = new Client();

// Delete file.txt from the bucket
   const { ok: deleteOk, error: deleteError } = await client.delete("file.txt");
   if (!deleteOk) console.error("Delete failed:", deleteError);
   else console.log("Delete succeeded");
   ```
2. Select **Run** to execute the example code.
3. Navigate to the **Console** tab to view the output, which should resemble the output below:
   ```
   Delete succeeded
   ```
4. Verify that the `file.txt` object no longer appears in the bucket.

## Next steps

To learn more about Replit App Storage, see the following resources:

* [App Storage](/cloud-services/storage-and-databases/object-storage/): Learn more about the App Storage feature and workspace tool
* [App Storage JavaScript SDK](/reference/object-storage-javascript-sdk): Learn about the `Client` class and its methods

---

# Source: https://docs.replit.com/reference/object-storage-python-sdk.md

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

# App Storage Python SDK

> The Replit App Storage Client is the official Python SDK for managing interactions with Replit App Storage. This lets you programmatically copy, delete, upload, and download objects within Replit App Storage buckets.

This reference guide explains the `Client` class from the `replit-object-storage-python` package and provides code examples for its class methods.

## Client

The `Client` class manages interactions with Replit App Storage. This class features methods for performing operations on objects in a bucket.

To import the class from the `replit.object_storage` package, add the following line to your Python code:

```python  theme={null}
from replit.object_storage import Client
```

Use the following code to create a `Client` instance that interacts with Replit App Storage:

```python  theme={null}
client = Client()
```

<Tip>
  If your app uses multiple buckets, create one `Client` instance per bucket.
</Tip>

### \_\_init\_\_

The `init` method initializes an instance of the Client class.

```python  theme={null}
def __init__(bucket_id: Optional[str] = None)
```

**Argument**:

* `bucket_id` (Optional\[str]): The ID of the bucket the client manages. When omitted, the Client uses the default bucket associated with the Replit App or Deployment.

### copy

The `copy` method copies an object within the same bucket. If an object exists in the same location, it overwrites the original.

```python  theme={null}
def copy(object_name: str, dest_object_name: str) -> None
```

**Arguments**:

* `object_name` (str) - The full path of the source object.
* `dest_object_name` (str) - The full path of the object destination.

**Raises**:

* `ObjectNotFoundError` - Indicates the source object does not exist at the specified path.

### delete

The `delete` method permanently removes a file from App Storage.

```python  theme={null}
def delete(object_name: str, ignore_not_found: bool = False) -> None
```

**Arguments**:

* `object_name` (str) - The name of the object to delete.
* `ignore_not_found` (bool) - When `True`, suppress the error if the object does not exist.

**Raises**:

* `ObjectNotFoundError` - Indicates the object does not exist.

### download\_as\_bytes

The `download_as_bytes` method retrieves the contents of a file as `bytes`.

```python  theme={null}
def download_as_bytes(object_name: str) -> bytes
```

**Argument**:

* `object_name` (str) - The name of the object to download.

**Returns**:

* `bytes`- The raw byte representation of the object's contents.

**Raises**:

* `ObjectNotFoundError` - Indicates the object does not exist.

### download\_as\_text

The `download_as_text` method downloads the contents of a file as a `str` type.

```python  theme={null}
def download_as_text(object_name: str) -> str
```

**Argument**:

* `object_name` (str) - The source object name to retrieve.

**Returns**:

* str: The object's contents as a UTF-8 encoded string.

**Raises**:

* `ObjectNotFoundError` - Indicates the object does not exist.

### download\_to\_filename

Downloads the contents of an object into a file on the local disk.

```python  theme={null}
def download_to_filename(object_name: str, dest_filename: str) -> None
```

**Arguments**:

* `object_name` (str) - The name of the source object from App Storage to retrieve.
* `dest_filename` (str) - The destination filename on local disk.

**Raises**:

* `ObjectNotFoundError` - Indicates the object does not exist.

### exists

The `exists` method checks if an object exists.

```python  theme={null}
def exists(object_name: str) -> bool
```

**Argument**:

* `object_name` (str) - The name of the object to check for existence.

**Returns**:

* `bool`: `True` if the object exists, False otherwise.

### list

The `list` method lists objects in the Bucket.

```python  theme={null}
def list(end_offset: Optional[str] = None,
         match_glob: Optional[str] = None,
         max_results: Optional[int] = None,
         prefix: Optional[str] = None,
         start_offset: Optional[str] = None) -> List[Object]
```

**Arguments**:

* `end_offset`(Optional\[str]) - Filter results to objects named lexicographically before `end_offset`. If `start_offset` is defined, the objects listed
  have names between `start_offset` (inclusive) and `end_offset` (exclusive).
* `match_glob` (Optional\[str]) - Use a glob pattern to filter results. For example: "foo\*bar" matches "footbar", "foo baz bar", and "foobar".
* `max_results` (Optional\[int]) - The maximum number of results to return in the response.
* `prefix` (Optional\[str]) - Filter results to objects whose names have the specified prefix.
* `start_offset` (Optional\[str]) - Filter results to objects whose names are lexicographically equal to or after `start_offset`.
  When `end_offset` is set, the objects listed have names between `start_offset` (inclusive) and `end_offset` (exclusive).

**Returns**:

* `List`(Object): A list of objects matching the given query parameters.

### upload\_from\_filename

Use `upload_from_filename()` to upload an object from a source file on the local disk to App Storage.

```python  theme={null}
def upload_from_filename(dest_object_name: str, src_filename: str) -> None
```

**Arguments**:

* `dest_object_name`(str) - The name of the uploaded file.
* `src_filename`(str) - The source file to upload.

### upload\_from\_bytes

The `upload_from_bytes` method uploads an object from `bytes` data.

```python  theme={null}
def upload_from_bytes(dest_object_name: str, src_data: bytes) -> None
```

**Arguments**:

* `dest_object_name`(str) - The name of the object to upload.
* `src_data`(str) - The `bytes` data to upload.

### upload\_from\_text

The `upload_from_text` method uploads an object from a string.

```python  theme={null}
def upload_from_text(dest_object_name: str, src_data: Union[bytes, str]) -> None
```

**Arguments**:

* `dest_object_name`(str) - The name of the object to upload.
* `src_data`(str)- The text data to upload.

### Exception types

* When interacting with Replit App Storage using the `Client`, any method might return one of the following errors:

* `BucketNotFoundError`: Indicates the configured bucket name does not match with any bucket in App Storage.

* `DefaultBucketError`: Indicates missing default bucket configuration.

* `ForbiddenError`: Indicates insufficient permissions to access to the bucket.

* `TooManyRequestsError`: Indicates the operation is rate-limited due to excessive requests.

* `UnauthorizedError`: Indicates authorization restricted access to the operation.

## Class method examples

The following sections provide code examples for managing your objects using the Replit App Storage SDK.

### Retrieve a file as text

```python  theme={null}
client.download_as_text("file.json")
```

### Retrieve raw bytes of a file

```python  theme={null}
client.download_as_bytes("file.png")
```

### Download a file to the local filesystem

```python  theme={null}
client.download_to_filename("file.json", dest_filename)
```

### List objects in the bucket

```python  theme={null}
client.list()
```

### Upload a file from text

```python  theme={null}
client.upload_from_text("file.json", data)
```

### Upload a file as bytes

```python  theme={null}
client.upload_from_bytes("file.png", data)
```

### Upload a objects from the filesystem

```python  theme={null}
client.upload_from_filename("file.json", src_filename)
```

### Delete an object from the bucket

```python  theme={null}
client.delete("file.json")
```

---

# Source: https://docs.replit.com/getting-started/quickstarts/object-storage-python.md

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

# Manage App Storage in Python

> Learn how to use the Python App Storage client library to manage files from your Replit App.

This guide demonstrates how to use the Python client library to upload, list, download, and delete files in your App Storage bucket.

## Create a Python Replit App

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a6613ac9b303fa6dea65e5cf08ddca06" alt="plus sign" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-app-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0f0aa42a2a63cca6629fe393ffb100e4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e6cce9e17a54ec2279d57d255e5233ba 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6a6f30d08c7ab4811ba927af66ca7311 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f7249d48a50a7db0713ea3f92f4c422f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f2a12316d646b72674a837cbe70a10f8 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cc3b1f288cf5086a84aadaa9b1d4fba 2500w" /> **Create App** from the home screen.
2. Navigate to the **Choose a Template** tab.
3. Type "Python" in the template search field and select it as shown below:
   <Frame>
     <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=3d09d96320ab531aedf15df7894f1234" alt="Python template selection screen" data-og-width="2660" width="2660" data-og-height="1110" height="1110" data-path="images/tutorials/python-template.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=99cf29da1d08f91373f25b2ae2fda816 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=af19b79e5bb55049de9164b9196d2779 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=442a0cbff0f0ba108aac818d1b094cb6 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=5bc6d317357624b52b0df92007f83c2b 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=4677b5f853201d0acf98d5965685fb28 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/python-template.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=9ff1ec092477367a3a1af5c60d694964 2500w" />
   </Frame>
4. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a6613ac9b303fa6dea65e5cf08ddca06" alt="plus sign" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-app-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0f0aa42a2a63cca6629fe393ffb100e4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e6cce9e17a54ec2279d57d255e5233ba 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6a6f30d08c7ab4811ba927af66ca7311 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f7249d48a50a7db0713ea3f92f4c422f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f2a12316d646b72674a837cbe70a10f8 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cc3b1f288cf5086a84aadaa9b1d4fba 2500w" /> **Create App**.

## Install the official client library

To install the client library, follow the one-click setup or package manager instructions below.

The installation screen should resemble the following screenshot:

<Step title="Install the dependencies">
        1. Select "Python" from the programming language dropdown on the top left.
        2. Select **Install replit-object-storage package**.
        3. When completed, the button text should read **Package installed**.
      </Step>
    </Steps>
  </Tab>

<Tab title="upm">
    Use this option if your Replit App uses the Universal Package Manager (`upm`) to manage its dependencies.

Open the **Shell** tool in your workspace and enter the following command:

```sh  theme={null}
    upm --lang python add replit-object-storage
    ```
  </Tab>

<Tab title="pip">
    Use this option if your Replit App uses `pip` to manage its dependencies.

Open the **Shell** tool in your workspace and enter the following command:

```sh  theme={null}
    pip install replit-object-storage
    ```
  </Tab>
</Tabs>

## Create a bucket

Before storing objects, you must create a bucket. Follow the steps below to create a new bucket:

1. Navigate to the **App Storage** tool
2. Select **Create new bucket**
3. Enter a name for the bucket in the **Name** field
4. Select **Create bucket**

## Add and run the example code

<Steps>
  <Step title="Locate main.py">
    Open the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=dcf170c63430088fc4e28058849eec4f" alt="files icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/files-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b72e6d298af9f96117a8a5492b9d8a42 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=af6a952cc85e5f742968c8a91b1e5137 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7f13cd1bcab1279e81e042c7a80d3033 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c4b325c9fc5e0e80d3e98b68715f2aa1 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=dcefa4a3a120cf6be1af51a67430632f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=78a61e721c9d71f1d41541aea469befc 2500w" /> **Files** tool from the left dock.

Select `main.py` to open it in a file editor.
  </Step>

<Step title="Add the client code">
    Copy and paste the following code into `main.py`:

```python  theme={null}
    # Instantiate a Client
    from replit.object_storage import Client
    client = Client()

# Upload a text file that contains the text "Hello, World!"
    client.upload_from_text("file.txt", "Hello World!")

# List the objects in the bucket
    objects = client.list()
    print("Bucket contents:", objects)

# Retrieve and print the contents of the uploaded file
    contents = client.download_as_text("file.txt")
    print("file.txt contents: ", contents)
    ```
  </Step>

<Step title="Run the app">
    Select **Run** to execute the example code.

Navigate to the **Console** tab to view the output, which should resemble the output below:

```
    Bucket contents: [Object(name='file.txt')]
    file.txt contents:  Hello World!
    ```

Confirm that the `file.txt` object appears in your bucket in the **Objects** view of the
    **Object Storage** tool.

<Tip>
      Reload the page to update the object list if `file.txt` fails to appear.
    </Tip>
  </Step>
</Steps>

## Delete the object

To remove the `file.txt` file from the bucket,

1. Replace the content of `main.py` with the following code:

```python  theme={null}
   from replit.object_storage import Client
   client = Client()

# Delete file.txt from the bucket
   client.delete("file.txt")
   print("Delete succeeded")
   ```
2. Select **Run** to execute the example code.
3. Navigate to the **Console** tab to view the output, which should resemble the output below:
   ```
   Delete succeeded
   ```
4. Verify that the `file.txt` object no longer appears in the bucket.

## Next steps

To learn more about Replit App Storage, see the following resources:

* [App Storage](/cloud-services/storage-and-databases/object-storage/): Learn more about the App Storage feature and workspace tool
* [App Storage Python SDK](/reference/object-storage-python-sdk): Learn about the `Client` class and its methods

---

# Source: https://docs.replit.com/cloud-services/storage-and-databases/object-storage.md

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

# App Storage

> App Storage is Replit's built-in file storage that lets your app easily host and save uploads like images, videos, and documents.

App Storage is Replit's built-in object storage that lets your app easily host and save uploads like images, videos, and documents.
Buckets are containers for storing objects such as files. They include access policies to limit what actions users or applications can perform on their contents.

<Info>
  We've renamed <strong>Object Storage</strong> to <strong>App Storage</strong>. Functionality has not changes and your existing buckets, permissions, and programmatic access should continue to work.
</Info>

With App Storage, you can build apps like:

* **Photo sharing platforms**: Let builders upload, store, and display images
* **Video streaming services**: Handle video uploads and serve content to viewers
* **Document management systems**: Store and organize builder files with secure access
* **Portfolio sites**: Showcase work with media files that load reliably
* **File backup services**: Provide builders with cloud storage for their important files

<Note>
  Ask **Agent** to add App Storage to your app with details on what types of files your app should handle. Agent will set up the integration, create the necessary buckets, and update your app to upload, store, and retrieve files with advanced features like authentication and access controls.
</Note>

The App Storage tool lets you seamlessly share data between your
development and production environments or with other Replit Apps.

## Features

<Info>
  App Storage is powered by Google Cloud Storage (GCS).
  This means you receive the benefits of industry-leading uptime,
  availability, and security.
</Info>

App Storage provides the following features for your Replit Apps:

* **Persistent cloud storage**: Store files that remain accessible to your published app and users
* **Scalable file handling**: Handle growing data needs without worrying about storage limits
* **Cross-app data sharing**: Share buckets across multiple Replit Apps for distributed architectures
* **Programmatic access**: Upload, download, and manage files using intuitive APIs
* **Enhanced Agent integration**: Let Agent set up App Storage with advanced configurations, inspect existing setups, and generate complete backend and frontend code with authentication and access controls

Here are a few ways you can use App Storage in your Replit Apps:

* Store builder profile pictures and media uploads
* Serve product images for e-commerce sites
* Handle document uploads for form submissions
* Create file sharing and collaboration features
* Build content management systems with media libraries

<Tip>
  **Enhanced Agent Integration**: You can prompt [Replit Agent](/replitai/agent) to automatically add App Storage to your apps! Agent can now set up object storage, inspect configurations, and generate complete backend and frontend code with advanced features like authentication and access controls. Simply mention "App Storage" or "file storage" in your prompt.

<AiPrompt>Add App Storage to my app to store files</AiPrompt>
  <AiPrompt>Create a photo gallery app with App Storage for images</AiPrompt>
  <AiPrompt>Set up App Storage with authentication for user file uploads</AiPrompt>

Learn more about [Agent integrations](/replitai/integrations#data-storage--management) and see all available App Storage prompts.
</Tip>

## Usage

<Note>
  Your Replit App must authenticate with Google Cloud Storage to access a bucket and its objects.
  Use the official Replit App Storage client libraries to automatically authenticate.
</Note>

You can access the App Storage tool directly in your Replit App workspace.

<Accordion title="How to access the App Storage tool">
  From the left **Tool dock**:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/object-storage-monoochrome-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7f716c0fb01dcca217d1e9c61005e302" alt="App Storage icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/object-storage-monoochrome-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/object-storage-monoochrome-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=1e4c17f4ac3fd4b9bb8ca2a3289af651 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/object-storage-monoochrome-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ae3f7db6e976d1dc358502e9b2f43626 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/object-storage-monoochrome-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9cea36b80288f0d790a5408c5f679c9e 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/object-storage-monoochrome-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d3993deecca8670719014ac906a664c6 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/object-storage-monoochrome-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=07871609d691508876e1476057487c75 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/object-storage-monoochrome-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=790323521d9f1b9a581d9cc883457730 2500w" /> **App Storage**.

From the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool.
  2. Type "App Storage" to locate the tool and select it from the results.
</Accordion>

To associate a new storage bucket with your Replit App, create a bucket.

<Accordion title="How to create a bucket">
  From the **App Storage** tool:

1. Click on **Create new bucket**.
  2. Enter a name for the bucket in the **Name** field and select **Create bucket**.

The App Storage tab should resemble the following screenshot:

To create additional buckets, open the bucket dropdown menu on the top left of the **App Storage** tab and select **Create new bucket**.
</Accordion>

The following sections explain the bucket and object management options in the App Storage tool.

### Select a bucket

To switch between your storage buckets, select the dropdown menu in the top left corner of the **App Storage** tab.

The selected bucket displays a check mark next to its name, as shown in the screenshot below:

### Access the bucket ID

To view the **Bucket ID** by selecting the **Settings** view from the dropdown at the top of the **App Storage** tab.
The Bucket ID uniquely identifies the bucket, which your code must reference to perform an operation.

If you have multiple buckets, select the correct bucket from the dropdown menu in the top left corner.

The following screenshot shows the Bucket ID for the "FileVault Bucket One" bucket:

### Upload or download objects

To upload an object to the selected bucket:

1. Navigate to the **Objects** view in the **App Storage** tab.
2. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-file.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f16946db28550c879305a27e9102b750" alt="upload file icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/upload-file.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-file.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0fb8bc57a7632c5011d5da707b3055d9 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-file.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7966c028f0aa95fb28f2cb3e6a8610d4 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-file.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=22edd65a063f25dd3c45acb90d68952b 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-file.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=59efc6728243b7c6e41efc6c2f2cafae 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-file.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2d3c1c9f6d39031b7a69721fdcdc91c2 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-file.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=032a10ab46150f524a35b1b5c9542844 2500w" /> **Upload files**, or <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-folder.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=15f810db7193eeec2c4de7f2efc305eb" alt="upload folder icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/upload-folder.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-folder.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e33a2219ad6ee3ab3ee44bd9154c66e8 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-folder.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=6c20bfc7987a8027f2050da94749f6c7 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-folder.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=85798cde156cbaee8c799526fbaf361b 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-folder.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=340c3b3c67d1fd618802633daa5a066e 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-folder.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=bb62563ee586795c1cdedc57c8f01128 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/upload-folder.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4f457a93de546cb9ac34e273fc28fd01 2500w" /> **Upload folder** to upload all files from a folder.
   Then, select one or more files to upload from the file dialog.
   Alternatively, drag a file or folder into the area that lists the contents of the bucket.

To download an object from the selected bucket:

1. Navigate to the **Objects** view in the **App Storage** tab.
2. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/download-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=29fbdd462761fb2a2180e92a26321128" alt="download icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/download-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/download-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3e89a248c14f84a97da99877c052e26c 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/download-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ba51d580be445aa39b8dd397e3f08705 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/download-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b19fd72d2f81fe94c033ce543ec8f67 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/download-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0c517f0ad96d2637ee472e003345bb4a 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/download-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d6096d896bb5a0247e450116e97c2c76 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/download-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=55ad515faec4c364624d669ad2f44617 2500w" /> download icon to the right of the file to download it.

### Organize objects in folders

To create a folder in the selected bucket:

1. Navigate to the **Objects** view in the **App Storage** tab.
2. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-folder.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=452199bae3688380c770951c4bd16260" alt="create folder icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-folder.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-folder.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=300e99f7b4bd43373babd529e33c40b4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-folder.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=17a2a1520d878d4dee99f9bb84627755 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-folder.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=1320ad3771e28a6e0647ab53b3afa4f5 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-folder.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=59d0ec19cfca93a6d8c8901b6b261b14 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-folder.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=8e6353198a91c90f8febf4604814ea35 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-folder.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=d06c17193076edef46d32d6c89f33d0e 2500w" /> **Create Folder** in the **Objects** view.
3. Enter a name for the folder.

To add objects to a folder in the **Objects** view, drag an object to the destination folder.

To move the object to a parent folder, drag it above the header to the name of the folder above the object list.
The following animation shows moving the "product\_demo.mov" file from the "videos" folder to the parent "Objects" folder:

### Delete objects or buckets

<Warning>
  The delete action is irreversible. Make sure to back up any essential data before proceeding.
</Warning>

To delete an object forever:

1. Navigate to the **Objects** view in the **App Storage** tab.
2. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8f151791088b8b241632ca547f90265e" alt="trash icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/trash-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2623b12e7af8f79729b14508489b0418 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=31c030d2861933867568ad11b940a210 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d3de8c448b8ab0d7b3bd8978fa346ddb 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=70b9aaae5e97d97328752b89a2d6d963 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0d4a3e8a7b503e3fa067daf5d6262b88 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3712a7908610fc2a9295f31cd2c5c0c7 2500w" /> trash icon
   next to the object you want to delete.
3. Confirm the deletion in the confirmation dialog.

To delete a bucket and all the objects it contains:

1. Navigate to the **Settings** view in the **App Storage** tab.
2. Make sure you select the bucket you want to delete in the top left bucket dropdown menu.
3. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8f151791088b8b241632ca547f90265e" alt="trash icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/trash-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2623b12e7af8f79729b14508489b0418 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=31c030d2861933867568ad11b940a210 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d3de8c448b8ab0d7b3bd8978fa346ddb 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=70b9aaae5e97d97328752b89a2d6d963 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0d4a3e8a7b503e3fa067daf5d6262b88 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3712a7908610fc2a9295f31cd2c5c0c7 2500w" /> **Delete Bucket**.
4. Confirm the deletion in the confirmation dialog.

### Bucket access management

Replit connects all buckets you create to your account and makes them available to
all your Replit Apps. The Replit App from which you create the bucket automatically
receives access.

You can control which of your Replit Apps have access to a specific bucket, which lets you
share data efficiently and securely.

To grant your Replit App access to a bucket from another app on your account:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" />
   **Add an existing bucket** from the bucket menu at the top left of the App Storage tab.
2. In the **Choose a Bucket** dialog, choose the bucket you want to add and select **Add Bucket to Repl**.

To revoke your Replit App's access to a bucket:

1. Navigate to the **Settings** view in the **App Storage** tab.
2. From the bucket dropdown in the top left of the tab, select the bucket name.
3. Select **Remove Bucket from Repl** and confirm removal in the confirmation dialog.

### Programmatic access to App Storage

To access App Storage from your Replit App, use one of the following libraries:

* Replit App Storage SDK, available for JavaScript and Python
* <a href="https://cloud.google.com/storage/docs/reference/libraries" target="_blank">Google Cloud Storage client library</a>

For instructions on how to use the client libraries, see the following resources:

* [JavaScript App Storage tutorial](/getting-started/quickstarts/object-storage-javascript/): Learn how to use the Replit JavaScript App Storage client
* [JavaScript App Storage SDK](/reference/object-storage-javascript-sdk/): Client reference for the JavaScript SDK
* [Python App Storage tutorial](/getting-started/quickstarts/object-storage-python/): Learn how to use the Replit Python App Storage client
* [Python App Storage SDK](/reference/object-storage-python-sdk/): Client reference for the Python SDK
* [Google Cloud Python SDK example app](https://replit.com/@matt/GCS-Python-Uploads?v=1): Remix this app to manage objects using the Google Cloud Python SDK

## Billing and resource usage

To monitor your App Storage usage, navigate to the <a href="https://replit.com/usage/" target="_blank">Usage</a> page.

To learn more about App Storage pricing, see [App Storage Billing](/billing/object-storage-billing).

---

# Source: https://docs.replit.com/replitai/open-in-replit.md

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

# Open in Replit

> Build a new Replit App with a link from your app or website.

export const CreateUrlLinkBuilder = () => {
  if (typeof document !== 'undefined' && !window.LZString) {
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js';
    document.head.appendChild(script);
  }
  const getLink = () => {
    if (typeof document === 'undefined' || !window.LZString) {
      return 'https://replit.com/?stack=Design&prompt=';
    }
    const promptEl = document.getElementById('create-url-prompt');
    const stackEl = document.querySelector('input[name="stack-mode"]:checked');
    const referrerEl = document.getElementById('create-url-referrer');
    const prompt = promptEl?.value || '';
    const stack = stackEl?.value || 'Design';
    const referrer = referrerEl?.value || '';
    if (!prompt.trim()) {
      return '';
    }
    const encoded = window.LZString.compressToEncodedURIComponent(prompt);
    let url = `https://replit.com/?stack=${stack}&prompt=${encoded}`;
    if (referrer.trim()) {
      url += `&referrer=${encodeURIComponent(referrer)}`;
    }
    return url;
  };
  const updateOutputs = () => {
    if (typeof document === 'undefined') return;
    const link = getLink();
    const badgeUrl = 'https://replit.com/badge?caption=Build%20with%20Replit';
    const emptyPlaceholder = 'Enter a prompt above to generate a link';
    const badgeMarkdown = link ? `[![Build with Replit](${badgeUrl})](${link})` : emptyPlaceholder;
    const outputEl = document.getElementById('create-url-output');
    const badgeMarkdownEl = document.getElementById('create-url-badge-markdown');
    if (outputEl) outputEl.textContent = link || emptyPlaceholder;
    if (badgeMarkdownEl) badgeMarkdownEl.textContent = badgeMarkdown;
  };
  const handleBadgeClick = e => {
    e.preventDefault();
    const link = getLink();
    if (link) {
      window.open(link, '_blank');
    }
  };
  return <div className="space-y-4">
      <div>
        <label htmlFor="create-url-prompt" className="block text-sm font-medium mb-1">
          Prompt
        </label>
        <textarea id="create-url-prompt" onInput={updateOutputs} placeholder="Create a todo app with a clean, modern design" rows={4} className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" />
      </div>
      <div>
        <label className="block text-sm font-medium mb-2">Stack mode</label>
        <div className="flex gap-4">
          <label className="flex items-center cursor-pointer">
            <input type="radio" name="stack-mode" value="Design" defaultChecked onChange={updateOutputs} className="mr-2" />
            <span className="text-sm">Design</span>
          </label>
          <label className="flex items-center cursor-pointer">
            <input type="radio" name="stack-mode" value="Build" onChange={updateOutputs} className="mr-2" />
            <span className="text-sm">Build</span>
          </label>
        </div>
      </div>
      <div>
        <label htmlFor="create-url-referrer" className="block text-sm font-medium mb-1">
          Referrer <span className="text-gray-500 font-normal">(optional)</span>
        </label>
        <input id="create-url-referrer" type="text" onInput={updateOutputs} placeholder="Your website or app name" className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" />
        <p className="mt-1 text-xs text-gray-500">
          The name or URL of the page containing this link. Used for
          attribution.
        </p>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Generated link</label>
        <pre className="w-full p-3 bg-gray-100 dark:bg-gray-800 rounded-md text-sm break-all select-all cursor-text">
          <code id="create-url-output">
            https://replit.com/?stack=Design&prompt=
          </code>
        </pre>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Badge preview</label>
        <div className="p-3 bg-gray-100 dark:bg-gray-800 rounded-md">
          <a href="#" onClick={handleBadgeClick} style={{
    cursor: 'pointer'
  }}>
            <img src="https://replit.com/badge?caption=Open%20in%20Replit" alt="Open in Replit badge" noZoom />
          </a>
        </div>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Badge markdown</label>
        <pre className="w-full p-3 bg-gray-100 dark:bg-gray-800 rounded-md text-sm break-all select-all cursor-text">
          <code id="create-url-badge-markdown">
            [![Open in
            Replit](https://replit.com/badge?caption=Open%20in%20Replit)](https://replit.com/?stack=Design&prompt=)
          </code>
        </pre>
      </div>
    </div>;
};

## Building a link

To build a link, use the format below.

```
https://replit.com/?stack=Build&prompt=A4Jw9gtsAuQ&referrer=replit-docs
```

### URL parameters

Make sure to include the following parameters in your URL.

| Parameter  | Type   | Description                                                                                                                                                                                             | Required/Optional |
| ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
| `stack`    | string | The build mode to use. Must be either `Design` or `Build`. `Design` opens [Design Mode](/replitai/design-mode) for visual prototyping. `Build` opens [Agent](/replitai/agent) for full app development. | Required          |
| `prompt`   | string | Text describing the application to build, **compressed using [LZ-string](https://pieroxy.net/blog/pages/lz-string/index.html)**. The uncompressed prompt can be up to 50,000 characters.                | Required          |
| `referrer` | string | The name or URL of the page containing this link. Used for attribution.                                                                                                                                 | Optional          |

<Note>
  The `prompt` parameter must be compressed using LZ-string compression before
  being added to the URL. This helps URLs remain within browser length limits
  and parse correctly.
</Note>

### Interactive link builder

Use the tool below to generate your **Open in Replit** link. Enter your prompt, select the stack mode, and the link will be generated automatically with LZ-string compression applied.

### Compressing prompts

To create a valid **Open in Replit** link, you must compress your prompt using LZ-string compression. Here's how:

#### JavaScript/TypeScript

```javascript  theme={null}
import LZString from 'lz-string';

const prompt = 'Create a todo app with a clean, modern design';
const compressed = LZString.compressToEncodedURIComponent(prompt);
const url = `https://replit.com/?stack=Design&prompt=${compressed}`;
```

#### Python

```python  theme={null}
import lzstring

prompt = "Create a todo app with a clean, modern design"
compressed = lzstring.LZString().compressToEncodedURIComponent(prompt)
url = f"https://replit.com/?stack=Design&prompt={compressed}"
```

<Tip>
  Use `compressToEncodedURIComponent` to ensure the compressed string is
  URL-safe.
</Tip>

### Examples

**Design Mode with basic prompt**

```
https://replit.com/?stack=Design&prompt=AoUwTgzg9gdghgGwAQAcpgC4DMoIJZRIR4YgB0QA
```

**Build Mode with detailed prompt**

```
https://replit.com/?stack=Build&prompt=LIQw1gpgBCUE4HsQBMC2IAOUMBsQDt8BLfAcygBcEEcoB3ACwjmg0WQFcBjCqdfEKWYBnKFwJiWICtALIoANyLCOIHEQBe0AI6q4MuDgCe2dt16IU6DMIB0UAJL4uODsmjI4g0iABGOaHE4ZFEAMwQ4KBIiCiJpIgUIYQAaUyIImJMKQRSYfHkuGgixBGQScl8siBBUewARJKJSfCjeOhiGGFMEUKThdIFaWNQIdXxoJQg6PIKAglTUUuYWgFUHWyA&referrer=replit%20docs
```

## Stack modes

### Design Mode

Use `stack=Design` to open your prompt in [Design Mode](/replitai/design-mode), which is optimized for:

* Visual design and UI prototyping
* Rapid iteration on layouts and styling
* Creating design mockups
* Frontend-focused development

### Build Mode

Use `stack=Build` to open your prompt in [Agent](/replitai/agent), which is optimized for:

* Full-stack application development
* Backend logic and APIs
* Database integration
* Complex functionality and features

## Best practices

* Keep prompts concise and focused on core features for best generation results.
* Use clear, descriptive language that explains what you want to build.
* Choose the appropriate `stack` mode for your use case (Design for UI/UX, Build for full apps).
* Test your compressed URLs to ensure they parse correctly before sharing.
* Consider your audience's technical level when crafting prompts.

### User authentication

Regardless of your Replit authentication state, you'll need to provide input before creating the app. Usually this means submitting the prompt.

### Error handling

If the URL is malformed or parameters are invalid, Replit won't fill the prompt. Possible causes include:

* Missing required parameters (`stack` or `prompt`)
* Invalid `stack` value (must be `Design` or `Build`)
* Failed decompression of the `prompt` parameter
* Browser "URL too long" errors (though compression helps mitigate this)

### Security considerations

<Warning>
  **Open in Replit** links could be used to create apps with unintended behavior
  or security vulnerabilities. Only click links from trusted sources.
</Warning>

When sharing **Open in Replit** links:

* Review prompts carefully before sharing publicly
* Consider the security implications of the apps being generated
* Avoid including sensitive information in prompts
* Be transparent about what the link will create

## Related resources

* [Design Mode documentation](/replitai/design-mode)
* [Agent documentation](/replitai/agent)
* [Replit AI integrations](/replitai/integrations)

---

# Source: https://docs.replit.com/teams/projects/overview.md

# Source: https://docs.replit.com/teams/information-security/overview.md

# Source: https://docs.replit.com/replitai/mcp/overview.md

# Source: https://docs.replit.com/billing/teams-billing/overview.md

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

# Overview

> Learn about seat pricing and usage-based billing for Replit Teams, including how invoicing works and monthly credit allocations per team member.

export const TeamsCredits = '$40';

<Warning>
  The Teams plan is being replaced by the new Pro plan. These changes will take effect on February 20th, 2026. [Learn more about what's changing](https://blog.replit.com/pro-plan).
</Warning>

## Replit Teams Billing

Replit Teams plans have two parts of their billing: Seats and Usage-Based costs. Both are charged at the same time on the same invoice. To see your historic and upcoming bills, visit the usage page.

An invoice will have:

* The upfront seat cost for the current billing period
* The usage-based costs for the previous billing period

## Seat pricing

Seats are a fixed fee per user per billing period. Each seat comes with a monthly spend credit, which is currently {TeamsCredits} per user per month.

## Usage-Based pricing

Visit our [Usage-Based](/billing/about-usage-based-billing) docs for more information.

## Credit packs

If your team needs additional credits beyond your monthly subscription allowance, you can purchase credit packs on your [billing page](https://replit.com/account#billing).

Credit packs expire six months after the purchase date and do not renew or roll over. Credits are automatically used from the credit pack that expires earliest first, helping you maximize the value of your purchases. They're perfect for covering temporary spikes in team usage or preparing for larger projects.

---

# Source: https://docs.replit.com/replitai/plan-mode.md

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

# Plan Mode

> Plan mode allows you to brainstorm ideas, plan work, and collaborate with Replit Agent without editing your app's code or data.

Plan mode introduces a new way of chatting with Replit Agent that focuses on asking questions, brainstorming, and planning your work.

## What is Plan Mode?

Plan mode enables you to:

* **Brainstorm ideas** and explore different approaches to your project
* **Plan development work** with structured task lists
* **Collaborate with AI** on project architecture and feature planning
* **Get strategic guidance** and ask questions without modifying your project's code or data
* **Transition seamlessly** to Build mode when you're ready to implement

The default mode is now referred to as **Build** mode.

Unlike Build mode, Plan mode focuses on planning and ideation, helping you think through projects before writing code.

## Getting Started

### Accessing Plan Mode

Plan mode is available in any Replit App that has Agent enabled. To access it:

1. **Open your Replit App** workspace
2. **Look for the mode selector** at the bottom left of the chat input box
3. **Choose Plan mode** from the dropdown

## Key Features

### Task Planning

Plan mode excels at breaking down complex projects into manageable tasks. Provide the Agent some requirements and it will generate an ordered task list of the development tasks necessary to complete your request.

### Collaborative Brainstorming

Work together with AI to explore different approaches:

* **Multiple solution paths** for complex problems
* **Pros and cons analysis** of different approaches
* **Risk assessment** and mitigation strategies

## Workflow: From Planning to Building

### 1. Planning Phase (Plan Mode)

Start your development process in Plan mode:

* **Define your project scope** and objectives
* **Break down requirements** into specific features
* **Plan your architecture** and technology stack
* **Create a development roadmap** with milestones

### 2. Task Approval

When Agent generates a task list:

* **Review** the proposed tasks
* Select **Start building** to approve the plan

or, keep chatting to refine the plan.

### 3. Transition to Build Mode

When you're ready to start implementing:

* **Click "Start building"** to approve the plan
* **Agent automatically switches** to Build mode
* **Agent begins implementation** of approved tasks
* **Track progress** through the development phase

Plan Mode usage follows the same effort-based pricing as other Agent interactions. You are charged for all Agent work in Plan Mode, including answering questions, providing guidance, and generating task lists. Charges scale up for more complex requests, or requests in longer context conversations.

**All Agent interactions are billable** - whether Agent responds with text guidance or makes code changes, there is always a charge, though smaller requests cost less.

## Use Cases

### Feature Planning

Ideal for adding new functionality:

* **Break down complex features** into implementable tasks
* **Plan database changes** and API modifications
* **Design user interface** and user experience flows
* **Consider edge cases** and error handling

### Learning and Exploration

Excellent for educational purposes:

* **Understand different approaches** to solving problems
* **Learn about new technologies** and frameworks
* **Explore design patterns** and best practices
* **Get guidance** on development methodologies

## Best Practices

### Effective Prompting

To get the most out of Plan mode:

* **Be specific** about your project requirements
* **Ask follow-up questions** to clarify AI suggestions
* **Request examples** when discussing complex concepts
* **Discuss trade-offs** between different approaches
* **Iterate on ideas** before committing to implementation
* **Save important decisions** by referencing them in follow-up conversations

---

# Source: https://docs.replit.com/tutorials/plan-vs-build-mode.md

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

# Plan vs. Build Mode

> Learn the difference between Plan and Build modes in Replit, and how to combine them for more effective development.

Replit Agent offers two interaction modes: **Plan Mode** and **Build Mode**. Use them together to think through your ideas first, then implement with confidence.

## What is Plan Mode?

[Plan Mode](/replitai/plan-mode) lets you brainstorm, ask questions, and plan your work with Agent—without modifying any code. Think of it as a collaborative planning session where you can explore ideas freely.

Plan Mode is perfect for:

* **Brainstorming ideas**: Explore different approaches before committing to one
* **Breaking down complex projects**: Get a structured task list before building
* **Learning and understanding**: Ask questions about technologies, patterns, or your codebase
* **Planning architecture**: Design your app's structure before writing code

<Info>
  In Plan Mode, Agent reads your project and provides guidance, but it won't make any changes to your files. When you're ready to implement, switch to Build Mode or approve a plan to start building automatically.
</Info>

## What is Build Mode?

Build Mode is the default mode where Agent writes code, modifies files, and implements features directly in your project. This is where ideas become reality.

Use Build Mode when you're ready to:

* **Create new features**: Let Agent write the code for your next feature
* **Set up your app**: Install dependencies, configure databases, and connect services
* **Fix issues**: Let Agent debug and resolve problems in your codebase
* **Refactor code**: Improve existing code structure and organization

## Using both modes together

**Plan Mode and Build Mode work best as a sequence.** Start by planning to clarify your thinking, then build with a clear direction.

<Steps>
  <Step title="Start in Plan Mode">
    Switch to Plan Mode and describe what you want to build. Agent will help you think through the requirements, suggest approaches, and identify potential challenges—all without touching your code.
  </Step>

<Step title="Generate a task list">
    Ask Agent to create a development plan. It will break down your project into specific, actionable tasks with clear priorities and dependencies.

<Step title="Review and refine">
    Review the proposed plan. Ask follow-up questions, request changes, or explore alternative approaches. Keep iterating until the plan matches your vision.
  </Step>

<Step title="Start building">
    When you're satisfied with the plan, select **Start building**. Agent automatically switches to Build Mode and begins implementing the approved tasks.

<Step title="Track progress">
    Monitor Agent's progress as it works through the task list. Each completed task creates a checkpoint, so you can review changes and roll back if needed.
  </Step>
</Steps>

## When to use each mode

<CardGroup cols={2}>
  <Card title="Use Plan Mode when" icon="lightbulb">
    * You're starting a new project and need direction
    * You want to explore different approaches
    * The task is complex and needs breaking down
    * You want to learn before implementing
    * You're unsure about the best solution
  </Card>

<Card title="Use Build Mode when" icon="hammer">
    * You know exactly what you want
    * You have a clear plan ready to execute
    * You're making quick fixes or small changes
    * You're following an approved task list
    * Speed of implementation is the priority
  </Card>
</CardGroup>

<Tip>
  **Not sure which to pick?** If your request involves multiple features or significant changes, start with Plan Mode. For simple, well-defined tasks, go straight to Build Mode.
</Tip>

## Key differences

| Feature          | Plan Mode                        | Build Mode                     |
| ---------------- | -------------------------------- | ------------------------------ |
| **Purpose**      | Brainstorm, plan, and learn      | Implement and build            |
| **Code changes** | None—read-only                   | Writes and modifies files      |
| **Output**       | Ideas, task lists, guidance      | Working code and features      |
| **Best for**     | Complex projects, exploration    | Clear tasks, implementation    |
| **Transition**   | Click "Start building" to switch | Already in implementation mode |

## Best practices

### Getting the most from Plan Mode

* **Be specific about requirements**: The more detail you provide, the better the plan
* **Ask follow-up questions**: Clarify suggestions you don't understand
* **Request examples**: Ask Agent to show code snippets or patterns
* **Discuss trade-offs**: Explore pros and cons of different approaches
* **Iterate on ideas**: Refine the plan until it feels right

### Seamless transitions

* **Review before building**: Always review the task list before approving
* **Start small**: Begin with a subset of tasks if the full plan feels overwhelming
* **Use checkpoints**: Agent creates checkpoints as it builds, so you can always roll back

## Next steps

<CardGroup cols={2}>
  <Card title="Plan Mode" icon="lightbulb" href="/replitai/plan-mode">
    Deep dive into planning features
  </Card>

<Card title="Agent" icon="robot" href="/replitai/agent">
    Explore all Agent capabilities
  </Card>

<Card title="Checkpoints" icon="clock-rotate-left" href="/replitai/checkpoints-and-rollbacks">
    Learn about rollbacks and recovery
  </Card>

<Card title="Effective Prompting" icon="message" href="/tutorials/effective-prompting">
    Write better prompts for Agent
  </Card>
</CardGroup>

---

# Source: https://docs.replit.com/replit-workspace/ports.md

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

# Ports

> Learn how ports work in Replit's cloud environment, including port forwarding, configuration, and troubleshooting for your web applications.

Because Replit runs your projects on a cloud environment, ports work differently on Replit than on your local computer. (If you need a more basic explanation of what TCP ports are, [start here](https://www.reddit.com/r/explainlikeimfive/comments/1t9s5a/eli5_what_are_ports_ex_tcp_port/).)

On a computer, you only have one layer of port management: your programs define a port that they listen to, and when traffic hits that port on your computer from the internet, they get routed to the appropriate process.

The `0.0.0.0` part is the address, or host. If a process is listening on `0.0.0.0`, that means it should listen on every network interface — which means that if another computer (on the internet) sends a request to your computer’s IP address, it will see it. So, listening on 0.0.0.0 means those processes are accessible to the public internet (if your computer is connected.)

Most programming frameworks will *not* listen on `0.0.0.0` when you’re developing, because you don’t necessarily want your work exposed to the public while you’re working on it, for privacy & security. Instead, they’ll listen on a different address — `127.0.0.1`, otherwise known as `localhost`. This means only that computer can make requests to that port.

On Replit, for a process you’re running to be accessible in the webview or via an external request, it has to have an **external port** defined. This is because the “internal port” that processes typically use is only visible from inside the sandboxed cloud environment that Replit provides. We have to connect that internal port to an externally accessible port to send the right traffic to your programs. Even if your process listens on a port typically available to the public like 0.0.0.0, we still need to bind that port to an external port.

We do this by binding external ports to specific internal ports — for example, in the diagram above, the external port `:80` is bound to the internal port `:3000`. That means any traffic that Replit App gets on port 80 will go to the internal port 3000.

This configuration is captured in the \[\[ports]] section of the .replit config file.

By default, we will bind the first port you open to the default external port 80, which will allow that process to be available at the domain without a port address (e.g. customdomain.com/ instead of customdomain.com:3000/). Additional internal ports that are opened will be bound to other available external ports (see a full list below.)

## Preview

In the Preview tool, you can change which external port the webview is rendering by clicking the domain and selecting a different port. You can also open the networking tool from the “gear” icon for more details.

## Default port

Port :80 is the “default port” for http traffic, so http traffic sent to the root domain will automatically be routed to port 80. We don’t show the port path in the url for port 80 for that reason. Ports other than :`80` will show up in the domain path (e.g. customdomain.com:4200/). (We provide TLS by default, so it will technically be over port 443, which is the default port for https. For all intents and purposes, you can treat them as interchangeable.)

## Networking tool

For more details about port config and networking, you can open the networking tool. It shows the status of ports open in your Replit App, what external port they’re bound to, and lets you add or remove configuration.

## Publishing

Autoscale and Reserved VM deployments only support a single external port being exposed, and for the corresponding internal port not to be using `localhost`. If you expose more ports, or expose a single port on localhost, your published app will fail. An easy way to make sure your Autoscale deployments work as expected is to remove all the `externalPort` entries for the ports in your config *except* the port for the service you want to interact with from the internet.

## Debugging

A common reason something might not be working as you’d expect is that while your port config looks right, your program is actually looking at a different port. For example, if your config is:

```
[[ports]]
internalPort = 3000
externalPort = 80
```

Then internet traffic to port 80 will go to internal port 3000. However, if your program is actually not listening on port 3000, but rather something else (like 8080), it will appear as if no traffic is getting through. This can happen if you switch the port in your code without switching the corresponding port in your config, or copy-paste config from one project to another.

Each framework has different default ports it listens to — for example, Flask is 5000, react is 3000, and laravel is 8000. Make sure the right port is configured!

## Preferences

We will automatically bind ports that are opened in your Replit App to available external ports when they are opened, and record that binding in the .replit config file.

However, we don’t do this by default for internal ports that open on localhost, because services that usually run on localhost typically assume that they will only be accessible on the same computer as the process that’s running (localhost ports are only visible to the same computer running the process.) This means those services are often not as secure as services built under the assumption that they’ll be available to the public internet.

You can always override this by setting the `exposeLocalhost` config option to `true` for the port you want to expose.

If you want to *always* expose localhost ports by default, you can set your “automatic port forwarding” setting in the User Settings tool to “All ports”.

If you want to *never* create config for ports that are opened, and manually control the port config for all your Replit App, you can set that to “never”.

## Supported ports

Replit App will define port 80 as the external port by default when the first port opens. A Replit App can expose 3000, 3001, 3002, 3003, 4200, 5000, 5173, 6000, 6800, 8000, 8008, 8080, 8081, as extra external ports.

Ports 22 and 8283 are not forwardable, as they are used internally.

## `[[ports]]` .replit config

Type: `{localPort, externalPort, exposeLocalhost}`

The `[[ports]]` config Allows you to configure which HTTP port to expose for your web output. By default, any exposed HTTP port with host 0.0.0.0 will be exposed as your Replit App's web output.

Extra ports can be served without overriding the default port by adding a new \[\[ports]] entry to your .replit file. You are required to specify both a localPort and externalPort entry. You can add multiple extra ports by adding multiple \[\[ports]] entries to your .replit file as defined below.

### localPort

Determines which port Replit will bind to an external port.

### externalPort

Determines which port should be exposed for that local port’s publicly accessible port.

```toml  theme={null}
[[ports]]
localPort = 3000
externalPort = 80
```

If you want to *never* expose a particular port, you can leave the `localPort` config but just not add an `externalPort`:

```toml  theme={null}
[[ports]]
localPort = 3000
```

### exposeLocalhost

Determines whether an internal port using `localhost` can be bound to an external port. Can be `true`, `false`, or null.

```toml  theme={null}
[[ports]]
localPort = 3000
externalPort = 80
exposeLocalhost = true
```

---

# Source: https://docs.replit.com/additional-resources/bounties/posting-a-bounty.md

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

# Posting and awarding a Bounty

> Learn how to post a bounty, manage applications, and review work submissions on Replit's bounty platform to get help with your projects.

If you're familiar with other freelancing platforms, Bounties will feel familiar.

### Check Cycles

Before you post a Bounty, ensure you have enough [Cycles](/getting-started/intro-replit) to pay the Bounty. Once the Bounty is listed, Replit will hold the Cycles as a deposit until the Bounty is completed or closed.

### Post a Bounty

1. On the [Bounties page](https://replit.com/bounties), click the "Create a Bounty" button in the upper-right-hand corner of the screen.
2. Fill out the "Create a Bounty" form, adding as much detail as you can so Bounty Hunters know what they're applying to do.
   Write a clear title and *pay special attention defining acceptance criteria*, as this is going to guide your Bounty Hunter's decisions and will be referred to when settling disputes.
   Set the due date, your preferred method of communication, and the number of Cycles you're offering for the work.
3. Post your Bounty!

You are not allowed to circumvent Bounties by taking projects off-platform. This includes promising payments outside the Bounties system or any future promise of work outside Bounties. You could be banned permanently for attempting to do so.

### Wait for applications

Sit back and wait for Bounty Hunters to apply!

### Pick an applicant and communicate well!

Once you have a Bounty Hunter you'd like to work with, click the "Accept Application" button. This closes the Bounty to further applications.

Now it's your turn to reach out to the Bounty Hunter you've selected! (Be sure you're both clear on deliverables and timeline expectations)

### Review the work

When your Bounty Hunter has completed the work, you'll see the following screen that allows you to view the work. After checking out the work, you can request changes or accept the work.

If you request changes, be sure to give your Bounty Hunter clear and actionable feedback within the bounds of the original Bounty.

*Please do not use this mechanism to add features or increase the project's scope - if you need another feature, make another bounty!*

Once you're happy with the work, Accept it, and the Bounty process is complete.
The code now belongs to you, and Replit will send the Cycles deposit to the Bounty Hunter.

## Bounty Poster Feature Tutorial

Check out the [Bounty Poster Feature Tutorial](https://replit.com/@replit/Bounty-Poster-Tutorial).

---

# Source: https://docs.replit.com/replit-workspace/workspace-features/preview.md

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

# Preview

> The Preview workspace tool lets you instantly view and interact with your web app.

Preview shows your web app output and offers browser developer tools and debugging
capabilities.

When you launch your web app using the **Run** button, Replit assigns it a temporary URL
that's reachable on the internet. The Preview tool renders the page just as you would
see in a browser. It also includes developer tools with functionality similar to
what you find in popular browsers.

<Note>
  Preview is the new name for Webview.
</Note>

## Features

Preview includes the following functionality to let you seamlessly test and debug your web apps:

* **Live web view**: See your app and interact with it without leaving your browser tab
* **Developer tools**: Use built-in tools to diagnose problems quickly
* **Responsive testing**: View your app in different mobile device screen sizes

## Usage

The Preview tool automatically opens when you run a web app.
You can toggle this behavior in the **User Settings** tool under the **Automatic Preview** setting.

The following instructions explain how to open Preview.

<Accordion title="How to access Preview">
  From the left **Tool dock**:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=1ce550630ae0eaa9eb8cb66e68da4f04" alt="Preview icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/preview-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=20436bd411c115d46de155a315f814bc 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f40bc6b75037a9a5af1d43cdf02d8541 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9d94f43e391be19f19a74e4d0325735e 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8224fcbc0130b63408bdb633310deaef 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0ce2006c5bc003f411e8cb86bbd72a7e 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/preview-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b67f085630c311a49f5a40d12c28b69a 2500w" /> **Preview**.

From the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool
  2. Type "Preview" to locate the tool and select it from the results.
</Accordion>

## Location bar

The location bar at the top of the **Preview** tab includes the following tools:

* **Back button**: Navigate to the previous page in the browsing history
* **Forward button**: Navigate to the next page in the browsing history
* **App domain**: View information about your Replit App's temporary URL by selecting `{...}.replit.dev`
* **Address field**: View the current URL path or enter a new path

## Browser tools

The browser tools on the right side of the location bar include the following functions:

* **Screen size**: Select from different device screen size presets to test responsive designs
* **Devtools**: Toggle the [developer tools](#Developer_tools) pane
* **New tab**: Open your web app URL in a new browser tab

## Developer tools

Developer tools, powered by the <a href="https://github.com/liriliri/eruda" target="_blank">Eruda</a> open source project, help you perform the following tasks:

* View and interact with the JavaScript console in the context of your app
* Inspect DOM elements
* Monitor network requests
* Configure display and behavior preferences

To access the developer tools, select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2f3caa243a7f4b532d079d01169ac006" alt="wrench icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/wrench.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=6083b2ed2f956cc763b52b4059980a09 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5559da339dc5f7dec13159cfd6d011a0 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7949abc4c19522248620fce84119b070 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=38e71072a319e565b88c34b90d2c665e 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=be17fc9574f32c839c41bb36b955f8d9 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/wrench.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=bdcf0259f4d1b72f875bd3cd1bab7b86 2500w" /> **Devtools**
button at the top of the **Preview** tab to toggle them.

The following sections describe the actions you can perform in each developer tools tab.

### Console

The **Console** tab displays JavaScript logs generated by your application.
In this tab, you can perform the following actions:

* **Clear output**: Remove all console output by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=66073b14bf1a1f9bf18f0b40938d92c1" height="16" width="16" alt="clear icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/clear.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=025a37680f51235e13b522159e5c1d6a 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=925d63ace9aafed633894de43838e986 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=eb6273efed1a68ee596e2a92bd401551 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=9dff38ecbbee8eaa509d1365953239fd 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=520c4f1db6467a493c0d5d4ef1d022b0 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=881b7a7a16c85b675144befb502c1ab6 2500w" /> circle with slash icon.
* **Filter output**: View console output filtered by type (All, Info, Warning, or Error).
* **Filter matching text**: Show output that matches by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ed781f51337617f8f4887cdf44ca1878" height="16" width="16" alt="filter icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/filter.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8adaef7315dbeb5f8664f84204140ff2 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c37f6d92a7d9211795e9796a54455678 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=6d5001c590f7148cfa7d5635e43c2434 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7ebc305e5954f38b326b0e09cae445ec 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7399c1010298af2dbfd88649abc4ab01 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ad648b88bf49fbd99c0f96e8ea8d0719 2500w" /> filter icon and entering the text.
* **Copy output**: Copy selected console messages by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=351697617c4c58561d250fd9786a68e3" height="16" width="16" alt="copy icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/copy.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ef1d6e87503a06753cc2e1004be8f50e 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a0dd2e82eb9923bb5080ee5602a3ef3b 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ff395a56c7f80966600f20226f86b7ff 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=1e4d57b74ca946776962011a99924eb4 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c2a6d8b590be0458e96c59fc734b99d9 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e94c2f951a0b0c8156ee8a841e7bd71f 2500w" /> copy button.
* **Run JavaScript code**: Run JavaScript code in your app's context by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ae3adda9dd3fd3948f84d06eb6cb65ed" height="16" width="16" alt="right arrow icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/arrow-right.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=55bf8075a4a3f3393e186a8a2c4be7c8 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=5c2b0a5bc4935719657010104eb582a5 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=62bbf342d5d5a2b1578538277e222468 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e5144e333bffd40c82bd39b4d2094a49 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=dc71412dbbe62e5f3c3ba9f1fe218ba5 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/arrow-right.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cd074e8feea287f334f69e19584155e 2500w" /> right angle brace. Enter the expression and select **Execute**.

### Elements

The **Elements** tab lets you inspect and modify the DOM structure of the web page.

* **View element details**: View details about the DOM element and the location in the HTML code
* **Copy output**: Copy selected console messages by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=351697617c4c58561d250fd9786a68e3" height="16" width="16" alt="copy icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/copy.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ef1d6e87503a06753cc2e1004be8f50e 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a0dd2e82eb9923bb5080ee5602a3ef3b 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ff395a56c7f80966600f20226f86b7ff 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=1e4d57b74ca946776962011a99924eb4 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c2a6d8b590be0458e96c59fc734b99d9 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e94c2f951a0b0c8156ee8a841e7bd71f 2500w" /> copy button.

Use the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8aeef14671a3f59d81c45b35b2b9aede" height="16" width="16" alt="select icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/select.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e5ccda2cbc2423b813db9b695340a932 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=710cb7a14263cba1fb1589de88672eec 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a543abf4a0ca6295cfe68e7e815e238f 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f4e4cd2b07b5b719d2c25dee2f699f6e 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2cb44dd9b402456484e36ef10055401c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/select.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f553862df5969c9af9dfae0c7f0762bc 2500w" /> arrow selection to toggle selection mode.
After entering selection mode, select an element on the web page.
The HTML and CSS for that element should appear in the Elements tab.

### Network

The **Network** tab monitors requests initiated by the web page.
In this tab, you can perform the following actions:

* **Track requests**: View all network requests initiated by your app. Select a request to view details.
* **Filter**: View matching results by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ed781f51337617f8f4887cdf44ca1878" height="16" width="16" alt="filter icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/filter.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8adaef7315dbeb5f8664f84204140ff2 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c37f6d92a7d9211795e9796a54455678 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=6d5001c590f7148cfa7d5635e43c2434 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7ebc305e5954f38b326b0e09cae445ec 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7399c1010298af2dbfd88649abc4ab01 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ad648b88bf49fbd99c0f96e8ea8d0719 2500w" /> funnel icon to show results that match your text. Enter an empty filter to clear it.
* **Copy**: Copy storage information by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=351697617c4c58561d250fd9786a68e3" height="16" width="16" alt="copy icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/copy.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ef1d6e87503a06753cc2e1004be8f50e 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a0dd2e82eb9923bb5080ee5602a3ef3b 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ff395a56c7f80966600f20226f86b7ff 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=1e4d57b74ca946776962011a99924eb4 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c2a6d8b590be0458e96c59fc734b99d9 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e94c2f951a0b0c8156ee8a841e7bd71f 2500w" /> copy button.

### Resources

The **Resources** tab shows assets loaded by the page and browser storage, such as cookies and local storage.
You can view and refresh lists for the following asset types:

* JavaScript files
* Stylesheets
* Iframes
* Images

In this tab, you can perform the following actions:

* **View storage**: Review local storage, session storage, and cookies.
* **Filter**: View matching results by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ed781f51337617f8f4887cdf44ca1878" height="16" width="16" alt="filter icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/filter.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8adaef7315dbeb5f8664f84204140ff2 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c37f6d92a7d9211795e9796a54455678 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=6d5001c590f7148cfa7d5635e43c2434 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7ebc305e5954f38b326b0e09cae445ec 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7399c1010298af2dbfd88649abc4ab01 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/filter.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ad648b88bf49fbd99c0f96e8ea8d0719 2500w" /> funnel icon to show results that match your text. Enter an empty filter to clear it.
* **Clear**: Delete all data for that storage type by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=66073b14bf1a1f9bf18f0b40938d92c1" height="16" width="16" alt="clear icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/clear.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=025a37680f51235e13b522159e5c1d6a 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=925d63ace9aafed633894de43838e986 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=eb6273efed1a68ee596e2a92bd401551 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=9dff38ecbbee8eaa509d1365953239fd 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=520c4f1db6467a493c0d5d4ef1d022b0 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/clear.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=881b7a7a16c85b675144befb502c1ab6 2500w" /> clear button.
* **Delete selected**: Remove storage items by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=74c6bd9909a55d49974da517e817518e" height="16" width="16" alt="delete icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/delete.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a4b1891d64f653e822bf49c1c07ffa77 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=b82efad0eca16e08c692d18b12d2e4e5 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0e0bbf7e1eb7c7862b605d545036313e 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=bd45f5e57bf101e37cbd126083d4f733 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=70082ebb03f90e07b041777b90b032d5 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/delete.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=bd94acd362159e68edb7afac4072073e 2500w" /> "X" icon.
* **Copy**: Copy storage information by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=351697617c4c58561d250fd9786a68e3" height="16" width="16" alt="copy icon" data-og-width="1024" data-og-height="1024" data-path="images/icons/copy.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ef1d6e87503a06753cc2e1004be8f50e 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a0dd2e82eb9923bb5080ee5602a3ef3b 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ff395a56c7f80966600f20226f86b7ff 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=1e4d57b74ca946776962011a99924eb4 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=c2a6d8b590be0458e96c59fc734b99d9 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/copy.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e94c2f951a0b0c8156ee8a841e7bd71f 2500w" /> copy button.

### Settings

The **Settings** tab allows you to customize the developer tools' appearance and behavior.
This tab includes customization options for the following:

* **Tool settings**: Customize options that apply to each tool tab
* **JavaScript controls**: Specify JavaScript behavior options, such as turning it off to test how your app behaves
* **Display preferences**: Change the theme, panel size, transparency, and other behavior of the developer tools

---

# Source: https://docs.replit.com/cloud-services/deployments/private-deployments.md

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

# Private Deployments

> Control access to your published app without any code configuration.

Private published apps add authentication to your Replit Apps without requiring any
code changes. When enabled, Replit restricts access to your app using a Replit login screen.
Only logged in members of your Organization that have access can use the site.

<Note>
  Private Deployments are available only to Teams subscribers. Your Replit App
  must be in a Team workspace to use Private Deployments.
</Note>

Restricted app access is useful for project types including the following:

* Internal tools
* Apps in the beta testing phase
* Apps that access sensitive information

## Features

Private published apps provide the following features:

* **Access Management**: Grant or restrict app access to any users or groups within your Replit Team
* **Zero Code Configuration**: Seamless authentication for your app with no code changes required

## Usage

When publishing your Replit App from a Teams workspace, you can choose between a **Public** or **Private** published app.
The following sections describe how to set up and manage your Private published apps.

<Info>
  Scheduled Jobs omit this option because they do not listen for incoming
  traffic.
</Info>

<Accordion title="Create a Private Published App">
  1. Select the user menu at the top left of the Home screen to view your workspaces.
  2. Verify or select the Team workspace in which to publish your Replit App.
  3. Open the Replit App you want to publish.
  4. Toggle the **Private Deployment** option to the "on" position as shown below:
     <img src="https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/deployments/private-deployments/private-deployment-toggle-on.png?fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=2ddb81101b45ef44be8f08653bfb893b" alt="Private Deployment toggle in the on position" data-og-width="1340" width="1340" data-og-height="146" height="146" data-path="images/deployments/private-deployments/private-deployment-toggle-on.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/deployments/private-deployments/private-deployment-toggle-on.png?w=280&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=b9e305a37156ddf902ad88fe97a50ae7 280w, https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/deployments/private-deployments/private-deployment-toggle-on.png?w=560&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=3afd8d1330e8e84a1b8fb6ee9dc9c1c9 560w, https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/deployments/private-deployments/private-deployment-toggle-on.png?w=840&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=f2361847bb258728a440baca3f08b147 840w, https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/deployments/private-deployments/private-deployment-toggle-on.png?w=1100&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=72fcc3f95d6377e4559d42113c97bc21 1100w, https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/deployments/private-deployments/private-deployment-toggle-on.png?w=1650&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=12dee6895279b2880b0a4a67361b76a5 1650w, https://mintcdn.com/replit/jSmYU1wBTvl8UMyc/images/deployments/private-deployments/private-deployment-toggle-on.png?w=2500&fit=max&auto=format&n=jSmYU1wBTvl8UMyc&q=85&s=d1a60e98f70776a6d653e2e6891352ff 2500w" />
  5. After setting the publishing options, select **Publish** to confirm the publishing.
</Accordion>

<Accordion title="View your Private Published Apps">
  1. Select the user menu at the top left of the Home screen to view your workspaces.
  2. Verify or select the Team workspace in which to publish your Replit App.
  3. From the Home screen, select <img class="svg-icon" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=df3fa2573b451c54591523c9d9111db1" alt="Deployments icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/deploy-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=115e9383e0350a6ef201a41f78f8a19a 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=667b93ae66d0b69569409fb90d9fc280 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ae927e5aadcb7a470ad726f0acb0f782 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=16ee8f7b3d9db6b4f74ea8c2ebb6730f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ad04a5984543c13895fd30182294ec0a 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=2449268bce371256727b17027eb180f3 2500w" /> **Deployments** from the left dock.
     You should see a list of the Team's published apps similar to the screenshot below:

<Accordion title="Edit existing published app visibility">
  1. Select the published app and open the Deployment tool.
  2. In the Deployment tab, select **Edit commands and secrets**, toggle the setting on or off.
  3. Select **Publish** to confirm the publishing.
</Accordion>

## Next steps

To learn more about Private published apps, see the following resources:

* [Replit App Access Management](/teams/identity-and-access-management/repl-access-management): Manage access to your Private published app
* [Billing for Teams](/billing/teams-billing/overview): View pricing for Replit Teams

---

# Source: https://docs.replit.com/cloud-services/storage-and-databases/production-databases.md

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

# Production Databases

> Learn how to safely manage and publish database changes in production environments.

Production databases are dedicated for your live data that powers your published Replit Apps. Unlike development databases where you experiment and build features, production databases keep your real-world data safe while you continue building, ensuring reliability, and performance.

Understanding how to work with production databases is essential for building robust applications that can evolve and scale without disrupting your users.

## What are Production Databases?

Production databases are the live, operational databases that serve real users and their data. They differ significantly from development databases in several key ways:

### Production vs Development Databases

| Aspect          | Development Database                     | Production Database                                                  |
| --------------- | ---------------------------------------- | -------------------------------------------------------------------- |
| **Purpose**     | Experimentation and feature development  | Serving real users and storing business data                         |
| **Data**        | Test data, dummy records, small datasets | Real user data, business-critical information                        |
| **Performance** | Optimized for development speed          | Optimized for reliability and user experience                        |
| **Changes**     | Frequent schema changes, rapid iteration | Careful, planned changes via data migrations and rollback strategies |
| **Downtime**    | Acceptable during development            | Must be minimized or eliminated                                      |
| **Backup**      | Optional for testing                     | Critical for business continuity                                     |

<Note>
  Agent is not able to modify the production database, this restriction is in place so that your production database stays safe.

Agent can make edits to your development database. At the time of publishing, any changes you’ve made with the agent to the structure of your development database (i.e. adding and deleting columns / tables) will be applied over to your production database.

You are manually able to edit your production data at anytime by going to database pane > production database > My data and toggling **Edit**
</Note>

## Database Technology and Infrastructure

Production databases in Replit are built on the same robust foundation as our standard [SQL Database](/cloud-services/storage-and-databases/sql-database) offering. They use PostgreSQL 16 hosted on [Neon](https://neon.tech), providing enterprise-grade reliability and performance.

### Relationship to Replit SQL Database

Production databases share the same core technology stack as Replit's SQL Database:

* **PostgreSQL 16**: Industry-standard relational database with advanced features
* **Neon Infrastructure**: Serverless database platform that provides automatic scaling and cost optimization
* **Built-in Tools**: Access to SQL runner, Drizzle Studio, and visual data management tools
* **Environment Variables**: Secure connection management through automatically generated credentials

<Info>
  For detailed information about database features, connection setup, and
  technical specifications, see the [SQL
  Database](/cloud-services/storage-and-databases/sql-database) documentation.
</Info>

## Making safe changes to your production database

When you publish updates to your Replit App that include database changes, you may encounter scenarios where careful planning is essential to avoid downtime or data loss.

### Non-Backward Compatible Changes

Some database changes can break compatibility with your existing application code. These changes require special handling to ensure smooth deployments.

<Info>
  You may notice a brief downtime for your published app during publishing. This downtime occurs because database changes sometimes require stopping your app temporarily to prevent conflicts and ensure safe updates. Stopping the app during these updates helps protect your data from loss or corruption while the changes are applied.
</Info>

### Common Non-Backward Compatible Changes

The following types of changes typically require careful publishing strategies:

* **Removing database columns** that your application code still references
* **Changing column data types** in ways that existing code cannot handle
* **Adding required fields** without default values to existing tables
* **Renaming tables or columns** that break existing queries
* **Modifying constraints** that could reject existing application logic

## Deployment Previews

Before publishing database changes to production, Replit provides tools to test your changes safely in a preview environment.

A deployment preview is a temporary, isolated copy of your production environment where you can test database changes and application updates before they affect real users.
This preview environment mirrors your production setup but operates independently.
It can help you catch potential issues early and ensure your changes work correctly before going live.

Testing your deployment in the preview environment is crucial for identifying issues before they impact your users. Follow these steps to ensure your database changes work correctly:

**1. Functional Testing**

* Verify that your app still works properly with the database changes applied
* Test all major user flows to ensure functionality remains intact
* Check that data displays correctly after the schema modifications

**2. Data Integrity Verification**

* Confirm that existing data has been properly migrated or transformed
* Verify that new fields contain expected values or appropriate defaults
* Test edge cases where data might not conform to new constraints

**3. Performance Validation**

* Monitor query response times in the preview environment
* Check that new indexes are being used effectively
* Verify that the changes don't introduce performance regressions

## Point-in-time restore

For production databases, you can restore your database to a specific point in time using the point-in-time restore feature.

Note that this will only restore your production database to the state it was at the time of the checkpoint. It will not restore your app to the state it was at the time of the checkpoint.

To restore your app to the state it was at the time of the checkpoint, you will need to roll back to the checkpoint using the [rollback feature](/replitai/checkpoints-and-rollbacks/) and republish your app.

## Billing and resource usage

Production databases are billed based on usage through Neon, a serverless database provider.

Neon's serverless capabilities include the following:

* Zero infrastructure setup or maintenance
* Automatic scaling to handle your usage needs
* Compute time billing only when the database is active

The database enters an idle state after five minutes of inactivity, pausing compute time billing.
It instantly reactivates when it receives a query.

<Tip>
  To learn more about this serverless database technology, see the
  <a href="https://neon.tech/docs/introduction/compute-lifecycle" target="_blank">Neon Compute lifecycle</a> documentation.
</Tip>

Replit provides real-time tracking of your database usage.
You can view the breakdown of compute time and storage usage for the current Replit App
or for each Replit App on your account.

<Accordion title="How to access database usage">
  To view your database compute time and storage usage for the current billing period, follow the steps below:

From the **Replit Database** tool:

1. Navigate to the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3cf383ef9ff4e8b5bad4792121dd6769" alt="PostgresSQL database icon" data-og-width="24" width="24" data-og-height="24" height="24" data-path="images/icons/postgres.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=17b80617d665ef3812021c0fdb3b43cf 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=10bdd7a13380255ddf3af617d08c9220 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a5cacd83bc584eca88ddf943cc98b52f 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cfa8597cf0b3622644faedce574dae7d 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5cf63513422bdc89684306e71bc0d267 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=14b4db671a736545614e0140edff2fdd 2500w" /> **Replit Database** tool in your workspace
  2. In the database dropdown menu, select **Production**
  3. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=39c5a0a4872b7416378ddad9f2bef608" alt="gear icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/settings-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e0a36e6a9a2078c02467d2abf0b8ba9e 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3be97f139b63f478d536ccaa51518c9a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4eba230fefbe9836ffd37672275aa7d1 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=97e5099639faf4a5490d8e000c00149a 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4d9552209cee3306d2bc2a02e747ecb6 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d84a81284c0c9af295e0b86273d5c291 2500w" /> **Settings** tab
  4. The **Storage Used** section shows the total storage used by your database for the current billing period.

To view for every Replit App on your account from the **Account resource usage** section, follow the steps below:

1. Select **View account resource limits** to open the **Usage** page
  2. Scroll to **Resource usage** section
  3. Expand the **PostgresSQL Storage** and **PostgresSQL Compute** rows for details on each Replit App
</Accordion>

To learn how Replit charges for database usage, see [Deployments and Database Billing](/billing/about-usage-based-billing#databases).

## Troubleshooting Common Issues

### Publishing Failures

If your publishing fails due to database issues:

1. **Check the publishing logs** for specific error messages about database connectivity or schema conflicts
2. **Verify your database connection credentials** are correct and accessible from the published app environment
3. **Review recent schema changes** for potential conflicts with existing application code
4. **Test your changes in a preview environment** before attempting to republish

## Removing a production database

<Warning>
  The remove action is irreversible after a retention period of 7 days. Make sure to back up any important data before proceeding.
  Databases have a 7 soft delete period where databases can be restored. Reach out to support if you need assistance. After 7 days, the database is hard deleted and will be unrecoverable.
</Warning>

If you no longer need a database for your Replit App, you can remove it and all its data.

<Accordion title="How to remove a database">
  From the **Replit Database** tool:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=39c5a0a4872b7416378ddad9f2bef608" alt="gear icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/settings-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e0a36e6a9a2078c02467d2abf0b8ba9e 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3be97f139b63f478d536ccaa51518c9a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4eba230fefbe9836ffd37672275aa7d1 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=97e5099639faf4a5490d8e000c00149a 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4d9552209cee3306d2bc2a02e747ecb6 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d84a81284c0c9af295e0b86273d5c291 2500w" /> **Settings** tab
  2. Select **Remove database** and confirm by selecting **Yes, Remove database**
</Accordion>

## Next Steps

To learn more about database management on Replit:

* [SQL Database](/cloud-services/storage-and-databases/sql-database): Learn about Replit's managed PostgreSQL database service
* [Key-Value Store](/cloud-services/storage-and-databases/replit-database): Explore Replit's simple key-value database option
* [Deployments](/cloud-services/deployments/about-deployments): Understand how deployments work with database changes
* [Object Storage](/cloud-services/storage-and-databases/object-storage): Learn about storing files and assets in the cloud

---

# Source: https://docs.replit.com/teams/public_profiles.md

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

# Public Profiles

> Learn how to create and customize your organization's public profile on Replit to showcase your brand, products, and public Replit Apps to the community.

## Overview

Public profiles on Replit enable Organizations to showcase their brand, products, libraries, or templates to a broader audience. Here are some key use cases for public profiles:

* **Developer Relations**: Developer-centric companies can share documentation, examples, demos, and self-hosted solutions.
* **Pre-Sales and Sales Flows**: Organizations can share content with clients or customers to demonstrate how something works during introductory calls.
* **Building Brand Awareness**: Companies can tap into Replit’s community by promoting their content and increasing visibility.

## Creating a public profile

Each Organization has a public profile, which will not have any information other than the Organization name by default.

To enable the profile page, an Organization admin needs to navigate to the Organization profile settings page and switch the profile visibility to public. This allows them to manage the contents of the public profile.

Once the profile visibility is set to public, admins can update the contents of the public profile.

## Profile page content

* **Avatar** - Upload your brand logo image to represent your organization.
* **Social Links** - Promote your website and cross-link to your social profiles.
* **Bio** - Describe your organization to give visitors a clear understanding of who you are.
* **Public Replit Apps** - Showcase all the Replit Apps your organization has made public to the Replit community.

## Accessing the profile

Once you create public Replit Apps, each Replit App has its own cover page, which is publicly accessible.

Users can navigate to your Organization's public profile by hovering over the organization name and selecting the logo or name. This is how the finalized public profile will appear.

## Creating public Replit Apps

In the Replit App creation modal, you will find two options:

* **Internal to (Organization Name)** - Creates a private Replit App that is accessible only within the organization, based on the defined access rules.
* **Public to Replit** - Creates a public Replit App that is accessible to anyone.

* Public visibility can also be managed from the Access modal within the workspace.

---

# Source: https://docs.replit.com/extensions/publish.md

# Publish your Extension

> Learn how to prepare and publish your Replit Extension to the store, including icon design, build configuration, and the review process.

After you've finished building your Extension, it's time to publish it to the store for all to use. There are a few steps you will need to complete before you release it. Extensions are expected to be a bundle that can be statically served.

## Design an Icon

Extensions need to have a clean, visible, and memorable icon before being added to the store. We have a [Figma template](https://www.figma.com/community/file/1220063901895293170) you can use to design your own, or you can use the Icon Generator to create one for you.

## Building

If you use a framework like React, you will need to build a static output folder which renders the extension's contents statically. The default template already has the build steps configured, just confirm that it works by running the build command in the shell.

If you are using HTML/CSS/JS, set the build command to a single space `" "` and set the output directory to your Replit App's base URL `.`.

### Vite

Running `npx vite build` will create a static folder `dist`. Set `build` to `vite build` in your `package.json` file and set the extension's build command to `npm run build`. Next, set the output folder to `dist`.

### Next.js

Next.js supports building a [static HTML export](https://nextjs.org/advanced-features/static-html-export), but some features such as server-side rendering and API routes are not supported.

In `next.config.js`, set the `output` property to `"export"`.

The required steps to build the static output folder consist of:

1. Deleting the `.next` folder
2. Building in development mode
3. Running `next export`

All three steps can be collapsed into a single bash command, which can be set as the `"export"` command in `package.json`.

```json  theme={null}
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "export": "rm -rf .next && export NODE_ENV=development && yarn build && next export"
},
```

Running `next export` will create a static folder `out`. In the Extension Devtools, set the build command to `npm run export` and the output folder to `out`.

## Review

After your extension has been published, you must wait for a Replit staff member to review it before it can be put on the store.

---

# Source: https://docs.replit.com/getting-started/quickstarts/remix-an-app.md

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

# Remix an App

> Learn how to create a **Remix** as a starting point for your app. A Remix is a Replit App started from a publicly shared Replit App.

## Create your Remix

⏰ *Estimated time: 1 minute*

Follow the steps in this guide to create a Remix of the following solar system visualization:

<Tip>
  Try the published app at [Solar System Visualization Demo Replit
  App](https://replit.com/@matt/Solar-System-Visualization).
</Tip>

<Steps>
  <Step title="Remix the app">
    Open the [Solar System Visualization](https://replit.com/@matt/Solar-System-Visualization?v=1) Replit App in your browser
    and select **Remix Template**:

<Step title="Complete the app details">
    In the **Remix App** dialog, select **Remix App** to continue. You can edit these details later.

<Step title="Start the app">
    Select **Run** to start the app:

Navigate to the **Preview** tab to confirm the app displays animated planets.

<Step title="Interact with the app">
    You now have a fully functioning Remix that you can interact with and iteratively improve.

To interact with the visualization, try the following controls in the **Preview** tab:

* Drag to rotate the view
    * Scroll to zoom in and out
    * Click a planet to select it
    * Select **Planet info** while a planet is selected to view information about it
    * Select **Pause Rotation** or **Start Rotation** to toggle the animation

Select Earth and then select **Planet Info** to read facts about it.
  </Step>
</Steps>

## Explore

Try the tasks in the following sections to learn how **Agent**,
Replit's AI-powered tool, can help you build your app.

Agent specializes in building projects from scratch and making changes to a Replit App. Use [Fast mode](/replitai/fast-mode) for quick, targeted edits.

<Note>
  Agent relies on popular AI models and occasionally produces
  results that don't fulfill your request. If you encounter issues, follow up
  with a prompt that describes the error messages or the incorrect behavior.
  Alternatively, you can use the Rollback feature to restore your Replit App to
  a previously known working state.
</Note>

The following sections show examples of using Agent to enhance this Remix.

### Add a feature using Agent

<Tip>
  Agent is now available on all projects, including Remixes. Use [General Agent](/replitai/general-agent) to work with any framework or project type.
</Tip>

Follow these steps to add a complex feature to your Remix using Agent:

<Steps>
  <Step title="Craft a prompt">
    Navigate to the **Agent** tab.

Enter the following prompt in the text area:

```text  theme={null}
    Add a button that toggles an autopilot flyby mode.
    ```

After you submit the prompt, Agent might pause and ask for clarification or confirmation. Respond in the text area.
  </Step>

<Step title="Test the feature">
    Navigate to the **Preview** tab to see Agent's updates to the visualization.

Try toggling the added autopilot button.

Since the initial prompt excluded information such as speed and position of the flyby, the result might not
    match your expectations.
  </Step>

<Step title="Refine the feature">
    If the feature differs from your expectations, continue the conversation by entering the following prompt
    in the **Agent** text area:

```text  theme={null}
    Change the autopilot to slowly and continuously fly between planets.
    ```

After Agent completes the feature, the **Preview** might resemble the following image:

To undo these changes, select **Rollback to here** in the Checkpoint created immediately
    after starting the plan for the change in the **Agent** tab.

Learn more about [Checkpoints and Rollbacks](/replitai/checkpoints-and-rollbacks).
  </Step>
</Steps>

### Add a feature using Fast mode

Follow these steps to add a quick enhancement to your Remix using [Fast mode](/replitai/fast-mode):

<Steps>
  <Step title="Craft a prompt">
    Switch to [Fast mode](/replitai/fast-mode) and enter the following prompt:

```text  theme={null}
    Add a button that changes the planet orbit speeds to 0.5x, 1x, and 2x.
    ```

After you submit the prompt, Agent describes the changes it wants to make and lets you review the code changes before proceeding.
    Select **Preview code changes** to view a comparison of the current code and the updates.
  </Step>

<Step title="Test the feature">
    Select **Apply all** and approve any following confirmations to continue.

Navigate to the **Preview** tab to check the result.

After Agent completes the feature, the **Preview** might resemble the following image:

To undo these changes, use the Rollback feature in the **Agent** tab.
  </Step>
</Steps>

## Continue your journey

Now that you've completed this tutorial, you're ready to explore more possibilities with your Replit App.
Try the following next steps to enhance your skills:

* Ask Agent to implement a new complex feature or to check the code for bugs.
* Use [Fast mode](/replitai/fast-mode) for quick, targeted edits and code explanations.
* View and edit the Replit App source code and configuration in the **Files** tab.
* Share your Replit App for others to remix. To learn more, see [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public).

---

# Source: https://docs.replit.com/teams/identity-and-access-management/repl-access-management.md

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

# Access Management

> Learn how to control access and visibility settings for Replit Apps through the workspace interface, including group permissions and user roles.

Replit App access may be managed either from the [group permissions interface](/teams/identity-and-access-management/groups-and-permissions#repl-permissions), or from the workspace using the “Access” button in the header. Users with edit access can change the role for existing groups or individuals, or add roles to new groups or users. All users with access to the Replit App workspace are able to see who has access to the Replit App, even if they can't manage it.

To grant access to a group or member, use the search to locate them by name or username.

After selecting the result, a dropdown for the role selection will appear. After choosing the role, the group or user will be added to the "Groups with access" or "People with access" sections below.

This popover also controls whether the Replit App is private or public, using selector in the bottom left corner. If the Replit App is marked as internal, it is private within the organization. Only users with access can see that it exists. If the Replit App is public, anyone on Replit (regardless of whether they are logged in) can see, but not edit, the Replit App.

---

# Source: https://docs.replit.com/extensions/api/replDb.md

# replDb API

> Learn how to use ReplDB, a key-value store for Replit Apps, to persist data in your extensions through simple read and write operations.

ReplDB is a simple key-value store available on all replit apps by default. Extensions can use ReplDB to store replit apps specific data.

## Usage

```ts  theme={null}
import { replDb } from '@replit/extensions';
```

## Methods

### `replDb.set`

Sets the value for a given key. Required [permissions](./manifest#scopetype): `repldb:read`, `repldb:write`.

```ts  theme={null}
set(args: { key: string, value: any }): Promise<void>
```

### `replDb.get`

Returns a value associated with the given key. Required [permissions](./manifest#scopetype): `repldb:read`.

```ts  theme={null}
get(args: { key: string }): Promise<string | { error: null | string }>
```

### `replDb.list`

Lists keys in the replDb. Accepts an optional `prefix`, which filters for keys beginning with the given prefix. Required [permissions](./manifest#scopetype): `repldb:read`.

```ts  theme={null}
list(args: { prefix: string }): Promise<{ keys: string[] } | { error: string }>
```

### `replDb.del`

Deletes a key in the replDb. Required [permissions](./manifest#scopetype): `repldb:read`, `repldb:write`.

```ts  theme={null}
del(args: { key: string }): Promise<void>
```

---

# Source: https://docs.replit.com/replitai/replit-ai-integrations.md

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

# Replit AI Integrations

> Use AI models from providers like OpenAI, Anthropic, Google, and OpenRouter without requiring your own developer account or API key.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

Replit AI Integrations makes it easy to build AI-powered applications. Get started with models from OpenAI, Anthropic, Google, and OpenRouter immediately—no developer account setup, no API key management. Replit handles everything for you.

## What is Replit AI Integrations?

Replit AI Integrations provides managed access to AI models from leading providers. Build chat apps, content generators, and AI-powered tools without leaving Replit. No need to create external developer accounts, find your API credentials, or manage separate billing.

When you use Replit AI Integrations, Replit manages the provider credentials and bills you at the public API price. Your usage is billed to your Replit credits and appears on your [usage page](/billing/managing-spend), broken down by Existing Replit App.

## Features

Replit AI Integrations streamlines AI development with built-in access and transparent billing:

* **Zero setup required**: No developer accounts or API keys needed to get started
* **Managed credentials**: Replit handles provider authentication and credential management
* **Transparent billing**: Pay public API prices, billed to your Replit credits
* **Usage tracking**: View your usage per Existing Replit App on your usage page
* **Cross-stack support**: Works across all programming languages and frameworks
* **Optional BYOK**: Bring your own API key if you prefer to use your own credentials

## Getting started

### Using Replit-managed credentials

When you mention AI functionality or specific providers (OpenAI, Anthropic, Google, or OpenRouter) in your prompt, Agent defaults to using Replit AI Integrations:

<AiPrompt>
  Create a web app that uses OpenAI to summarize articles
</AiPrompt>

You can tell which integration is being used by looking for **"OpenAI (Replit managed)"**, **"Anthropic (Replit managed)"**, **"Google (Replit managed)"**, or **"OpenRouter (Replit managed)"** in your initial prompt response. This indicates Agent will use Replit's credentials instead of requiring your own API key.

**For initial builds**: When you submit an initial prompt to create a new app with AI functionality, Replit AI Integrations is matched automatically. Agent will start building with Replit's managed credentials right away.

**For existing Replit Apps**: When Agent detects you want to add AI functionality to an existing Replit App, Agent will explicitly tell you in the Workspace that it's asking to use Replit AI Integrations instead of your own API key. You'll see a confirmation prompt:

Click "Approve" to continue with Replit-managed credentials, or "Dismiss" if you prefer to use your own API key.

Your usage is automatically tracked and billed to your Replit account at the public API price.

### Bringing your own API key

If you prefer to use your own credentials from OpenAI, Anthropic, Google, or other providers instead of Replit AI Integrations, you have a few options:

**For initial builds**: Include in your prompt that you want to use your own API key:

<AiPrompt>
  Create a web app that uses OpenAI to summarize articles. Use my own OpenAI API key.
</AiPrompt>

You'll see the provider name (without "Replit managed") in the response, indicating Agent will request your API key.

**For existing Replit Apps**: When Agent tells you it wants to use Replit AI Integrations and shows the confirmation prompt, click "Dismiss" instead of "Approve."

In both cases, Agent will build through the first checkpoint before requesting your API key. This allows Agent to set up your project structure first, then pause to collect your credentials.

When you use your own API key, you're billed directly by the provider rather than through Replit credits.

## Viewing your usage

All Replit AI Integrations usage appears on your [usage page](/billing/managing-spend) alongside your other Replit usage. Usage is broken down by Existing Replit App so you can see exactly where your AI spend is going.

## Supported providers

Replit AI Integrations currently supports:

* **OpenAI**: Multimodal models for text generation, reasoning, and audio. Supports chat completions, responses, image generation, audio transcription (`gpt-4o-transcribe`, `gpt-4o-transcribe-mini`), and audio output (`gpt-4o-audio`, `gpt-4o-audio-mini`).
* **Anthropic**: Multimodal models for reasoning, writing, and coding. Supports the Messages API and interactions with web search.
* **Google (Gemini)**: Multimodal models for text generation and reasoning. Supports text and image generation.
* **OpenRouter**: Access to models from providers such as Microsoft (Phi series), Meta (Llama series), Mistral, Qwen, DeepSeek, Nvidia, Amazon, and more.

<Note>
  Replit AI Integrations supports **text, image, and audio output**. Video output is not supported. If you need video generation capabilities, you'll need to use your own API key from a provider that offers them.
</Note>

## OpenRouter privacy and availability

When you use OpenRouter through Replit AI Integrations, your requests are sent with specific privacy settings to protect your data. Understanding these settings is important because they may affect which models are available to you.

### Privacy settings for self-serve users

For individual and team users, Replit configures OpenRouter requests with the following privacy defaults:

* **Paid endpoints training disabled**: Your data will not be used for training by paid model providers
* **Free endpoints training enabled**: Free model providers may train on your prompts and completions
* **Free endpoints publishing enabled**: Free providers may publish your prompts and completions to public datasets
* **Input/output logging disabled**: Your requests and responses are not logged by OpenRouter for the 1% billing discount
* **Analytics cookies disabled**: Analytics cookies are not used

These settings prioritize your privacy while enabling access to the widest range of models. However, **some models may not be available** if they require different privacy settings than those configured above.

### Privacy settings for Enterprise

For Enterprise organizations, Replit enforces stricter privacy controls:

* **Zero Data Retention (ZDR) endpoints only**: Only models with a Zero Data Retention policy are available
* All privacy settings listed above for self-serve users also apply
* This ensures that Enterprise requests are only routed to endpoints that do not retain any data

Because Enterprise enforces ZDR endpoints only, **the selection of available models will be more limited** compared to self-serve users. This trade-off ensures the highest level of data privacy for enterprise workloads.

## Teams and Enterprise

For Teams and Enterprise organizations, Replit AI Integrations access is disabled by default. Organization admins can control access from the organization settings page:

1. Navigate to your organization settings
2. Find the Replit AI Integrations section
3. Toggle access on or off for your organization

When enabled, organization members can use Replit AI Integrations in their apps. All usage is tracked and billed to the organization account. When disabled, members will need to provide their own API keys to use AI model providers.

## Use cases

Build powerful AI applications across any stack:

* **Content generation**: Summarize articles, generate descriptions, create content
* **Analysis and insights**: Extract key information, analyze sentiment, classify text
* **Conversational interfaces**: Build chatbots and AI assistants
* **Text transformation**: Translate, rewrite, or format content
* **Code assistance**: Generate code snippets, explain algorithms, review code

## FAQ

<AccordionGroup>
  <Accordion title="How is this different from other Agent integrations?">
    Other Agent integrations let you connect to external services and APIs. Replit AI Integrations specifically provides managed access to AI model providers like OpenAI, Anthropic, Google, and OpenRouter, with Replit handling credentials and billing so you can start building immediately.
  </Accordion>

<Accordion title="Do I need a paid Replit account?">
    Yes. Replit AI Integrations is available for paying users.
  </Accordion>

<Accordion title="What models are available?">
    Replit AI Integrations supports models from leading AI providers:

|                |                                                               |
    | -------------- | ------------------------------------------------------------- |
    | **OpenAI**     | GPT models for text generation, reasoning, and image creation |
    | **Anthropic**  | Claude models for reasoning, writing, and coding              |
    | **Google**     | Gemini models for multimodal understanding                    |
    | **OpenRouter** | 200+ models from Meta, Mistral, DeepSeek, Qwen, and more      |

<Tip>
      For the complete and up-to-date model catalog, see [OpenRouter's model list](https://openrouter.ai/models).
    </Tip>
  </Accordion>

<Accordion title="How is billing calculated?">
    You're billed at the public API price set by the provider. Costs are deducted from your Replit credits and appear on your usage page.
  </Accordion>

<Accordion title="Can I use my own API key?">
    Yes. You can provide your own API key using Replit secrets. When you use your own key, you're billed directly by the provider instead of through Replit.
  </Accordion>

<Accordion title="Does this work in all programming languages?">
    Yes. Replit AI Integrations works across all stacks and programming languages supported on Replit.
  </Accordion>

<Accordion title="Why is this feature not available for my organization?">
    For Teams and Enterprise, Replit AI Integrations access is disabled by default for security and control. Your organization admin can enable it from the organization settings page.
  </Accordion>

<Accordion title="How do I know if I'm using Replit AI Integrations?">
    Look for "OpenAI (Replit managed)", "Anthropic (Replit managed)", "Google (Replit managed)", or "OpenRouter (Replit managed)" in Agent's response. This indicates you're using Replit AI Integrations. If you see just the provider name without "Replit managed," Agent will request your own API key.
  </Accordion>

<Accordion title="What happens when I use Replit AI Integrations?">
    When you mention AI functionality or a specific provider (OpenAI, Anthropic, Google, or OpenRouter), Agent defaults to Replit AI Integrations. For new apps, Agent starts building immediately using Replit's credentials. For existing Replit Apps, Agent will tell you in the Workspace that it's asking to use Replit AI Integrations and show a confirmation prompt. Either way, your app can make API calls to the provider, and usage is tracked and billed to your Replit account.
  </Accordion>

<Accordion title="When do I see the confirmation prompt?">
    You'll see a confirmation prompt when adding Replit AI Integrations to an existing Replit App. Agent will explicitly tell you it's asking to use Replit AI Integrations instead of your own API key. For initial builds when creating a new app, Replit AI Integrations is matched automatically without a pop up.
  </Accordion>

<Accordion title="When does Agent ask for my API key if I want to use my own?">
    Agent will build through the first checkpoint before requesting your API key. This lets Agent set up your project structure first, then pause to collect your credentials before continuing.
  </Accordion>

<Accordion title="What types of models & outputs are supported?">
    Replit AI Integrations supports text, image, and audio output. Audio capabilities include transcription (speech-to-text) via `gpt-4o-transcribe` and `gpt-4o-transcribe-mini`, and audio generation via `gpt-4o-audio` and `gpt-4o-audio-mini`. Video output is not supported. If your application requires video generation capabilities, Agent will direct you to use your own API key from a provider that offers these features.
  </Accordion>
</AccordionGroup>

---

# Source: https://docs.replit.com/category/replit-ai.md

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

# Replit AI

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

Replit AI transforms how you build software with Agent, our AI-powered development assistant. Agent allows you to build entire applications in minutes, without knowing how to code.

<Tip>
  **New with Agent 3** - Extended autonomous builds with minimal supervision,
  App Testing for self-validation, Fast and Full build modes, and Agents & Automations
  for building your own autonomous systems.
</Tip>

## What you can build

With Agent, you can:

* **Transform ideas into apps:** Describe your vision in plain language and watch Agent build a complete application
* **Accelerate development:** Get instant code explanations, intelligent autocomplete, and contextual help
* **Debug efficiently:** Identify and fix issues with AI-powered analysis and suggestions
* **Learn as you build:** Receive detailed explanations and best practice recommendations

Learn more about Agent in the following video:

## Getting started

The fastest way to experience Replit AI is to create your first app with Agent:

1. **Start with Agent**: Follow the [Create with AI](/getting-started/quickstarts/ask-ai/) quickstart to build an app from scratch
2. **Choose your build mode**: Select Fast for lightweight apps or prototypes (\~3-5 mins) or use the default full build for a thorough implementation of your request (\~10+ mins)
3. **Experience Agent 3's autonomy**: Customize Agent's **[Autonomy Level](/replitai/autonomy-level)** while it tests itself with **App Testing**
4. **Set up billing**: Configure [usage alerts and budgets](/billing/managing-spend) to control your AI spending

<Warning>
  Agent is a premium feature that charges your Replit account
  based on usage. For pricing information and billing policies, see [Replit AI Billing](/billing/ai-billing/).
</Warning>

### Accessing Agent

You can access Agent from any Replit App:

* **Tools dock**: Find Agent in the left sidebar of your Workspace
* **Create new app**: Start with Agent directly from the "Create a new App" screen

<Note>
  Agent is now available on all projects. Use [General Agent](/replitai/general-agent) to work with any framework or project type, including existing apps and Developer Framework templates.
</Note>

### Key capabilities

Agent offers powerful features that revolutionize your development workflow:

**Complete app generation**

* Natural language descriptions become functional applications
* Intelligent architecture decisions and best practices
* Automatic environment setup and dependency management
* Seamless integration of databases, file storage, and third-party services

**Interactive development**

* Chat-based interface for complex requests
* File attachments and web content integration
* Rollback capabilities for safe experimentation
* Real-time progress tracking and feedback

**Autonomous development (New in Agent 3)**

* **App Testing**: Automated computer use testing for the Agent to spin up a browser and test its own work, just like a real user
* **Autonomy Level**: Customize how independently Agent works and reviews code, from hands-on control to extended autonomous development
* **Agents & Automations**: for building your own autonomous systems

## Use cases

### Build a complete app with Agent

Describe your app idea in natural language and let Agent handle the implementation:

### Add complex integrations

Integrate payment processing, APIs, or advanced features using natural language:

## Pricing and billing

Agent uses transparent, effort-based pricing designed to provide value at every level:

**Agent**: Effort-based pricing that charges based on the complexity and scope of your requests

* Simple changes cost less than complex builds
* One meaningful checkpoint per request
* Extended autonomous builds with less supervision and self-testing capabilities
* Advanced capabilities for complex builds
* Agent 3 features: App Testing, build modes, and Agents & Automations

Learn more about [AI billing](/billing/ai-billing) and how to [manage your spend](/billing/managing-spend).

## Next steps

Ready to start building with Agent? Choose your path:

<CardGroup cols={2}>
  <Card title="Try Agent" href="/replitai/agent" icon="robot">
    Experience Agent 3's autonomous development with extended builds and less
    supervision
  </Card>

<Card title="View Pricing" href="/billing/ai-billing" icon="credit-card">
    Understand costs and set up billing controls
  </Card>

<Card title="Quick Start" href="/getting-started/quickstarts/ask-ai" icon="rocket">
    Build your first autonomous AI-powered app in minutes
  </Card>
</CardGroup>

---

# Source: https://docs.replit.com/category/replit-apps.md

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

# Replit Apps

> Replit Apps help you transform your ideas into apps anyone can access, anywhere.

export const EnterpriseWorkspaceStorage = 'Custom';

export const TeamsWorkspaceStorage = '256GB';

export const CoreWorkspaceStorage = '50GB';

export const StarterWorkspaceStorage = '2GB';

## What is a Replit App?

Replit Apps are cloud-hosted projects that contain code, data, and assets.
You can create, run, and publish them from a secure, isolated environment.

Replit Apps integrate with the following tools in your Replit workspace to provide
a seamless development experience:

* **AI-powered tools**: Use Agent to create, debug, and explain your code.
* **Collaboration**: Work with others in real time on the same app.
* **Publishing**: Publish your app to the cloud with a single click.
* **Templates**: Start your app quickly using preset configurations for various use cases.

## Getting started

<Tip>
  For step-by-step instructions on creating Replit Apps, see the following Quickstart guides:

* [Remix an App](getting-started/quickstarts/remix-an-app)
  * [Create with AI](/getting-started/quickstarts/ask-ai)
  * [Build from Scratch](/getting-started/quickstarts/from-scratch)
</Tip>

To open a Replit App, log into Replit and open it in your workspace using one
of the following methods.

<Accordion title="Create a new Replit App">
  1. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=a6613ac9b303fa6dea65e5cf08ddca06" alt="plus icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/create-app-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=0f0aa42a2a63cca6629fe393ffb100e4 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=e6cce9e17a54ec2279d57d255e5233ba 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6a6f30d08c7ab4811ba927af66ca7311 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f7249d48a50a7db0713ea3f92f4c422f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=f2a12316d646b72674a837cbe70a10f8 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/create-app-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6cc3b1f288cf5086a84aadaa9b1d4fba 2500w" /> **Create App**.
     You should see the following screen:

2. Select one of the following options:

* **Create with Replit Agent**: Use AI-powered tools to create a new Replit App.
     * **Choose a Template**: Create a new Replit App based on an existing one.
     * **Import from GitHub**: Create a new Replit App from a GitHub repository.

3. Complete the dialog prompts to start a new Replit App.
</Accordion>

<Accordion title="Open an existing Replit App">
  To access a Replit App you created previously, select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/folder-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0607a84751fc5ffc0fc46142171b8947" alt="folder icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/folder-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/folder-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ba50d5834fd4bfe60f2f2a9c19f4c459 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/folder-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=fa827e7a62d7af693f18abeccfeae988 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/folder-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=fd9cb73c791f00c040c19cb247d29dba 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/folder-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f8376ab32d50ccf94de838fcf7376ffb 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/folder-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9e93ee6dceb4b5b341442e2b1d7fecfc 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/folder-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=538789545abbbfbb0b7ec63a75529646 2500w" /> **Apps** from the left sidebar.
</Accordion>

## Key features

Replit Apps offer the following features:

* **Zero-setup:** Create apps or write code directly on Replit.com without any installs or configuration.
* **Auto-save:** Your project continuously saves changes to the cloud and lets you resume coding from any web browser
* **Version Control:** Track changes, explore file history, and sync your files without any configuration, through Replit's version control systems
* **Public/Private Visibility Controls:** Control who can view, run, or create a Remix of your app with privacy settings
* **Publishing:** Publish your code to the cloud without making any complex configuration changes
* **Custom App URLs:** Get a unique URL for your app or assign a custom domain for a professional presence

<Info>
  Files uploaded to your Workspace are only available during development and
  aren't accessible to your published app or other builders. Use [Object
  Storage](/cloud-services/storage-and-databases/object-storage) to handle
  builder uploads and serve files and [Replit
  Database](/cloud-services/storage-and-databases/sql-database) to store and
  retrieve data for your app and users.
</Info>

To learn more about Workspace tools that streamline Replit App creation, see [Workspace Overview](/category/replit-workspace/).

## How it works

When you create a Replit App, Replit sets up a private space for your project in the cloud.
As you add features and modifications to your app, Replit saves your changes
automatically so you can resume editing from any web browser.

Replit provides pre-configured environments with all the necessary components.
This lets you start creating your app immediately without worrying about
server configuration, database setup, or environment management.

Replit automatically assigns each Replit App a unique web address where you
can preview your app while you're working on it. When you're ready to share your
creation, you can publish it with just a few clicks to make it available 24/7.

## Storage Overview

Replit offers four primary types of storage to meet your application's data needs. Each storage type serves different use cases and has specific limits based on your plan.

<Info>
  Storage limits include all data stored by your app, including installed
  packages and dependencies.
</Info>

| Storage Type                                                             | Description                 | Use Cases                                            | Persistence                                | Plan Limits                                                                                                                                            |
| ------------------------------------------------------------------------ | --------------------------- | ---------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **File Storage**                                                         | Files within your workspace | Application code, static assets, configuration files | Persisted on publishing, resets on restart | Starter: {StarterWorkspaceStorage}<br />Core: {CoreWorkspaceStorage}<br />Teams: {TeamsWorkspaceStorage}<br />Enterprise: {EnterpriseWorkspaceStorage} |
| **[Database](/cloud-services/storage-and-databases/sql-database/)**      | Structured data storage     | User profiles, game scores, product catalogs         | Fully persistent across sessions           | 10GB per database<br />Billed by compute time and storage                                                                                              |
| **[App Storage](/cloud-services/storage-and-databases/object-storage/)** | Unstructured data and media | Images, videos, PDFs, documents                      | Fully persistent across sessions           | Pay-per-use model<br />Billed by storage and bandwidth                                                                                                 |
| **[Secrets](/replit-workspace/workspace-features/secrets/)**             | Encrypted sensitive data    | API keys, credentials, connection strings            | Fully persistent and encrypted             | No specific limits<br />Included with all plans                                                                                                        |

<Note>
  For detailed pricing and usage-based billing information, see the [Billing
  documentation](/category/billing/) and [Storage and Databases
  overview](/category/storage-and-databases/).
</Note>

## Use cases

The following examples showcase how you can use Replit Apps to accelerate your
app creation process.

### Explore something new

Select a template to start coding in a specific programming language or software stack.

### Create and test APIs

Build an API with RESTful endpoints and use workspace tools to test them before going live.

## Next steps

To learn more about Replit Apps, see the following resources:

* [Templates](https://www.replit.com/templates/): explore starter project setups to give you a head start
* [Publishing](/category/replit-deployments): learn which publishing option works best for your Replit App
* [Custom Domains](cloud-services/deployments/custom-domains#custom-domains-with-published-apps): Set your domain to link to your Replit App
* [Storage and Databases](/category/storage-and-databases): Discover your storage options

---

# Source: https://docs.replit.com/replit-workspace/replit-auth.md

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

# Replit Auth

> Add user accounts, personalized experiences, and secure access control to your app. Enterprise-grade authentication that works with a single Agent prompt.

Replit Auth lets you create personalized user experiences in your app. With user accounts, you can save user preferences, create custom dashboards, build social features, control access to premium content, and track user activity—all the features that make apps engaging and valuable.

Instead of spending months building authentication from scratch, Replit Auth gives you enterprise-grade capabilities with a single Agent prompt. Powered by the same infrastructure as Fortune 500 companies—Firebase, Google Cloud Identity Platform, reCAPTCHA, Stytch, and Clearout—you get professional-level security, fraud prevention, and global scale built in.

## Why use Replit Auth

Authentication is a challenging problem that entire companies dedicate themselves to solving. Your app's primary purpose likely isn't authentication - it's whatever unique idea or solution you're building.

Replit Auth offers:

* **Zero setup** - Add authentication with a single prompt in Agent
* **Built-in security** - Uses Replit's infrastructure with protections against common attacks
* **User management** - Simplified user administration through the Auth pane
* **Database integration** - Automatic user entries in your database
* **Customizable login page** - Personalize the login experience for your app
* **Password reset** - Replit sends password reset emails for you, so you don't need to set up your own email delivery provider
* **Development and Published Apps** - Replit Auth works seamlessly across development (replit.dev), and published apps (replit.app, and custom domains)

## Enterprise-grade infrastructure

Replit Auth is more than simple user management—it's a fully managed authentication solution built on enterprise-grade infrastructure. This powerful combination gives your app the same authentication capabilities used by Fortune 500 companies:

* **Firebase & Google Cloud Identity Platform** - Enterprise-tier SLA with Google's battle-tested authentication infrastructure
* **Advanced security scanning** - Automatic protection against bots and malicious actors with reCAPTCHA integration
* **Fraud prevention** - Email verification and validation powered by Clearout to prevent fake accounts
* **Multi-factor authentication** - Secure login options backed by Stytch's enterprise authentication platform
* **Global scale** - Built to handle millions of users with automatic scaling and reliability

This enterprise foundation means you can focus on building your app's unique features while knowing your authentication is powered by the same infrastructure that secures billion-dollar companies. Instead of spending months integrating multiple services, you get all these capabilities with a single Agent prompt.

## Getting started with Replit Auth

The only way to implement Replit Auth is by using Agent. Simply include a request for Replit Auth in your prompt:

```
Help me create an app that [your app idea] and should feature Replit Auth.
```

Agent will set up all the necessary code and configurations for authentication. Manual implementation is not supported, as Agent handles all the complexity for you.

To learn more about Agent capabilities, see the [Replit Agent documentation](/replitai/agent) and [Agent integrations](/replitai/integrations).

For tips on writing effective prompts, check out [Effective prompting with Replit](/tutorials/effective-prompting).

## Managing users

Replit Auth provides a built-in user management interface accessible through the Auth pane in your Replit workspace.

From this interface, you can:

* View all authenticated users
* Ban users from your application
* View user details
* Track user activity

## Customizing the login page

You can customize the login page to match your app's branding:

1. Navigate to the Auth pane in your Replit workspace
2. Click on **Configure**
3. Customize the following elements:
   * App name
   * App icon
   * Login methods (Google, GitHub, X, Apple, Email)

Your changes will immediately appear on your app's login page.

## Connecting user data with your database

Replit Auth automatically creates user entries in your database. This makes it easy to store user-specific data. Agent will guide you on properly connecting user data with your database.

For more information on databases, see the [Replit Database Documentation](/cloud-services/storage-and-databases/replit-database).

## Security considerations

Replit Auth leverages Replit's infrastructure, providing built-in protections against common security threats. However, you should still follow these best practices:

* Always validate user authentication server-side before performing sensitive operations
* Never store sensitive information like passwords in your code
* Use environment variables for any API keys or secrets
* Implement proper access controls for user data

For more information on security, check out:

* [Replit's built-in security features](/tutorials/vibe-code-securely)
* [Security checklist for vibe coding](/tutorials/vibe-code-security-checklist)
* [Secrets management](/replit-workspace/workspace-features/secrets)

## Referrals

To encourage applications that teach people about Replit, any user that signs up via Replit Auth will automatically be added to your pending Replit Referrals. If they later upgrade to Replit Core, you will receive any referral bonus you are entitled to according to the current terms of the referral program.

## Troubleshooting

### Common issues

1. **User not recognized after login**
   * If you're experiencing issues, ask [Replit Agent](/replitai/agent) for help debugging your authentication implementation.

2. **Custom icon not displaying**
   * Make sure the icon URL is accessible and in a supported format (PNG or JPG).

3. **Newly linked custom domain isn't working**
   * Republish to refresh the domain list (REPLIT\_DOMAINS environment variable).

## Additional resources

* [Replit Database Documentation](/cloud-services/storage-and-databases/replit-database)
* [Replit Agent](/replitai/agent)

---

# Source: https://docs.replit.com/teams/replit-core-sponsorships.md

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

# Replit Core Sponsorships

> Learn how to gift Replit Core subscriptions to developers outside your organization through sponsorships for hackathons, bootcamps, and other events.

# Replit Core sponsorships

## Overview

Sponsorships allow you to gift Replit Core to users outside of your Organization. Sponsorships can be a great fit for situations like Developer Relations teams and coding bootcamps. Example use cases:

* hosting a hackaton or contest and giving away Replit Core as a prize for participants
* running a bootcamp where each student should get their own Replit Core account

Sponsored users will not have any direct access to your Organization, and you won't have any direct access to the sponsored user's content. A sponsorship is simply a way to gift Replit Core to users and give them [the benefits of Replit Core](https://replit.com/pricing) (e.g. more powerful workspaces, private Replit Apps and monthly credits).

## Sponsorships flow

### Purchasing sponsorships

[Contact us](https://replit.com/teams#inlineForm) to enable this feature for your Organization.

### Granting a sponsorship

Once sponsorships have been enabled for your Organization, you can grant sponsorships from the settings page:

Click the "Add" button, enter an email (or multiple emails) and choose how many months of Replit Core you would like to grant (e.g. in this case, we are granting 2 months):

They will receive an email with a link to claim the sponsorship:

The sponsorship invite link will expire after 7 days. If the recipient claims the sponsorship, they will receive Replit Core automatically. When the sponsorship ends (e.g. in our example, after 2 months), the recipient can decide whether or not they want to pay for Replit Core or not.

---

# Source: https://docs.replit.com/billing/plans/replit-core.md

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

# Replit Core

> Learn about Replit Core membership features including powerful AI tools, high-performance workspaces, and one-click publishing.

export const TeamsCredits = '$40';

export const CoreCredits = '$25';

[Replit Core](https://replit.com/replit-core) membership gives you access to premium
tools that let you quickly go from idea to app.

## Key features

The Core membership offers the following features:

### AI-powered tools

* Chat with the latest AI-powered tools to create apps and debug code
* Autonomous mode: Extended autonomous builds with minimal supervision
* Receive intelligent autocomplete suggestions in the file editor

### Lightning-fast and secure workspace

* Work in a high-powered cloud development environment
* Avoid interruptions in service with pay-as-you-go billing
* Use the Secrets tool to keep sensitive data secure and separated from the code

See the <a href="https://replit.com/pricing" target="_blank">pricing page</a> for cost and limits for
specific plans.

### Monthly credits

* Receive monthly credits that automatically apply to paid services such as Agent, publishing, network transfer, and database storage

<Info>
  You receive the following monthly credit based on your plan: - **Core**:
  {CoreCredits}- **Team**: {TeamsCredits}
</Info>

### One-click Publishing

* Publish an unlimited number of apps
* Select from multiple publishing options to optimize your spending
* Access built-in logging & analytics
* Remove the "Made with Replit" badge from your published apps

### Priority support and community events

* Access members-only forums and events
* Get early access to new features

## Getting started

Upgrade to Replit Core in just a few steps:

1. Navigate to the <a href="https://replit.com/pricing" target="_blank">Pricing</a> page
2. Select **Join Replit Core**
3. Select either **Monthly** or **Yearly** plan and enter your payment details

## Next steps

To learn more about Replit Core's features, see the following resources:

* [Starter Plan](/billing/plans/starter-plan): Compare Starter plan features with Core
* [Replit Agent](/replitai/agent/): Start building with Agent
* [Workspace](/category/replit-workspace/): Learn about the workspace and app-building tools
* [Publishing](/category/replit-deployments/): Read about the various publishing options for your app

---

# Source: https://docs.replit.com/cloud-services/storage-and-databases/replit-database.md

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

# Key-Value Store

> A simple, built-in key-value database for your Replit Apps with no configuration required.

Replit Key-Value Store provides a simple, user-friendly database inside every Replit App. No configuration required—just import and start storing data immediately.

## Features

* **Zero configuration**: Start using the database right away with no setup required
* **Simple API**: Store and retrieve data with an interface similar to Python dictionaries
* **Multiple data types**: Store strings, numbers, lists, dictionaries, and other Python objects
* **Prefix filtering**: Query for keys that share common prefixes
* **Built-in access**: Access your database from the Replit workspace sidebar

## Getting started

### Accessing your key-value store

<Accordion title="How to access the Key-Value Store tool">
  From the left **Tool dock**:

1. Select the second-to-last icon in the sidebar
  2. The Key-Value Store interface will appear with instructions and current data

You can also use the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top
  2. Type "Key-Value" to locate the tool
</Accordion>

### Importing the database

<CodeGroup>
  ```python importing.py theme={null}
  from replit import db
  ```

```javascript importing.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();
  ```
</CodeGroup>

<Note>
  If you encounter publishing errors in Python, ensure you're using `replit` version 3.3.0 or above. Check your version with `pip show replit`. Upgrade with `upm add 'replit>=3.3.0'`.

For Node.js, make sure to install the package with `pnpm add @replit/database`.
</Note>

## Using the key-value store

### Creating and storing data

The Key-Value Store works similar to a dictionary in Python or an object in JavaScript. Here's how to add data:

<CodeGroup>
  ```python basic_storage.py theme={null}
  from replit import db

# Add a key and value to the database
  db["key1"] = "value1"
  ```

```javascript basic_storage.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();

// Add a key and value to the database
  db.set("key1", "value1").then(() => {
    console.log("Value stored successfully");
  });
  ```
</CodeGroup>

#### Storing different data types

<CodeGroup>
  ```python data_types.py theme={null}
  from replit import db

# Store different data types
  db["string_key"] = "text value"
  db["integer_key"] = 100
  db["float_key"] = 9.99
  db["list_key"] = [1, 2, 3]
  db["dict_key"] = {"name": "user", "role": "admin"}
  db["none_key"] = None
  ```

```javascript data_types.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();

// Store different data types
  async function storeData() {
    await db.set("string_key", "text value");
    await db.set("integer_key", 100);
    await db.set("float_key", 9.99);
    await db.set("array_key", [1, 2, 3]);
    await db.set("object_key", {"name": "user", "role": "admin"});
    await db.set("null_key", null);
    
    console.log("All values stored successfully");
  }

storeData();
  ```
</CodeGroup>

<Tip>
  Use 2D arrays/lists to create table-like structures:

<CodeGroup>
    ```python table_structure.py theme={null}
    from replit import db

db["users"] = [["id", "name"], [1, "James"], [2, "Angel"]]

for row in db["users"]:
        print(row)
    ```

```javascript table_structure.js theme={null}
    const Database = require("@replit/database");
    const db = new Database();

const users = [["id", "name"], [1, "James"], [2, "Angel"]];

db.set("users", users).then(() => {
      db.get("users").then(users => {
        users.forEach(row => {
          console.log(row);
        });
      });
    });
    ```
  </CodeGroup>
</Tip>

### Reading data

Retrieve data by referencing the key:

<CodeGroup>
  ```python reading_data.py theme={null}
  from replit import db

# Create example data
  db["username"] = "developer123"
  db["user_info"] = {"email": "dev@example.com", "plan": "Pro"}

# Read the data
  print(db["username"])                   # Outputs: developer123
  print(db["user_info"]["email"])         # Outputs: dev@example.com
  ```

```javascript reading_data.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();

// First store some example data
  async function setupAndRead() {
    await db.set("username", "developer123");
    await db.set("user_info", {"email": "dev@example.com", "plan": "Pro"});
    
    // Read the data
    const username = await db.get("username");
    console.log(username);  // Outputs: developer123
    
    const userInfo = await db.get("user_info");
    console.log(userInfo.email);  // Outputs: dev@example.com
  }

setupAndRead();
  ```
</CodeGroup>

For safer access that won't raise an error if the key doesn't exist:

<CodeGroup>
  ```python safe_access.py theme={null}
  from replit import db

# Create example data
  db["count"] = 42

# Access with get() method
  print(db.get("count"))                  # Outputs: 42
  print(db.get("missing_key", "Not found")) # Outputs: Not found
  ```

```javascript safe_access.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();

async function safeAccess() {
    await db.set("count", 42);
    
    // Safe access with error handling
    try {
      const count = await db.get("count");
      console.log(count);  // Outputs: 42
      
      const missing = await db.get("missing_key");
      console.log(missing || "Not found");  // Outputs: Not found
    } catch (error) {
      console.error("Error retrieving data:", error);
    }
  }

safeAccess();
  ```
</CodeGroup>

### Listing and searching keys

Access all keys in the database:

<CodeGroup>
  ```python list_keys.py theme={null}
  from replit import db

# Create some sample data first
  db["user1"] = "Alice"
  db["user2"] = "Bob"
  db["setting1"] = "enabled"

# Print all keys
  print(db.keys())  # Outputs something like: {'user1', 'user2', 'setting1'}

# Loop through keys and print values
  for key in db:
      print(f"{key}: {db.get(key)}")
  ```

```javascript list_keys.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();

async function listAllKeys() {
    // Create some sample data first
    await db.set("user1", "Alice");
    await db.set("user2", "Bob");
    await db.set("setting1", "enabled");
    
    // Get and print all keys
    const keys = await db.list();
    console.log(keys);  // Outputs: ["user1", "user2", "setting1"]
    
    // Loop through keys and print values
    for (const key of keys) {
      const value = await db.get(key);
      console.log(`${key}: ${value}`);
    }
  }

listAllKeys();
  ```
</CodeGroup>

Find keys with a specific prefix:

<CodeGroup>
  ```python prefix_search.py theme={null}
  from replit import db

# Create data
  db["user_id"] = 1001
  db["user_name"] = "Alex"
  db["item_id"] = 5001

# Find all keys starting with "user"
  user_keys = db.prefix("user")
  print(user_keys)  # Outputs: ('user_id', 'user_name')
  ```

```javascript prefix_search.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();

async function searchByPrefix() {
    // Create data
    await db.set("user_id", 1001);
    await db.set("user_name", "Alex");
    await db.set("item_id", 5001);
    
    // Find all keys starting with "user"
    const userKeys = await db.list("user");
    console.log(userKeys);  // Outputs: ["user_id", "user_name"]
  }

searchByPrefix();
  ```
</CodeGroup>

### Updating data

Update stored values by assigning new values to existing keys:

<CodeGroup>
  ```python update_data.py theme={null}
  from replit import db

# Create and display data
  db["score"] = 95
  print(db["score"])  # Outputs: 95

# Update the value
  db["score"] = 98
  print(db["score"])  # Outputs: 98
  ```

```javascript update_data.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();

async function updateData() {
    // Create initial data
    await db.set("score", 95);
    let score = await db.get("score");
    console.log(score);  // Outputs: 95
    
    // Update the value
    await db.set("score", 98);
    score = await db.get("score");
    console.log(score);  // Outputs: 98
  }

updateData();
  ```
</CodeGroup>

Perform operations on stored values:

<CodeGroup>
  ```python modify_values.py theme={null}
  from replit import db

# Create numeric data
  db["counter"] = 10

# Increment the value
  db["counter"] += 5
  print(db["counter"])  # Outputs: 15
  ```

```javascript modify_values.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();

async function incrementValue() {
    // Create numeric data
    await db.set("counter", 10);
    
    // Increment the value (requires get, modify, set pattern)
    let counter = await db.get("counter");
    counter += 5;
    await db.set("counter", counter);
    
    console.log(await db.get("counter"));  // Outputs: 15
  }

incrementValue();
  ```
</CodeGroup>

### Deleting data

Remove key-value pairs:

<CodeGroup>
  ```python delete_data.py theme={null}
  from replit import db

# Create data
  db["temporary"] = "will be deleted"

# Delete the data
  del db["temporary"]

# Verify deletion
  if "temporary" not in db:
      print("Value deleted successfully.")
  ```

```javascript delete_data.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();

async function deleteData() {
    // Create data
    await db.set("temporary", "will be deleted");
    
    // Delete the data
    await db.delete("temporary");
    
    // Verify deletion
    const value = await db.get("temporary");
    if (value === null) {
      console.log("Value deleted successfully.");
    }
  }

deleteData();
  ```
</CodeGroup>

### Complete example

Here's a complete example of using the Key-Value Store for a simple task list:

<CodeGroup>
  ```python task_list.py theme={null}
  from replit import db
  import time

def add_task(title, description=""):
      task_id = int(time.time())  # Use timestamp as ID
      db[f"task_{task_id}"] = {
          "id": task_id,
          "title": title,
          "description": description,
          "completed": False,
          "created_at": time.time()
      }
      return task_id

def complete_task(task_id):
      key = f"task_{task_id}"
      if key in db:
          task = db[key]
          task["completed"] = True
          db[key] = task
          return True
      return False

def list_tasks(show_completed=True):
      tasks = []
      for key in db.prefix("task_"):
          task = db[key]
          if show_completed or not task["completed"]:
              tasks.append(task)
      return tasks

# Usage example
  add_task("Buy groceries", "Milk, eggs, bread")
  add_task("Call dentist")
  task_id = add_task("Finish project", "Complete documentation")

# Mark a task as complete
  complete_task(task_id)

# List all tasks
  all_tasks = list_tasks()
  for task in all_tasks:
      status = "✓" if task["completed"] else "☐"
      print(f"{status} {task['title']}: {task.get('description', '')}")
  ```

```javascript task_list.js theme={null}
  const Database = require("@replit/database");
  const db = new Database();

async function addTask(title, description = "") {
    const taskId = Date.now();  // Use timestamp as ID
    await db.set(`task_${taskId}`, {
      id: taskId,
      title: title,
      description: description,
      completed: false,
      createdAt: Date.now()
    });
    return taskId;
  }

async function completeTask(taskId) {
    const key = `task_${taskId}`;
    try {
      const task = await db.get(key);
      if (task) {
        task.completed = true;
        await db.set(key, task);
        return true;
      }
    } catch (error) {
      console.error("Error completing task:", error);
    }
    return false;
  }

async function listTasks(showCompleted = true) {
    const tasks = [];
    const keys = await db.list("task_");
    
    for (const key of keys) {
      const task = await db.get(key);
      if (showCompleted || !task.completed) {
        tasks.push(task);
      }
    }
    
    return tasks;
  }

// Usage example
  async function runTaskManager() {
    // Add some tasks
    const taskId1 = await addTask("Buy groceries", "Milk, eggs, bread");
    const taskId2 = await addTask("Call dentist");
    const taskId3 = await addTask("Finish project", "Complete documentation");
    
    // Mark a task as complete
    await completeTask(taskId3);
    
    // List all tasks
    const allTasks = await listTasks();
    allTasks.forEach(task => {
      const status = task.completed ? "✓" : "☐";
      console.log(`${status} ${task.title}: ${task.description || ''}`);
    });
  }

runTaskManager();
  ```
</CodeGroup>

## Use cases

The Key-Value Store is ideal for:

* **User preferences**: Store user settings and preferences
* **Game state**: Save game progress and high scores
* **Caching**: Store temporary data to speed up your application
* **Simple configuration**: Maintain configuration values across app restarts
* **Session data**: Track user sessions without complex database setup

## FAQs

### Where can I find my store?

<Accordion title="Finding your Key-Value Store">
  When viewing your Replit App:

1. Look for the Key-Value Store icon toward the bottom of the sidebar (second from last)
  2. Select it to open the database interface
</Accordion>

### How can I access my store programmatically?

Replit provides official clients for multiple languages:

* [Python](https://pypi.org/project/replit/)
* [Node.js](https://www.npmjs.com/package/@replit/database)
* [Go](https://github.com/replit/database-go)

<Accordion title="Basic usage in different languages">
  <CodeGroup>
    ```python basic_usage.py theme={null}
    from replit import db
    db["key"] = "value"
    print(db["key"])
    ```

```javascript basic_usage.js theme={null}
    const Database = require("@replit/database");
    const db = new Database();

db.set("key", "value").then(() => {
      db.get("key").then(value => {
        console.log(value);
      });
    });
    ```

```go basic_usage.go theme={null}
    package main

import (
      "fmt"
      "github.com/replit/database-go"
    )

func main() {
      database.Set("key", "value")
      value, _ := database.Get("key")
      fmt.Println(value)
    }
    ```
  </CodeGroup>
</Accordion>

### What if my language doesn't have a client?

If your Replit App is in a language without an official client, you can use HTTP requests to interact with the database:

<Accordion title="HTTP API usage for custom clients">
  **Set a key-value pair:**

```bash  theme={null}
  curl $REPLIT_DB_URL -d '<key>=<value>'
  ```

**Alternative set method (for safe characters):**

```bash  theme={null}
  curl -XPOST $REPLIT_DB_URL/<key>=<value>
  ```

**Get a value:**

```bash  theme={null}
  curl $REPLIT_DB_URL/<key>
  ```

**Delete a key:**

```bash  theme={null}
  curl -XDELETE $REPLIT_DB_URL/<key>
  ```

**List keys with a prefix:**

```bash  theme={null}
  curl "$REPLIT_DB_URL?prefix=<key>"
  ```
</Accordion>

### What is REPLIT\_DB\_URL?

`REPLIT_DB_URL` is an environment variable created with your Replit App. It's the connection string that enables database access.

<Warning>
  `REPLIT_DB_URL` provides full access to your database. Never expose it publicly or share it with untrusted parties.
</Warning>

<Accordion title="How to access REPLIT_DB_URL">
  <CodeGroup>
    ```python get_db_url.py theme={null}
    import os
    print(os.getenv("REPLIT_DB_URL"))
    ```

```javascript get_db_url.js theme={null}
    console.log(process.env.REPLIT_DB_URL);
    ```
  </CodeGroup>

**In Deployments:**
  For published apps, the URL is stored in `/tmp/replitdb` instead of the environment variable.
  If writing a client, first check `/tmp/replitdb` and fall back to the environment variable.
</Accordion>

### What are the storage limits?

<Info>
  The Key-Value Store has the following limits:

* 50 MiB per store (sum of keys and values)
  * 5,000 keys per store
  * 1,000 bytes per key
  * 5 MiB per value
</Info>

Rate limits apply to all operations. If exceeded, you'll receive an HTTP 429 response. Implement exponential retry with gradual delays to handle rate limiting.

### How can I check my storage usage?

<Accordion title="Checking storage usage">
  1. Open the Key-Value Store tool from the sidebar
  2. At the top of the interface, you'll see your current usage:
     * Number of keys in your store
     * Total storage used by keys and values
</Accordion>

### Is my store private?

Yes, each store is private and isolated. Every Replit App has its own database that is not shared with other Replit Apps.

### How do I share a database across multiple Replit Apps?

<Accordion title="Creating a shared database service">
  To share data between Replit Apps:

1. Designate one Replit App as the primary database service
  2. Create an API in this app that allows other apps to interact with its database
  3. Have other Replit Apps send requests to this API

[View an example Replit App in Python](https://replit.com/@util/Replit-Database-proxy)
</Accordion>

## Next steps

To learn about other storage options available in Replit:

* [SQL Database](/cloud-services/storage-and-databases/sql-database) - For relational data with SQL queries
* [Object Storage](/cloud-services/storage-and-databases/object-storage) - For storing larger files and assets
* [Secrets](/replit-workspace/workspace-features/secrets) - For storing sensitive credentials securely

---

# Source: https://docs.replit.com/category/replit-deployments.md

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

# Overview

> Share your Replit Apps with the world in just a few clicks.

Publishing lets you share your Replit App with the world using a simplified process.

<Note>
  The action of making your app live is called "Publishing." This page describes the different types of deployments available.
</Note>

## What is Publishing?

Publishing is a feature that saves a **snapshot** of your Replit App to the cloud,
where everyone can interact with it. A snapshot captures the current state of the files in your
Replit App.

When you publish your Replit App, you create a **published app**. A published app is a running instance
of your app on Replit's cloud infrastructure. This makes the app reliably available on the internet,
separate from the version in your workspace.

<Info>
  Replit's infrastructure is backed by Google Cloud Platform (GCP). All
  published apps are hosted in the United States.
</Info>

Publishing includes tools to monitor your published app status and view web analytics.

Replit offers the following deployment types:

<CardGroup>
  <Card title="Autoscale Deployment" href="/cloud-services/deployments/autoscale-deployments" icon="layer-group">
    Automatically adjusts resources based on your app's usage.
  </Card>

<Card title="Static Deployment" href="/cloud-services/deployments/static-deployments" icon="files">
    Provides an affordable way to host websites that don't change based on user input.
  </Card>

<Card title="Reserved VM Deployment" href="/cloud-services/deployments/reserved-vm-deployments" icon="server">
    Provides a consistent amount of computing resources for your app to run continuously.
  </Card>

<Card title="Scheduled Deployment" href="/cloud-services/deployments/scheduled-deployments" icon="clock">
    Runs your app at scheduled times that you choose.
  </Card>
</CardGroup>

## Getting started

Follow the steps below to publish your Replit App:

1. From your Replit App workspace, select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=df3fa2573b451c54591523c9d9111db1" alt="Publish icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/deploy-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=115e9383e0350a6ef201a41f78f8a19a 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=667b93ae66d0b69569409fb90d9fc280 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ae927e5aadcb7a470ad726f0acb0f782 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=16ee8f7b3d9db6b4f74ea8c2ebb6730f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ad04a5984543c13895fd30182294ec0a 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=2449268bce371256727b17027eb180f3 2500w" /> **Publish** at the top.
2. In the **Publishing** tab, select your publishing option.
3. If **Add a payment method** appears, follow the prompts to add a payment method.

Replit automatically selects the best publishing option for your app based on the project type and your needs.

However, to choose a different deployment type, consider the following information.

## Choosing the right publishing option

The following video explains how to choose the right publishing option for your app:

Use the following decision tree featured in the video to help you choose:

## Key features

Publishing offers the following convenient features:

* **Multiple publishing options**: Select or update a deployment type that meets your needs in a few clicks.
* **Custom domains**: Serve your app from your web domain.
* **Analytics**: Track visitor data and other metrics for your published app.
* **Monitoring tools**: View your published app status and configuration.
* **Access controls**: Control who can see your app with a single click. Available only for **Teams** members.
* **Badge settings**: Core users can manage the "Made with Replit" badge in Publishing settings. If you published an app while on the Starter plan that include the badge, it may take a couple minutes to update your app to remove the badge after you upgrade.
* **Feedback collection**: Enable feedback on your published app to gather insights from your users.

## How it works

When you publish your Replit App, Replit creates a snapshot of your app's files and dependencies.
This snapshot is then sent to Replit's cloud infrastructure, where it runs as a separate instance of your app.
To update your published app with the latest changes, publish again to create a fresh snapshot.

<Warning>
  Avoid saving and relying on data written to a published app's filesystem. To
  store data, use a storage or database option such as Replit's [Storage and
  Database](/category/storage-and-databases) offerings.
</Warning>

## Use cases

The following examples show different types of published apps.

### Autoscale deployment: Typing speed assessment app

Let the cloud scale up resources when users take typing tests and reduce them when not in use.

### Static deployment: Solar system simulation

Learn about the planets in a solar system visualization app on the web.
This visualization renders in the browser and doesn't transfer any user input to a server.

### Reserved VM deployment: Discord bot

Run a Discord bot that helps you moderate and onboard members.
It's always online to chat with users and respond to commands with predictable pricing and performance.

### Scheduled deployment: Home automation triggers

Schedule API calls to start and stop your smart home devices at specific times and days.

## Next steps

To learn more about Replit Publishing, see the following resources:

* [Autoscale Deployment](/cloud-services/deployments/autoscale-deployments/): Learn how to set up applications that scale with traffic
* [Static Deployment](/cloud-services/deployments/static-deployments/): Discover how to publish static websites quickly and efficiently
* [Reserved VM Deployment](/cloud-services/deployments/reserved-vm-deployments/): Explore dedicated VM options for specialized use cases
* [Scheduled Deployment](/cloud-services/deployments/scheduled-deployments/): Set up recurring tasks with simple scheduling
* [Custom Domains](/cloud-services/deployments/custom-domains/): Connect your published app to a custom domain

---

# Source: https://docs.replit.com/replitai/replit-dot-md.md

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

# replit.md

> `replit.md` is a special file that customizes Agent's behavior in your project. Define your preferences, coding style, and project context to help Agent build exactly what you want.

Agent automatically creates this file in your project's root directory using proven best practices. Agent includes its contents in the context to help it understand your preferences, project structure, and coding style.

## How `replit.md` works

Agent first creates a `replit.md` file in your project's root directory using proven best practices. This file includes:

* Basic project information
* Recommended coding patterns
* Common preferences for your project type

When Agent processes your requests, it automatically reads your `replit.md` file and uses its contents to:

* Understand your project's architecture and conventions
* Follow your preferred coding patterns and style
* Use your specified package managers and dependencies

Agent can also update your `replit.md` file as it learns more about your project and makes changes to your application.

<Note>
  You can edit the `replit.md` file to customize Agent's behavior.
</Note>

## Setting up `replit.md`

### Automatic generation

When you create a new project with Agent, it automatically generates a `replit.md` file using proven best practices. This file appears in your project's root directory and includes:

* Basic project information
* Recommended coding patterns
* Common preferences for your project type

### Manual creation

You can create your own `replit.md` file by adding a new file named `replit.md` in your project's root directory. Agent will automatically detect and use this file in future conversations.

<Note>
  `replit.md` must be located in your project's root directory to work properly.
</Note>

### Regenerating `replit.md`

If your `replit.md` file becomes corrupted or you want to start fresh:

1. Delete the existing `replit.md` file from your project root
2. Start a new conversation with Agent
3. Agent will automatically generate a new `replit.md` file based on your current project

## Best practices

### Be specific and clear

Write clear, specific instructions that help Agent understand exactly what you want:

```markdown  theme={null}
## Coding Style

- Use TypeScript for all new JavaScript files
- Prefer functional components with hooks over class components
- Use Tailwind CSS for styling, avoid inline styles
- Always include TypeScript types for function parameters and return values
```

For a more detailed guide on prompt formatting, check out the [Anthropic prompt engineering guide](https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/use-xml-tags).

### Use examples

Examples help Agent understand your preferences better than abstract descriptions:

````markdown  theme={null}
## API Error Handling

When creating API endpoints, always use this error handling pattern:

```javascript
app.get('/api/users', async (req, res) => {
  try {
    const users = await getUsersFromDatabase();
    res.json({ success: true, data: users });
  } catch (error) {
    console.error('Error fetching users:', error);
    res.status(500).json({ 
      success: false, 
      error: 'Failed to fetch users' 
    });
  }
});
````

### Define communication preferences

Tell Agent how you prefer to receive information and updates:

```markdown  theme={null}
## Communication Style

- Before implementing changes, explain what you're going to do and why
- Break down complex tasks into clear steps
- Ask for clarification if requirements are unclear
- Provide brief explanations for technical decisions
```

### Specify project context

Help Agent understand your project's purpose and constraints:

```markdown  theme={null}
## Project Context

This is a social media app for book lovers where users can:
- Create reading lists and share book recommendations
- Follow other readers and see their updates
- Rate and review books they've read

Target audience: Casual readers aged 25-45
Tech stack: React frontend, Node.js backend, PostgreSQL database
```

## Example `replit.md` configurations

### Web application project

```markdown  theme={null}
# MyApp Project Guidelines

## Project Overview
A task management web application built with React and Express.js.

## Technology Preferences
- Frontend: React with TypeScript, Tailwind CSS
- Backend: Express.js with TypeScript
- Database: Neon PostgreSQL with Drizzle ORM
- Package Manager: npm (not yarn or pnpm)

## Coding Standards
- Use functional components with hooks
- Implement proper error boundaries
- Follow REST API conventions for endpoints
- Use descriptive variable and function names

## Communication Style
- Explain your approach before making changes
- Provide code comments for complex logic
- Ask questions if requirements are ambiguous
```

### Data analysis project

```markdown  theme={null}
# Data Analysis Project Guidelines

## Project Context
Analyzing customer behavior data to identify trends and insights.

## Technology Preferences
- Python with Streamlit for interactive web applications
- pandas, numpy, and matplotlib for data analysis

## Analysis Standards
- Include clear documentation for all analysis steps
- Create interactive visualizations with Streamlit components
- Validate data quality before analysis
- Export results to CSV format and display in Streamlit tables

## Communication Style
- Explain statistical methods and assumptions
- Provide context for findings and recommendations
- Use clear, non-technical language for business insights
- Create interactive dashboards for stakeholder presentations
```

### API development project

```markdown  theme={null}
# API Development Guidelines

## Project Overview
Building a RESTful API for a mobile app backend.

## Technology Stack
- Node.js with Express.js
- MongoDB with Mongoose
- JWT for authentication
- Package manager: npm

## API Standards
- Use semantic HTTP status codes
- Implement proper input validation
- Include rate limiting on public endpoints
- Follow OpenAPI specification for documentation

## Security Requirements
- Validate all user inputs
- Use environment variables for sensitive data
- Implement proper CORS policies
- Include request logging for debugging

## Testing Approach
- Write unit tests for all endpoints
- Include integration tests for critical flows
- Use Jest as the testing framework
```

## Advanced usage

### Dynamic project guidance

Update your `replit.md` file as your project evolves to provide current context:

```markdown  theme={null}
## Current Development Phase
The team is currently focused on implementing user authentication.
Priority features:
1. User registration and login
2. Password reset functionality  
3. Email verification

## Recent Decisions
- Switched from local authentication to OAuth with Google
- Added Redux for state management
- Decided to use Material-UI for consistent styling
```

### Integration with external tools

Reference external documentation and tools in your `replit.md`:

```markdown  theme={null}
## External Resources
- Design system: Follow the Figma design system at [link]
- API documentation: Reference our internal API docs
- Coding standards: Follow the team style guide in our wiki

## Deployment Process
- Test changes in development environment first
- Use the CI/CD pipeline for staging published apps
- Require code review before production releases
```

## Combining web search with `replit.md`

Agent can perform web searches to find current information, libraries, and solutions. When combined with your `replit.md` file, you get both up-to-date knowledge and project-specific guidance.

### Best practices for web search integration

**Be specific about what you want Agent to research:**

```markdown  theme={null}
## Research Preferences
- Always check for the latest versions of dependencies before suggesting updates
- Research current best practices for security implementations
- Look up recent performance optimization techniques for our tech stack
```

**Guide Agent on how to apply external knowledge:**

```markdown  theme={null}
## External Research Guidelines
- When suggesting new libraries, ensure compatibility with our existing stack
- Adapt external examples to match our coding standards and project structure  
- Verify that suggested solutions work with our publishing environment
```

**Example request that leverages both:**
"Research the latest React 18 performance optimization techniques and implement them following the component patterns defined in `replit.md`"

This approach gives you solutions that are both current and tailored to your specific project needs.

## Limitations

### File size and content limits

While there's no strict character limit for `replit.md`, extremely large files may not be fully processed. Keep your `replit.md` focused and concise for best results.

### Root directory requirement

`replit.md` must exist in your project's root directory. Agent won't automatically detect files in subdirectories.

### Context scope

`replit.md` provides context for Agent conversations but doesn't automatically apply to other AI tools.

## Next steps

Ready to customize Agent for your project?

1. **Start simple**: Create a basic `replit.md` with your key preferences
2. **Iterate and improve**: Update your `replit.md` as you work with Agent
3. **Share patterns**: Use successful `replit.md` configurations across similar projects
4. **Monitor effectiveness**: Pay attention to how well Agent follows your guidelines and adjust accordingly

Learn more about [working with Agent](/replitai/agent) or explore other [AI tools](/category/replit-ai).

---

# Source: https://docs.replit.com/replit-workspace/replit-themes.md

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

# Replit Themes

> Personalize your workspace with custom color schemes, syntax highlighting, and UI preferences, or explore and use themes created by the community.

Themes in Replit allow you to customize the appearance of your workspace, from background colors and UI elements to syntax highlighting for your code. Personalize your development environment for better readability, reduced eye strain, and a more enjoyable coding experience.

## Creating a custom theme

Follow these steps to create and customize your own theme:

1. Navigate to your [account page](https://replit.com/account) and scroll to the **Themes** section
2. Select **Create new theme**
3. Enter a title, select a color scheme (light or dark), and add an optional description
4. Select **Create Theme** to open the Themes Editor

Global theme settings control the overall UI appearance:

* **Background**: Sets the base color for most UI surfaces
* **Outline**: Controls the color of borders and dividers
* **Foreground**: Determines text and icon colors
* **Primary**: Defines the color for buttons and interactive elements
* **Positive**: Applies to success indicators like the **Run** button
* **Negative**: Displays for errors and destructive action warnings

Select **Apply Theme** to start using your custom theme immediately.

## Syntax highlighting

Customize how different code elements appear to improve readability and comprehension.

<Tip>
  Proper syntax highlighting makes code easier to scan and understand at a glance. Choose colors that work well together and provide sufficient contrast against your background.
</Tip>

<Accordion title="Syntax highlighting elements">
  | Element                  | Description                                                            |
  | ------------------------ | ---------------------------------------------------------------------- |
  | **Variable Names**       | Applies to variables where no declaration keyword is used              |
  | **Variable Definitions** | Colors variable names when defined with keywords like `const` or `var` |
  | **Function References**  | Applies when calling functions                                         |
  | **Function Definitions** | Colors function names during declaration                               |
  | **Keywords**             | Highlights language keywords like `import`, `function`, and `return`   |
  | **Property Names**       | Colors property access from variables                                  |
  | **Property Definitions** | Used when defining object properties                                   |
  | **Function Properties**  | Applies when calling methods on objects                                |
  | **Tag Names**            | Used for HTML and JSX tags                                             |
  | **Type Names**           | Colors type annotations in typed languages                             |
  | **Class Names**          | Applies to class declarations and references                           |
  | **Attribute Names**      | Highlights HTML and JSX attributes                                     |
  | **Comments**             | Applies to all code comments                                           |
  | **Strings**              | Colors string literals                                                 |
  | **Numbers**              | Highlights numeric values                                              |
  | **Booleans**             | Formats boolean values (`true`/`false`)                                |
  | **Regular Expressions**  | Colors regex patterns                                                  |
  | **Operators**            | Highlights operators like `+`, `-`, `*`, and `/`                       |
  | **Brackets**             | Colors square and angle brackets when appropriate                      |
</Accordion>

## Theme design best practices

Create visually appealing and functional themes by following these guidelines:

### Color and contrast

* **Balance contrast**: Ensure sufficient difference between background and foreground elements
* **Create cohesive palettes**: Choose colors that complement each other rather than clash
* **Maintain consistent brightness**: Keep a similar brightness level across syntax elements
* **Design for accessibility**: Consider users with visual impairments by avoiding low-contrast combinations

<Warning>
  Common theme design issues to avoid:

* Excessive brightness differences between syntax elements
  * Poorly matched colors that create visual discord
  * Insufficient contrast between code and background
</Warning>

## Managing your themes

Access and manage all your installed themes from your [account settings](https://replit.com/account) under the **Themes** section.

### Switching themes

Select the button next to a theme's title to activate it as your current theme.

### Editing themes

Modify your custom themes by selecting the three-dot menu and clicking **Edit**.

<Note>
  Only custom themes that you've created can be edited or deleted. Default themes and themes created by others cannot be modified.
</Note>

### Deleting themes

Remove custom themes using the three-dot menu and selecting **Delete**.

## Exploring community themes

Discover themes created by the Replit community on the [Themes Explore Page](https://replit.com/themes).

### Finding themes

* Search by name to find specific themes like "Atom One Dark"
* Filter by author to explore themes from specific creators
* Browse by color scheme to find light or dark themes
* Search by specific colors to match your preferences

Preview any theme before installing it to see how it will look in your workspace.

## Porting from VS Code

Import your favorite VS Code themes to Replit by mapping equivalent colors during the theme creation process.

## Publishing your theme

Share your custom themes with the Replit community by following these steps:

1. Open the Themes Editor for your custom theme
2. Select the **Publish** button
3. Complete the title and description fields
4. Submit your theme

Once published, your theme will appear on the Themes Explore Page, where other users can preview and install it.

## Related resources

* [Workspace features](/replit-workspace/workspace-features/console) - Explore other workspace features like Console, Shell, and Multiplayer
* [User settings](/replit-workspace/workspace-features/user-settings) - Configure your workspace preferences
* [Keyboard shortcuts](/replit-workspace/keyboard-shortcuts) - Speed up your workflow with keyboard shortcuts
* [Multiplayer collaboration](/replit-workspace/workspace-features/multiplayer) - Collaborate in real-time with team members

---

# Source: https://docs.replit.com/category/replit-workspace.md

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

# Overview

> The Replit workspace is an environment where you can create apps and write code in a single browser tab without any installation or setup. From the workspace, you can create, run, and publish your apps from any device.

The workspace provides instant access to all the tools for creating
your app immediately. Its customizable interface, feature-rich code
editor, and integrated toolset streamline the app development process.

The workspace can help you accomplish the following goals:

* Build apps using only natural language descriptions using Replit's AI-powered tools.
* Collaborate on building an app or conduct interviews using Replit's real-time multiplayer tools.
* Build and publish your app from any web-enabled device, such as a phone, tablet, or laptop.

## What is a Replit workspace?

The workspace is a browser user interface that lets you access Replit tools.
The user interface consists of a dock that lets you quickly open tools and arrange them in
resizable content panes. For a list of tools, see the [Workspace Features](/category/workspace-features/)
documentation.

## Getting started

<Accordion title="How to access the workspace">
  * Select **Create App** and complete the dialog prompts to start a new Replit App.
  * Select **Apps** and open one of your Replit Apps.

From the workspace, access the complete list of tools by performing either of the following:

* Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** in the dock on the left.
  * Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool, then scroll to the "Tools" section.
</Accordion>

### Key features

The workspace offers the following powerful development features:

* Configurable, intuitive layout for viewing tools side by side or in your [preferred arrangement](/replit-workspace/workspace-features/user-settings/)
* Web app preview and interaction through the [**Preview**](/replit-workspace/workspace-features/preview/) tool
* Application log monitoring in the [**Console**](/replit-workspace/workspace-features/console) tool
* Centralized management of your app's API keys and credentials in the [**Secrets**](/replit-workspace/workspace-features/secrets/) tool
* Customizable **Run** button actions in the [**Workflow**](/replit-workspace/workflows/) tool
* Real-time [collaboration](/replit-workspace/workspace-features/multiplayer/) with teammates over the network
* Seamless [publishing](/category/replit-deployments/) to cloud services and database integration
* AI-powered tools like [Agent](/replitai/agent/) for project setup, feature development, and debugging.

## Use cases

The following examples showcase how the workspace can accelerate your app development process.

### Create a full-stack app

Build and publish complete applications with front-end, back-end, and database components using
AI-powered tools.

### Create and share a Template

Publish an app and share it with others as a Template which serves as a foundation for building their
own variations and enhancements.

## Next steps

To learn more about the workspace, see the following resources:

* Explore the workspace setup and tools in [Workspace Features](/category/workspace-features)
* Learn more about the desktop app in [Replit Desktop App](/platforms/desktop-app)
* Learn more about the mobile app in [Replit Mobile App](/platforms/mobile-app)

---

# Source: https://docs.replit.com/cloud-services/deployments/reserved-vm-deployments.md

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

# Reserved VM Deployments

> Reserved VM Deployments publish your Replit App to an always-on cloud server.

A Reserved VM deployment runs on a virtual machine (VM) which provides dedicated computing resources for
your app. This deployment type offers predictable costs and performance without interruptions.

They are ideal for the following use cases:

* Memory-intensive background tasks
* Chat app bots that must stay connected
* Always-on API servers

## Features

Reserved VM Deployments include the following features:

* **Dedicated resources**: Get consistent app performance on reserved compute resources.
* **Custom domains**: Configure a custom domain or use a `<app-name>.replit.app` URL to access your app.
* **Computing resource options**: Choose the VM option that meets your app's performance needs.
* **Configurable port mappings**: Define which ports your app exposes to the internet.
* **Monitoring**: View logs and monitor your published app's status.

## Usage

You can access Reserved VM Deployments in the Deployments workspace tool.

<Accordion title="How to access Reserved VM Deployments">
  From the left **Tool dock**:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=df3fa2573b451c54591523c9d9111db1" alt="Deployments icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/deploy-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=115e9383e0350a6ef201a41f78f8a19a 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=667b93ae66d0b69569409fb90d9fc280 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ae927e5aadcb7a470ad726f0acb0f782 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=16ee8f7b3d9db6b4f74ea8c2ebb6730f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ad04a5984543c13895fd30182294ec0a 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=2449268bce371256727b17027eb180f3 2500w" /> **Deployments**.
  3. Select the **Reserved VM** option and then select **Set up your published app**.

From the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool
  2. Type "Deployments" to locate the tool and select it from the results.
  3. Select the **Reserved VM** option and then select **Set up your published app**.
</Accordion>

### Machine configuration

Select the CPU and RAM configuration for the machine that hosts your deployment. You can view the option's cost next to the selected machine size.

### Primary domain

Specify the subdomain part of the hostname for your published app. After you publish, you can access your published app at `https://<subdomain>.replit.app`.

To learn how to use a custom domain, see [Custom Domains](cloud-services/deployments/custom-domains/).

### Private deployment

<Info>
  The private published app feature is available for Teams and Enterprise plans
  only.
</Info>

Private published apps grant permission to your app only to members of your team or organization.
This control lets you toggle whether to make your published app private.

To learn how to set up a private deployment, see [Private Deployments](/cloud-services/deployments/private-deployments/).

### Build command

Enter the shell command that compiles or sets up your app before running the Run command in the **Build command** field.
For example, to optimize your JavaScript app for a production environment using Vite, you might add the `vite build` command.

### Run command

Enter the shell command that launches your task in the **Run command** field. This command should be similar to the one
you use for your workflow. For example, to start a Flask app called "myApp", you might add the `flask --app myApp run` command.

### Published app secrets

Select **Add published app secret** to add environment variables or secrets your app needs to run securely.

If your Replit App has environment variables or secrets, the Deployment tool adds them to the list automatically.

### App type options

Select one of the following options:

* **Web server**: Select this option if publishing a web app or an app that users can connect to on the internet.
* **Background worker**: Select this option if your app does not listen on a port or start a server.

When you select **Web Server**, you can customize which ports to expose by performing the following actions:

1. Expand the **Port configuration** section.
2. Select **Networking pane to configure** to open the **Networking** tab, where you can manage the port mappings.

For more information on configuring ports, see [Ports](/replit-workspace/ports/).

## Next steps

To learn more about publishing, see the following resources:

* [Published App Monitoring](/cloud-services/deployments/monitoring-a-deployment/): Learn how to view logs and monitor your scheduled deployment.
* [Publishing costs](/billing/deployment-pricing): View the costs associated with publishing.
* [Pricing](https://replit.com/pricing/): View the pricing and allowances for each plan type.
* [Usage Allowances](/billing/about-usage-based-billing/): Learn about scheduled deployment usage limits and billing units.

---

# Source: https://docs.replit.com/teams/projects/resolving-conflicts.md

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

# Conflict Resolution in Projects

> Learn how to handle and resolve merge conflicts when multiple team members make changes to the same files in a Replit Project.

## Overview

When two teammates make changes to the same files in a Project, it is possible to end up with a [merge conflict](https://www.atlassian.com/git/tutorials/using-branches/merge-conflicts).

## Resolving a merge conflict

In this example, the main Replit App has a change to the joke endpoint. In your Replit App, if you also change the joke endpoint and attempt to sync or merge your changes, you'll hit a merge warning:

If you click the "resolve manually" button, the git tool will open up in conflict resolution mode to help you resolve the conflict:

You will see conflict markers `<<<<<<< HEAD`, `=======` and `>>>>>>> dd936daa...`. This is git's way of showing you the conflict it encountered and the two different version of the code it found. The bit between `<<<<<<< HEAD` and `=======` is the version of the joke endpoint found in the main Replit App (which was merged in between the time when you created your fork and the time you attempted to merge your fork), and the bit between `=======` and `>>>>>>> dd936daa...` is your change to the joke endpoint.

Resolving a merge conflict simply means editing the file to remove the conflict markers. Sometimes this means picking one change or the other. Other times this means picking parts of each version to create a blended version. In this situation, you can pick your version of the change:

The "Complete merge and commit" button will be enabled when you have resolved all the conflicts. When you click it, you'll end up with a new commit that resolves the conflict:

You will now be able to merge your changes back into the main Replit App.

---

# Source: https://docs.replit.com/teams/identity-and-access-management/saml.md

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

# SAML

> Learn how to set up and manage SAML single sign-on authentication for your Replit Enterprise Team, including domain configuration and Identity Provider setup.

## Introduction

<Note>
  Only organizations with an Enterprise plan are able to use SAML SSO. [Contact us](https://replit.com/teams#inlineForm) to get started with Enterprise.
</Note>

[SAML](https://en.wikipedia.org/wiki/Security_Assertion_Markup_Language) SSO allows you to use your Identity Provider to authenticate users logging into replit.com. Your Organization's users will be directed to your Identity Provider to authenticate, and your Identity Provider will provide an response back to Replit verifying the user's identity, which Replit uses to log the user into replit.com.

Setting up SAML requires communication with the Replit team. Once you’re familiar with what’s required below, [contact us](https://replit.com/teams#inlineForm) to get started.

## Set up SAML SSO

### Choose your email domains

You can claim multiple email domains and subdomains for your Organization. Any user that attempts to sign up with an email domain that matches your claimed domain will be required to use SAML SSO. Your claimed domains should match what your Identity Provider will report for your users. If you use email domain aliases, you should provide them to Replit as well to prevent your users from signing up without using SAML.

For example, if your company uses email domains matching `acmeco.com`, `foo.acmeco.com`, and `acmebiz.com` you should provide all of these to Replit.

Replit must be able to verify that your organization owns these domains. If you need to add additional domains in the future you can contact us at [support@replit.com](mailto:support@replit.com).

### Setup Replit in your Identity provider

Create a new application or service in your Identity Provider using the following

* **Service Provider (SP) Entity ID**: Your Replit representative will provide this.
* **SSO URL**: `https://replit.com/__/auth/handler`

### Replit enables your SAML SSO

Once you've setup Replit in your Identity Provider, please provide your Replit representative with the following:

* **Identity Provider (IdP) entity ID**: This identifies your IdP to Replit
* **IdP SSO URL**: This is the URL Replit will send users to when authenticating with your IdP
* **Signature Certificate**: An X509 certificate that Replit uses to verify authentication responses from your IdP.

Once we have confirmed setup completion, your Organization is ready to use SAML SSO.

## Using SAML SSO

<Note>
  Signing up in with SAML will not automatically invite users to your organization. For automated user management and bulk operations, see [SCIM](/teams/identity-and-access-management/scim) instead.
</Note>

Once SAML SSO is configured, your users can log in to [replit.com](http://replit.com) using the "Continue with SSO" button.

## FAQ

### What happens to users who already have accounts on replit.com before SAML SSO was setup?

SAML SSO is opt-in for existing users, meaning they can continue to use their existing authentication methods (email or social login). They will not be automatically added to your Organization.

### Are users automatically deprovisioned in Replit when my IdP removes access?

No, SAML SSO only handles authentication. For automated user provisioning and deprovisioning, you can use [SCIM](/teams/identity-and-access-management/scim) integration, which is available for Enterprise customers. SCIM allows you to sync your IdP's directory to automatically manage user roles and provisioning.

### Are Organization seats automatically consumed when users are given access in our IdP?

No, seats are only consumed once a user accepts the invitation to your Organization.

## Related Resources

<CardGroup cols={2}>
  <Card title="SCIM" icon="key" href="/teams/identity-and-access-management/scim">
    Learn about automating user management with SCIM integration
  </Card>

<Card title="Groups & Permissions" icon="shield" href="/teams/identity-and-access-management/groups-and-permissions">
    Understand how to manage user roles and access
  </Card>
</CardGroup>

---

# Source: https://docs.replit.com/cloud-services/deployments/scheduled-deployments.md

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

# Scheduled Deployments

> Scheduled deployments run your Replit App tasks on a schedule with minimal setup.

Define a command-line operation and a schedule, and Replit runs it automatically
in your Replit App's environment. After completion, the operation terminates until the
next scheduled run.

Scheduled deployments, also known as scheduled jobs, work best for handling periodic tasks
such as checking status, sending notifications, and starting backups. They are not designed
for continuous or long-running tasks such as web applications.

## Features

Scheduled deployments include the following features:

* **Automatic scheduling**: Schedule your task, and Replit runs it automatically.
* **Natural language scheduling**: Enter a human-readable description of the schedule, and AI converts it into a cron expression, a computer-readable schedule format.
* **Error alerts**: Receive notifications when your scheduled task fails.
* **Monitoring**: View logs and monitor your scheduled deployment's status.

## Usage

You can access scheduled deployments in the Deployments workspace tool.

The following sections guide you through setting up and managing your scheduled deployments.

<Accordion title="How to access Scheduled Deployments">
  From the left **Tool dock**:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=df3fa2573b451c54591523c9d9111db1" alt="Deployments icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/deploy-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=115e9383e0350a6ef201a41f78f8a19a 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=667b93ae66d0b69569409fb90d9fc280 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ae927e5aadcb7a470ad726f0acb0f782 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=16ee8f7b3d9db6b4f74ea8c2ebb6730f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ad04a5984543c13895fd30182294ec0a 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=2449268bce371256727b17027eb180f3 2500w" /> **Deployments**.
  3. Select the **Scheduled** option and then select **Set up your published app**.

From the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool
  2. Type "Deployments" to locate the tool and select it from the results.
  3. Select the **Scheduled** option and then select **Set up your published app**.
</Accordion>

### Machine configuration

This field lets you view the machine's CPU, RAM, and usage cost for your scheduled deployment.

### Schedule fields

* **Schedule description**: Enter a natural language description of the schedule, such as "Every Monday and Wednesday at 10 AM" or "March 24th, 2024 at 3 PM."
* **Cron expression**: Optionally, enter a computer-readable string that defines when the task should run.
* **Timezone selection**: Select the timezone for the schedule from the dropdown menu.

When you enter a value in the **Schedule description** or **Cron expression** field, AI translates it automatically to match.
To learn more about cron expressions, see the <a href="https://en.wikipedia.org/wiki/Cron" target="_blank">cron</a> Wikipedia page.

### Job timeout

Enter the maximum amount of time the job can run before the scheduler terminates it. Select either "minutes" or "hours from the time unit dropdown.

<Tip>
  Scheduled jobs may run slower than in the Replit App workspace. Test the
  deployment and adjust the timeout accordingly.
</Tip>

### Build command

Enter the shell command that compiles or sets up your app before running the Run command in the **Build command** field.
For example, to install your Node.js app dependencies, you might add the `npm install` build command.

The build command time does not count toward your usage and is not counted against the job timeout.

### Run command

Enter the shell command that launches your task in the **Run command** field.
For example, to run a Python script, you might add `python app.py` as the run command.

The Replit scheduler executes the run command at the scheduled times.
The time it takes to run the command counts toward your usage. For more information on usage billing,
see the [Scheduled Deployments section](/billing/deployment-pricing#scheduled-deployments) in our pricing documentation.

### Deployment secrets

Select **Add deployment secret** to add environment variables or secrets your app needs to run securely.

If your Replit App has environment variables or secrets, the Deployment tool adds them to the list automatically.

To edit the values of an environment variable select the

<img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d6ac2757eaf25e61d31ce51316ec91ad" width="16" height="16" alt="three vertical dots icon" data-og-width="24" data-og-height="24" data-path="images/icons/vertical-dots.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cf215ef22f55bf163c0037f923584e37 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9659b713156cc159f2b9107450cc0fbd 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=73cb1af8587233823aba8f0aec72d1d9 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5d633ba6d10d1d6d6d179b3086869257 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5255815ba3d626d74ede11e23698ccbd 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=15dffd4252b85614141c73a628671cf1 2500w" /> vertical dots and choose **Edit** from the menu. The Secrets manager only applies
value to the deployment and does not change environment variables defined in your
Replit App.

## Next steps

To learn more about deployments, see the following resources:

* [Published App Monitoring](/cloud-services/deployments/monitoring-a-deployment): Learn how to view logs and monitor your published app.
* [Publishing costs](/billing/deployment-pricing): View the costs associated with publishing.
* [Pricing](https://replit.com/pricing): View the pricing and allowances for each plan type.
* [Usage Allowances](/billing/about-usage-based-billing): Learn about scheduled deployment usage limits and billing units.
* [Create a HackerNews Slack bot](https://docs.replit.com/getting-started/quickstarts/webscrape-and-slack-notifications): Learn how to create a Slack bot that checks a website for new content and sends you notifications on a schedule.

---

# Source: https://docs.replit.com/teams/identity-and-access-management/scim.md

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

# SCIM

> Learn how to set up and manage SCIM to simplify provisioning and managing user roles within your Replit Enterprise Team.

## Introduction

<Note>
  SCIM is available exclusively for Enterprise customers. Contact our sales team at [sales@replit.com](mailto:sales@replit.com) to enable this feature for your organization.
</Note>

System for Cross-domain Identity Management ([SCIM](https://en.wikipedia.org/wiki/System_for_Cross-domain_Identity_Management)) is a standardized protocol that automates user provisioning and deprovisioning between your enterprise identity provider (IdP) and Replit.

The SCIM integration is built on the [WorkOS](https://workos.com/) platform, ensuring enterprise-grade reliability and security.

## Key Features

<CardGroup cols={2}>
  <Card title="Automated User Management" icon="user-plus">
    Automatically provision and deprovision users based on your IdP's directory
  </Card>

<Card title="Role Synchronization" icon="shield">
    Keep user roles and permissions in sync with your organizational structure
  </Card>

<Card title="Bulk Operations" icon="users">
    Efficiently manage large teams with bulk user operations
  </Card>

<Card title="Major IdP Support" icon="plug">
    Direct integration with Azure AD, Okta, and other leading identity providers
  </Card>
</CardGroup>

## Benefits

SCIM integration provides several advantages for Enterprise teams:

* **Enhanced Security**: Leverage your existing identity management systems for robust access control
* **Simplified Administration**: Automatically manage team members through your identity provider
* **Efficient Onboarding**: Seamlessly provision large teams without manual intervention
* **Consistent Access Control**: Maintain uniform access policies across your organization

## Getting Started

<Steps>
  <Step title="Enable SCIM">
    Go to your **Organization Settings** > **Authentication** tab to enable SCIM for your Enterprise organization
  </Step>

<Step title="Configure Your IdP">
    Access the SCIM onboarding portal directly from the Authentication settings page. The onboarding portal provides step-by-step instructions specific to your identity provider for synchronizing your user directory
  </Step>

<Step title="Test Integration">
    Verify the connection by provisioning a test user
  </Step>

<Step title="Go Live">
    Begin using SCIM for automated user management
  </Step>
</Steps>

## Best Practices

* Document role allocations for existing Replit users before enabling SCIM
* Configure groups for each Replit role, keeping in mind that users without a group will default to the **Viewer** role
* Test your configuration by provisioning a small group of users before enabling bulk provisioning
* After initial sync, review and configure permissions for custom groups based on your organization's access control needs
* Dedicate role-control groups to control access levels of provisioned users in Replit and use other push groups for user categorization and bulk permission management
* Document your SCIM configuration for future reference

## Role Assignment

All provisioned accounts are created in your Replit organization as "Viewers", which grants the most limited set of permissions and no ability to create apps.

You can bulk edit member roles within your organization by selecting "Assign roles" in your SCIM portal and specifying which role to assign to each push group. For example, you can use this to assign the "Admin" role to the synced "Managers" group, and the "Guest" role to the synced "Contractors" group.

To learn more about viewer access, see [Viewer Seats](/teams/identity-and-access-management/viewer-seats).

## Group Synchronization

All pushed groups from your IdP will be synchronized to Replit with the same members. For example, if you start pushing an "Engineering" group via SCIM, a corresponding "Engineering" group will be created in Replit that includes the same members.

Group membership will be automatically updated to reflect the group membership in your IdP. You can use these synchronized groups for bulk editing member permissions, such as sharing an app with everyone in the "Engineering" group.

For detailed information about groups, see [Groups & Permissions](/teams/identity-and-access-management/groups-and-permissions).

## FAQs

### What happens to users who already have accounts on replit.com before SCIM was setup?

When SCIM is enabled, existing users are handled in two ways:

1. **Users provisioned through SCIM**:
   * Their roles will be updated to match those provided by your IdP
   * These users can only be added, removed, or have their roles changed through your IdP
   * To ensure permissions remain synchronized, admins will no longer be able to edit roles or invite new users within Replit

2. **Users not provisioned through SCIM**:
   * These users remain unchanged and are considered "legacy" users
   * Access is not automatically revoked to prevent accidental deprovisioning
   * Legacy users can be removed through the Replit interface by organization admins if needed

<Warning>
  After implementing SCIM, all users provisioned through your IdP must be managed through your identity provider to maintain synchronization. Only legacy users (those not provisioned through SCIM) can be deprovisioned directly in Replit.
</Warning>

### What roles can be provisioned with SCIM?

SCIM users can be assigned to three roles:

* **Admin**: Full access to organization settings and resources
* **Member**: Standard access to create and edit Replit Apps
* **Viewer**: Read-only access to published applications

During the SCIM onboarding process, you configure the mapping between your IdP groups and Replit roles. For example, you might map your "Engineering" group to the Member role and your "Stakeholders" group to the Viewer role.

### What if I need to edit the role mapping later?

Organization admins can edit SCIM configuration at any time by navigating to **Organization Settings** > **Authentication** > **SCIM**. Here you can access the SCIM portal to update group mappings and manage your integration settings.

## Related Resources

<CardGroup cols={2}>
  <Card title="SAML SSO" icon="key" href="/teams/identity-and-access-management/saml">
    Learn about SAML single sign-on integration
  </Card>

<Card title="Groups & Permissions" icon="shield" href="/teams/identity-and-access-management/groups-and-permissions">
    Understand how to manage user roles and access
  </Card>
</CardGroup>

---

# Source: https://docs.replit.com/replit-workspace/workspace-features/secrets.md

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

# Secrets

> The Secrets workspace tool lets you securely store sensitive information your app needs as encrypted environment variables.

The Secrets tool stores and encrypts **secrets**, your Replit App's sensitive information, such as API keys, authentication tokens, and database connection strings.

When you add a secret, the tool automatically encrypts the data and makes it available to your Replit App as an environment variable.
This approach lets you eliminate hard-coding secrets in your code and reduce the risk of exposing them.

Hard-coding secrets in your codebase can lead to accidental exposure in the following scenarios:

* Sharing your code with others through a public Replit App or copy-paste
* Checking your code into version control in a public repository
* Live streaming or screen sharing your code

Use the Secrets tool to confidently share your code without worrying about exposing credentials.

## Features

Secrets include the following features:

* **End-to-end encryption**: Automatically protect your data using AES-256 encryption at rest and TLS encryption in transit
* **App-level secrets**: Store and manage secrets that are specific to a Replit App
* **Account-level secrets**: Store and manage secrets that you can make available across all your Replit Apps
* **Environment variable access**: Access your secrets from your code using environment variables
* **Collaborative access**: Share secrets with collaborators and team members

## Usage

<Note>
  Secrets are available for all deployment types except Static Deployments.
</Note>

You can access Secrets in the Secrets workspace tool.

<Accordion title="How to access Secrets">
  From the left **Tool dock**:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/lock.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=bf707361895221f07972dea2af22ce12" alt="Secrets icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/lock.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/lock.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=da39ba7154af6d1a1fd13336371baa5e 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/lock.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=da5d50fce5aba0c48839faa1e08744c8 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/lock.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ddc77db2c6740eba86f113046be9fffc 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/lock.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e3c612b54aa26b81626b0ce3beeda0fc 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/lock.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=afc39667bdd3507f016afec0bdc228dc 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/lock.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8aad3e1cd4b3a321d3760db645128afd 2500w" /> **Secrets**.

From the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool
  2. Type "Secrets" to locate the tool and select it from the results.
</Accordion>

### Manage App Secrets

You can manage your app-level secrets in the **App Secrets** tab in the **Secrets** pane.
This tab displays a list of all secrets associated with your Replit App.

<Accordion title="Add App Secrets">
  To add a secret:

1. Select **New Secret**.
  2. Enter a **Key**, the name of the secret, and a **Value**, the secret itself.
  3. Select **Add Secret** to save the entry.
</Accordion>

<Accordion title="Edit App Secrets">
  To edit a secret:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d6ac2757eaf25e61d31ce51316ec91ad" alt="three vertical dots icon" height="16" width="16" data-og-width="24" data-og-height="24" data-path="images/icons/vertical-dots.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cf215ef22f55bf163c0037f923584e37 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9659b713156cc159f2b9107450cc0fbd 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=73cb1af8587233823aba8f0aec72d1d9 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5d633ba6d10d1d6d6d179b3086869257 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5255815ba3d626d74ede11e23698ccbd 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=15dffd4252b85614141c73a628671cf1 2500w" /> vertical dots menu next to the secret.
  2. Select **Edit** from the contextual menu.
  3. Update the text in the **Key** or **Value** field and select **Update Secret** to save changes or **Cancel** to discard changes.

You can also modify the entire list of App Secrets by selecting **Edit as JSON** or **Edit as .env** at the bottom of the tab.
</Accordion>

<Accordion title="View App Secrets">
  To view a secret, select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7079fc956e29af9b424e7ebb698a45a7" alt="eye icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/eye.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=317ec5fd6c6b79d803aac063a78f9568 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a903c9a1c99b7cf63c6d73a8747655d9 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=97a66096841ce0b1f887d212ae94bd73 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e0747ce2aa09c30b172c5c996d2d8987 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c1d86c81d578db02f4fea8cf02e450d0 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=10907b48c07ec82131726ce73527e96b 2500w" /> eye icon next to the secret.

To hide the secret, select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye-slash.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ae8689a686f591b697e1a9a9fd23d7ad" alt="eye with a slash icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/eye-slash.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye-slash.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d2d04539bdea500781b4eeff8cd6cc84 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye-slash.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f0efb4c7ebe7510a2f227529957c69e3 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye-slash.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a05ebd6d98894f0c0950124eee4fca1 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye-slash.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4ac412db5867aefe8e8bbc21d07dce60 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye-slash.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9210692825e23123e892b0f67aaf5599 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye-slash.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e321ddb1fd92451a44d0e30f289848f4 2500w" /> eye with slash icon.
</Accordion>

<Accordion title="Delete App Secrets">
  To delete a secret, select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d6ac2757eaf25e61d31ce51316ec91ad" alt="three vertical dots icon" height="16" width="16" data-og-width="24" data-og-height="24" data-path="images/icons/vertical-dots.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cf215ef22f55bf163c0037f923584e37 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9659b713156cc159f2b9107450cc0fbd 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=73cb1af8587233823aba8f0aec72d1d9 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5d633ba6d10d1d6d6d179b3086869257 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5255815ba3d626d74ede11e23698ccbd 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=15dffd4252b85614141c73a628671cf1 2500w" /> vertical dots menu next to the secret and select **Delete**.
</Accordion>

### Manage Account Secrets

You can manage your account-level secrets in the **Account Secrets** tab in the **Secrets** pane.
This tab displays a list of only secrets associated with your Replit account.

<Accordion title="Add Account Secrets">
  To add an account-level secret:

1. Navigate to the **Account Secrets** tab.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=39c5a0a4872b7416378ddad9f2bef608" alt="gear icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/settings-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e0a36e6a9a2078c02467d2abf0b8ba9e 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3be97f139b63f478d536ccaa51518c9a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4eba230fefbe9836ffd37672275aa7d1 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=97e5099639faf4a5490d8e000c00149a 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4d9552209cee3306d2bc2a02e747ecb6 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d84a81284c0c9af295e0b86273d5c291 2500w" /> **Manage Account**.
  3. Select **New Secret** to add a secret.
  4. Enter a **Key**, the name of the secret, and a **Value**, the secret itself.
  5. Select **Save** to save the entry.
</Accordion>

<Accordion title="Edit Account Secrets">
  To edit a secret:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9fe8b0d62049a6cc25ff54186cd82167" alt="pencil icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/pencil-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=70f222a550c10565fda88d2a405f0919 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2e0254eba779d03f1854e9dceaca64f3 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=63823efefad606fd66371d96f5d4069a 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0529386335540e80fc49377dbccc8cdd 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0479fb149fec299ab1c26d5c723a534f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a9a6290741fad3dcd5d918c07bd79adc 2500w" /> pencil icon next to the secret.
  2. Update the text in the **Key** or **Value** field and select **Save** to save changes or **Cancel** to discard changes.
</Accordion>

<Accordion title="View Account Secrets">
  To view a secret, select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7079fc956e29af9b424e7ebb698a45a7" alt="eye icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/eye.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=317ec5fd6c6b79d803aac063a78f9568 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a903c9a1c99b7cf63c6d73a8747655d9 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=97a66096841ce0b1f887d212ae94bd73 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e0747ce2aa09c30b172c5c996d2d8987 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c1d86c81d578db02f4fea8cf02e450d0 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/eye.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=10907b48c07ec82131726ce73527e96b 2500w" /> eye icon next to the secret.

<Accordion title="Link Account Secrets">
  To use an account-level secret in a Replit App, you must link it to the app.
  To link an account-level secret:

1. Navigate to the **App Secrets** tab.
  2. Select the checkbox to the left of the secret.
  3. Select **Link to this App**.

To unlink a secret:

1. Navigate to the **App Secrets** tab.
  2. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d6ac2757eaf25e61d31ce51316ec91ad" width="16" height="16" alt="three vertical dots icon" data-og-width="24" data-og-height="24" data-path="images/icons/vertical-dots.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cf215ef22f55bf163c0037f923584e37 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9659b713156cc159f2b9107450cc0fbd 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=73cb1af8587233823aba8f0aec72d1d9 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5d633ba6d10d1d6d6d179b3086869257 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5255815ba3d626d74ede11e23698ccbd 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=15dffd4252b85614141c73a628671cf1 2500w" /> vertical dots menu next to the secret.
  3. Select **Unlink**.
</Accordion>

<Accordion title="Delete Account Secrets">
  1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9fe8b0d62049a6cc25ff54186cd82167" alt="pencil icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/pencil-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=70f222a550c10565fda88d2a405f0919 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2e0254eba779d03f1854e9dceaca64f3 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=63823efefad606fd66371d96f5d4069a 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0529386335540e80fc49377dbccc8cdd 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0479fb149fec299ab1c26d5c723a534f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a9a6290741fad3dcd5d918c07bd79adc 2500w" /> pencil icon next to the secret.
  2. Select **Delete**.
</Accordion>

### Access secrets in your code

<CodeGroup>
  ```python Python theme={null}
  import os
  print(os.getenv("MY_SECRET"))
  ```

```javascript JavaScript theme={null}
  console.log(process.env.MY_SECRET);
  ```

```java Java theme={null}
  System.out.println(System.getenv("MY_SECRET"))
  ```

```csharp C# theme={null}
  using System;
  Console.WriteLine(Environment.GetEnvironmentVariable("MY_SECRET"));
  ```

```go Go theme={null}
  package main
  import (
      "fmt"
      "os"
  )
  func main() {
      fmt.Println(os.Getenv("MY_SECRET"))
  }
  ```

```ruby Ruby theme={null}
  puts ENV["MY_SECRET"]
  ```
</CodeGroup>

### Managing secrets visibility

Secrets visibility depends on your access to a Replit App and whether you authored it.

You can use one of the options to share your Replit App:

* **Multiplayer**: Invite Replit users to collaborate in real-time
* **Cover page**: Show a preview of your Replit App with the option to remix it
* **Remix**: Make your individual or organization's Replit App public so others can create their version

The following table shows secret name and value visibility in the different scenarios:

| Access Method      | Who                                        | Can See Names | Can See Values |
| ------------------ | ------------------------------------------ | ------------- | -------------- |
| Multiplayer        | Multiplayer collaborator                   | ✓             | ✓              |
| Multiplayer        | Organization member (Owner role)           | ✓             | ✓              |
| Multiplayer        | Organization member (Non-owner)            | ✓             |                |
| Cover Page         | Any visitor                                |               |                |
| Remix              | Owner/collaborator remixing own Replit App | ✓             | ✓              |
| Remix              | Non-owner/collaborator remixing Replit App | ✓             |                |
| Remix              | Anyone remixing from cover page            | ✓             |                |
| Organization Remix | Organization member with Owner role        | ✓             | ✓              |
| Organization Remix | Organization member without Owner role     | ✓             |                |

<Warning>
  Organization members without the Owner role cannot view secret values in a Replit App, but can access their values by printing the environment variables.
</Warning>

## Database and storage related secrets

When you add Replit's database or object storage, the workspace automatically creates the following secrets:

| Secret         | Description                    |
| -------------- | ------------------------------ |
| `DATABASE_URL` | SQL database connection string |
| `PGHOST`       | PostgreSQL hostname            |
| `PGUSER`       | PostgreSQL username            |
| `PGPASSWORD`   | PostgreSQL password            |
| `PGDATABASE`   | PostgreSQL database name       |
| `PGPORT`       | PostgreSQL port                |

To view all environment variables in your Replit App, run `printenv` in the Shell workspace tool or print them from your code.

## Predefined environment variables

Replit automatically sets the following environment variables that you can access from your app:

| Environment Variable | Description                                                                            |
| -------------------- | -------------------------------------------------------------------------------------- |
| `REPLIT_DOMAINS`     | Comma-separated list of all domains associated with your Replit App                    |
| `REPLIT_USER`        | Username of the current editor, which may vary in Multiplayer sessions                 |
| `REPLIT_DEPLOYMENT`  | Set to `1` if the code is running in a published app, unset otherwise                  |
| `REPLIT_DEV_DOMAIN`  | Development URL on the `replit.dev` domain, which is different from the Deployment URL |

These are not listed in the Secrets tool, but you can access them in your code using the `os.environ` object or running `printenv` in the Shell.

---

# Source: https://docs.replit.com/teams/security-center.md

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

# Security Center

> Scan your organization's apps for vulnerabilities, view CVE details by severity, and export SBOMs for compliance.

<Info>
  Security Center is available exclusively for Enterprise customers.
</Info>

Security Center gives Enterprise admins visibility into vulnerabilities across the organization's Replit Apps. Scan all apps with a single click, view CVE details organized by severity, and export Software Bill of Materials (SBOM) reports for compliance.

## Features

### CVE detection

See vulnerabilities across all dependencies in your organization:

* View CVEs organized by severity (critical, high, medium, and low)
* See affected package names and versions
* Access remediation guidance for each vulnerability

### Affected apps view

Identify which apps contain vulnerabilities:

* See a detailed breakdown of affected Replit Apps
* Filter by severity level to prioritize remediation
* View dependency chains to understand how vulnerabilities were introduced

### SBOM export

Export Software Bill of Materials for compliance and auditing:

* Download SBOMs in standard formats (SPDX, CycloneDX)
* Generate reports for individual apps or your entire organization
* Meet compliance requirements for software supply chain transparency

## Accessing Security Center

To open Security Center:

1. Go to [replit.com](https://replit.com) and sign in to your Enterprise account.
2. Select **Security Center** from the left navigation on the home page.

## Scanning your organization

1. Open Security Center.

2. Select **Scan All Apps** to initiate a scan across the organization.

3. Review the results organized by severity level.

4. Open Security Center.

5. Select **Scan All Apps** to initiate a scan across your organization.

6. Review the results organized by severity level.

Scans analyze all dependencies in the organization's Replit Apps and flag known vulnerabilities from public CVE databases.

<Note>
  Contact the dedicated account manager for help configuring Security Center or integrating SBOM exports into compliance workflows.
</Note>

---

# Source: https://docs.replit.com/replit-workspace/workspace-features/security-scanner.md

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

# Security and Privacy Scanner

> Scan your Replit App for high-impact security and privacy vulnerabilities, then fix them before you publish.

<Note>
  The scanner is currently in beta. It is powerful, but it may occasionally
  report false positives or miss some issues. Review results carefully, and use
  your own judgment before changing code or updating dependencies.
</Note>

## What is Security and Privacy Scanner?

Security and Privacy Scanner helps you find and fix high-impact risks in your Replit App before you ship it.

It focuses on issues that are most likely to affect the safety of your application or your data:

* **Dependency vulnerabilities**: Known issues in the packages your Replit App depends on
* **Static analysis issues (SAST)**: Dangerous patterns in your source code
* **Malicious or unsafe files**: Files that match known-bad or risky signatures
* **Privacy issues**: Potential leaks of sensitive or personal data in your code

Scans run on Replit infrastructure and are powered by partners like **Semgrep Community Edition** and **HoundDog.ai**. Your code and data are **not** sent to these partners or any other third parties.

## Types of vulnerabilities

### Dependency vulnerabilities

These come from a dependency audit of your project’s packages:

* Supports many popular ecosystems (including **Node.js/npm**, **Python**, **Go**, **Rust**, **PHP**, and **Ruby**)
* Captures whether the dependency is direct or transitive
* Includes metadata about the vulnerable package and any available fixes

Examples include:

```json  theme={null}
"express": "4.18.2" // version with a known vulnerability
```

Some dependency issues can be updated automatically, while others may require manual changes or may not have a fix available.

### Static analysis (SAST) issues

Static analysis scans your source files for insecure patterns, like:

```javascript  theme={null}
const query = `SELECT * FROM users WHERE username = '${userInput}'`;
```

SAST findings include:

* File path and exact location (line and column)
* Rule or check name
* A message describing the issue

These are the issues you’ll typically fix directly in your code.

### Malicious or unsafe files

Malicious file detection looks for files that match known-bad or high-risk signatures, such as:

```bash  theme={null}
# malicious setup script from a known supply-chain attack
setup_bun.js
```

For these findings, the scanner shows:

* Why the file is risky
* The paths where it appears
* Suggested mitigation text

You should either remove or carefully inspect these files before continuing.

### Privacy issues

In addition to security issues, the scanner also surfaces potential privacy issues powered by **HoundDog.ai**, especially when sensitive data flows into risky sinks like logs, files, or third-party SDKs and APIs:

* Locations where sensitive data may be exposed
* Rules that describe the privacy concern
* Suggested remediation strategies (for example, deletion vs. sanitization)

For example, the scanner might flag code that logs an entire user profile (including contact details) to an application log:

```javascript  theme={null}
logger.info("New signup", {
  email: user.email,
  phoneNumber: user.phoneNumber,
  address: user.address,
});
```

These findings are powered by **HoundDog.ai** and are labeled as privacy or HoundDog vulnerabilities in the pane.

## Getting started

You can open Security and Privacy Scanner in a few ways:

<Steps>
  <Step>Open the **Security Scanner** pane.</Step>

<Step>
    Use the workspace search/tool palette and search for "Security Scanner".
  </Step>
</Steps>

Once open, the pane will automatically run an initial scan if no previous results exist.

Scans usually complete in minutes, but may take longer for large codebases or dependency graphs.

## Understanding scan results

<Tip>
  The results are organized into two tabs:

* **Active issues**: Issues that are currently considered in scope
  * **Hidden issues**: Issues you have explicitly hidden
</Tip>

Within **Active issues**, you may see:

* **Automatic dependency vulnerabilities**: Dependency issues that can be fixed by updating packages.
* **Static analysis issues**: Code-level vulnerabilities with file and line references.
* **Malicious file issues**: Known-bad or risky files in your project.
* **Privacy issues**: Locations where sensitive or personal data might be at risk.

### Severity

Each issue has a severity:

* **Critical**
* **High**
* (Lower severity level like moderate/low/info may be present in underlying data but are not prioritized in this pane.)

The scanner focuses on **high** and **critical** issues so you can address the most impactful problems first.

### Hiding and re-activating issues

You can:

* **Hide** a non-critical issue you understand and are willing to accept.
* **Move to active** to bring a previously hidden issue back into the Active issues tab.

## Fixing issues

The scanner integrates with both dependency tooling and Replit AI Agent to help you fix problems quickly.

### Automatic dependency updates (Node.js)

For supported Node.js projects, you’ll see an **Update automatically** button for certain dependency vulnerabilities.

If your project or ecosystem is not supported, you may still see dependency vulnerabilities, but the automatic update button might be disabled for your Replit App.

### Fix with Agent

Most vulnerability cards include a **Fix with Agent** button:

* Opens or attaches to a Replit Agent session.
* Sends the vulnerability details to Agent.
* Agent proposes and applies fixes in your Replit App, while you stay in control.

After fixes are applied, run the scanner again to confirm the issues are resolved.

### Viewing existing Agent sessions

If you already started fixing vulnerabilities with Agent, you may see a **View Agent Session** button on an issue:

* Select it to jump back into the associated Agent chat.
* Continue iterating on the fix or ask follow-up questions about the vulnerability.

## Privacy and data handling

Security and privacy scanning are powered by **Semgrep** and **HoundDog.ai**, but:

* All scanning runs **locally on Replit infrastructure**.
* Your code and data are **not sent** to Semgrep, HoundDog.ai, or other third parties.
* Scan configuration and results stay attached to your Replit App.

## Limitations and best practices

Keep in mind:

* **Beta**: The scanner may occasionally report false positives or miss issues.
* **Language support**:
  * Dependency scanning supports many popular ecosystems (including **Node.js/npm**, **Python**, **Go**, **Rust**, **PHP**, and **Ruby**).
  * Automatic dependency fixing is currently focused on **Node.js/npm**.
* **Not a full security review**: Use it alongside code review, tests, and live app checks.
* **Re-run after changes**: Re-run the scanner after:
  * Adding or updating dependencies
  * Making major code changes
  * Before publishing a new version

For best results, treat the scanner as part of your normal development workflow, not a one-time check.

## Next steps

* Learn more about [Publishing](/category/replit-deployments) and how to publish your Replit App once scans are clean.
* Explore [Replit AI Agent](/replitai/agent) to fix security and privacy issues directly from the workspace.
* Check out [Workspace Features](/category/workspace-features) for more tools to improve code quality, performance, and reliability.

---

# Source: https://docs.replit.com/legal-and-security-info/security.md

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

# Security

> Your code, applications, and data are important. We're committed to protecting them—Replit's security is our security, too.

## Reporting a Vulnerability

Please use the following dedicated channel for all security-related concerns:

* **Email**: `security@replit.com`
* **Subject**: "Security Vulnerability Report".
* **Body**: Describe the nature of the vulnerability in detail, including the steps to reproduce it if possible. Please include any relevant information that would help us understand the severity and scope of the issue, such as the potential impact on user data or system integrity.

## Responsible Disclosure

Pursuant to our [terms of service](https://replit.com/site/terms), you should not take any actions
that interfere or disrupt the service. If you are in doubt, and think there might be a risk of service
disruption, then don't try to verify the bug yourself – email us and we'll work with you to verify it.

Email [security@replit.com](mailto:security@replit.com) with a description of the issue and we'll respond as soon as possible.

---

# Source: https://docs.replit.com/extensions/api/session.md

# session API

> Access and manage the current user's coding session in the Replit workspace, including active file tracking and change listeners.

The session api provides you with information on the current user's coding session in the workspace.

## Usage

```ts  theme={null}
import { session } from '@replit/extensions';
```

## Methods

### `session.onActiveFileChange`

Sets up a listener to handle when the active file is changed

```ts  theme={null}
onActiveFileChange(listener: OnActiveFileChangeListener): DisposerFunction
```

### `session.getActiveFile`

Returns the current file the user is focusing

```ts  theme={null}
getActiveFile(): Promise<null | string>
```

## Types

### DisposerFunction

A cleanup/disposer function (void)

```ts  theme={null}
() => void
```

### OnActiveFileChangeListener

Fires when the current user switches to a different file/tool in the workspace.  Returns null if the current file/tool cannot be found in the filesystem.

```ts  theme={null}
(file: string | ) => void
```

---

# Source: https://docs.replit.com/tutorials/share-database-across-apps.md

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

# Share a database across multiple apps

> Learn how to expose your Replit database as a REST API to share data securely across multiple apps and external services.

Share your database across multiple apps by exposing it as a REST API. This lets other apps securely read and write your data through HTTP requests while keeping everything in one place.

## Add an API to your existing app

Ask **Agent** to create a REST API for your database. Agent will set up endpoints, add authentication, and protect your data.

<Steps>
  <Step title="Open your app">
    Open the app that contains the database you want to share.
  </Step>

<Step title="Ask Agent to create the API">
    <AiPrompt>
      Expose my database as a REST API secured with an API key. Create endpoints for all CRUD operations on my existing tables. Use Drizzle ORM for safe database queries. Store the API key in Secrets as API\_KEY.
    </AiPrompt>

Agent will set up everything you need automatically.
  </Step>

<Step title="Add your API key">
    1. Open the **Secrets** tab
    2. Add a secret: `API_KEY` with a secure password
    3. This key protects your database from unauthorized access
  </Step>

<Step title="Publish your app">
    1. Select **Run** to test your API
    2. Select **Publish** > **Autoscale** to get a public URL
    3. Your database is now accessible to other apps
  </Step>
</Steps>

## Example: Database API template

See a working example with the [Database API Example template](https://replit.com/@matt/Replit-Database-API-Example?utm_source=replit\&utm_medium=docs\&utm_campaign=database-helium). Fork it to start a new database API from scratch, or explore the code to understand how it works.

The template includes:

* Automatic database setup with sample data
* API endpoints for all CRUD operations
* API key authentication
* Drizzle ORM for safe queries

<Steps>
  <Step title="Fork the template">
    Open the [Database API Example template](https://replit.com/@matt/Replit-Database-API-Example?utm_source=replit\&utm_medium=docs\&utm_campaign=database-helium) and fork it.
  </Step>

<Step title="Add an API key">
    1. Open the **Secrets** tab
    2. Add `API_KEY` with a secure password
  </Step>

<Step title="Run and publish">
    1. Select **Run** to start the API
    2. Select **Publish** > **Autoscale** when ready
  </Step>
</Steps>

## Connect from other apps

Ask **Agent** to write the connection code in any of your other apps:

<AiPrompt>
  Create a backend endpoint that connects to my database API at https\://\[YOUR-APP].replit.app. Use the API key from secrets (API\_KEY) on the server side. Create routes to fetch and display data from the API.
</AiPrompt>

Be sure to replace \[YOUR-APP] with your app's name. Agent will handle authentication and error handling automatically, keeping your API key secure on the server.

### API endpoints reference

Your database uses standard REST endpoints. For an `items` table:

| Action   | Method | Endpoint         |
| -------- | ------ | ---------------- |
| List all | GET    | `/api/items`     |
| Get one  | GET    | `/api/items/:id` |
| Create   | POST   | `/api/items`     |
| Update   | PUT    | `/api/items/:id` |
| Delete   | DELETE | `/api/items/:id` |

All requests need an `X-API-KEY` header with your API key.

### Write your own connection code

If you prefer to code the connection yourself, use these backend examples:

<CodeGroup>
  ```javascript Node.js (Backend) theme={null}
  const API_URL = 'https://your-app.replit.app';
  const API_KEY = process.env.API_KEY;

const response = await fetch(`${API_URL}/api/items`, {
    headers: { 'X-API-KEY': API_KEY }
  });
  const items = await response.json();
  ```

```python Python (Backend) theme={null}
  import os
  import requests

API_URL = 'https://your-app.replit.app'
  API_KEY = os.environ['API_KEY']

response = requests.get(
      f'{API_URL}/api/items',
      headers={'X-API-KEY': API_KEY}
  )
  items = response.json()
  ```
</CodeGroup>

<Warning>
  These examples are for **backend code only**. Never use API keys in frontend/browser code - they will be exposed to anyone viewing your page source. For frontend apps, create a backend endpoint that proxies requests to your database API.

Always store your API key in **Secrets**, not in your code.
</Warning>

## Add more tables

Extend your database as your app grows:

<AiPrompt>
  Add a users table with email, name, and role columns. Create API endpoints for users with the same authentication as the existing endpoints.
</AiPrompt>

Agent will update your schema, create endpoints, and apply authentication automatically.

## How it works

Your API acts as a central hub. When an app needs data, it sends a request to your API. The API checks the API key, then reads or writes to your database. Multiple apps share one database securely.

## Security

Your API includes built-in protection:

* **API key authentication**: Only apps with the correct key can access your database
* **SQL injection protection**: Drizzle ORM prevents malicious queries
* **Data validation**: The API checks all data before saving

<Warning>
  Store your API key in **Secrets**, never in code.
</Warning>

Only share your API key with apps you trust.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Can't connect from another app">
    * Publish your database API app (not just run it)
    * Use your published URL ending in `.replit.app`
    * Verify both apps have the same API key in Secrets
    * Check the secret is named `API_KEY` in both apps
  </Accordion>

<Accordion title="Authentication errors">
    * Store the API key in **Secrets**, not in code
    * Verify the API key matches in both apps
    * Check the secret is named `API_KEY` (all caps)
  </Accordion>

<Accordion title="Need help">
    Ask **Agent** to troubleshoot:

<AiPrompt>
      I'm trying to connect to my database API but getting errors. Can you help me debug the connection?
    </AiPrompt>
  </Accordion>
</AccordionGroup>

## Next steps

* [Database](/cloud-services/storage-and-databases/sql-database) - Create and manage databases
* [Connect to a database](/getting-started/quickstarts/database-connection) - Learn connection methods
* [Production databases](/cloud-services/storage-and-databases/production-databases) - Set up production databases

---

# Source: https://docs.replit.com/replit-workspace/workspace-features/shell.md

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

# Shell

> Shell is a command-line tool that lets you run commands in your Replit App's workspace.

Shell lets you perform tasks on the operating system in your workspace such as managing files,
installing packages, and running scripts. It provides a powerful text-based interface to
interact with your Replit environment.

You can use Shell to run the following tasks in your workspace:

* Execute scripts and programs
* Install and run popular Linux tools and packages
* Upload and download files from the internet
* Manage workspace files and directories

<Tip>
  For better workflow management, prefer the **Run** button instead of running your app from
  the Shell. The workflow started by the **Run** button sends output to the Console tool,
  which provides a structured way to review the logs.
</Tip>

## Features

Shell provides the following capabilities:

* **Run multiple shells**: Open multiple shell instances to work on different tasks simultaneously
* **Search for text**: Find specific text in the shell output

## Usage

<Accordion title="How to access Shell">
  From the left **Tool dock**:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/shell.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=ab5e9d6c6250d108a291a694d127b428" alt="Shell icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/shell.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/shell.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7990bfd3eb97b5cfe87f8eb88cf39983 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/shell.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4e726268e08df775a9968bbf011486d6 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/shell.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5a8d45fe468099341fd2e25a5020166b 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/shell.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b2522e4e0f3446db50b7af21c4457ea1 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/shell.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0e0dac9049462edadd55d78d5acfa5be 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/shell.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=03f99fac9e87769da2734551479787fc 2500w" /> **Shell**.

From the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool
  2. Type "Shell" to locate the tool and select it from the results.
</Accordion>

### Text search

The following steps describe how to access and use the text search tool:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top right of the Shell tab to open the search dialog.
2. Enter a search term and select **Next** to navigate through the matches.
3. Use **Previous** to go back to prior matches.
4. Select **Exit** or click outside the dialog to exit the text search.

### Multiple shells

To create a new shell, select the menu at the top left of the **Shell** tab arrow and select **New Shell** as shown below:

Use the same menu to switch between shells. The workspace labels each shell with the last command executed to help you identify them.

<Warning>
  When you open more than one shell, Replit automatically closes idle shell instances.
  An idle shell is unselected and not running any user processes.
</Warning>

## Next steps

To learn more about related Workspace tools see the following resources:

* [Console](/replit-workspace/workspace-features/console/): Learn how to use Console to monitor your Replit App workflows.

---

# Source: https://docs.replit.com/replitai/skills.md

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

# Agent Skills

> Extend Agent with reusable capabilities that automate tasks and add specialized functionality to your projects.

Teach Agent how you want to build. Skills let you share your preferences, patterns, and expertise with Agent—whether you're starting a new project or building on existing work.

## What are skills

Skills teach Agent how you work. As you build together, you create useful context about your project, but that context normally disappears when the chat ends. Skills preserve what you've learned so Agent can apply it consistently. Tasks that were previously inconsistent become more reliable, producing better results each time.

For example, a design system skill ensures Agent uses your exact colors and spacing rules. A bug fix skill captures solutions so Agent remembers them for next time.

## When to use skills

You can create skills for anything, from how you structure your code to how you write your docs. Here are some examples to get you started:

| Use Case                        | Example Scenario                                                                                                      |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Design systems**              | Create a skill for your design system so Agent uses consistent colors, spacing, and components                        |
| **New frameworks**              | Add a skill for Remotion when building video features or other specialized libraries                                  |
| **Media creation**              | Teach Agent photography principles for AI-generated images                                                            |
| **Learning how your app works** | After fixing a complex bug together, create a skill that captures what you both learned about your app's architecture |

## Adding skills to your project

Skills become part of your project once they're added to the `/.agent/skills` directory. You can create skills naturally through conversation with Agent, install pre-built skills from the community, or write custom skills for specialized needs.

### Create with Agent

The most natural way to create skills is through conversation. After solving a problem together, ask Agent to capture what it learned. The skill writes itself from shared context.

```
Create a skill for my design system using these color palettes and spacing rules
```

You can also ask Agent to research and create skills for new domains:

```
Research best practices for video generation with Remotion and create a skill
```

### Upload and manage custom skills

You can upload and manage skills directly through the Workspace. Open the Skills pane to view installed skills, upload custom skill files, or remove skills you no longer need.

For advanced use cases, write your own skills following the [Agent Skills specification](https://agentskills.io/specification). This gives you complete control over Agent's behavior for specific scenarios.

### Install from the skills directory

The [Agent Skills directory](https://skills.sh) offers community-contributed skills you can install directly. Replit supports installation via the [npx skills CLI](https://github.com/vercel-labs/skills):

```bash  theme={null}
npx skills <skill> -a replit
```

This installs the skill into your project's `/.agent/skills` directory.

<Warning>
  Skills contain arbitrary content and code. Always review the source before
  installing a skill from external sources.
</Warning>

## Technical reference

Skills are stored in your project's `/.agent/skills` directory. Each skill follows the [Agent Skills specification](https://agentskills.io/specification), which defines the structure and format for skill files.

Agent reads all skills in this directory and considers them when working on tasks. Skills persist in your project, so they remain available across Agent sessions and can be committed to version control for team sharing.

Skills can be scoped to different levels:

* **Project-level**: Specific to one codebase, versioned with your code in `/.agent/skills`
* **User-level**: Your personal toolkit that follows you across projects
* **Enterprise** (coming soon): Company-wide standards and shared knowledge

<Note>
  Skills work best when they capture specific, repeatable patterns rather than
  general guidance. Focus on concrete workflows, established conventions, and
  proven solutions from your project.
</Note>

## Working with other AI coding tools

<Accordion title="Import skills from other AI coding tools">
  If you work across multiple AI coding tools, [rulesync](https://github.com/dyoshikawa/rulesync) has Replit support and helps you maintain consistent configurations.

You can import skills from other AI coding assistants:

```bash  theme={null}
  npx rulesync init
  npx rulesync import --targets claudecode --features skills
  npx rulesync generate --targets replit --features skills
  ```

This allows you to maintain a single set of skills that work across different development environments.
</Accordion>

## Next steps

Skills complement Agent's core capabilities by adding project-specific knowledge:

* Learn more about [Agent](/replitai/agent) and how it builds applications
* Explore other [AI-powered features](/category/replit-ai) available in Replit
* Review the [Agent Skills specification](https://agentskills.io/specification) to understand skill structure
* For examples of custom skills, see [Anthropic's skills repository](https://github.com/anthropics/skills)
* Browse community skills at [skills.sh](https://skills.sh)

---

# Source: https://docs.replit.com/extensions/examples/snippet-manager.md

# Snippet Manager

> Learn how to build a snippet manager extension that lets developers store and organize code snippets directly within the Replit workspace.

In this tutorial, we will build a snippet manager extension with React. A snippet manager is a tool used for storing and organizing commonly used pieces of code or text that can be quickly accessed.

## Prerequisites

This tutorial assumes that you have a basic knowledge and understanding of web development and React.

## Set up your Replit App

1. Fork the [Replit React Extension Template](https://replit.com/@replit/React-Extension?v=1).
2. Install the `react-feather` package with `npm install react-feather`.

## Configure the manifest file

Configure the title and description in `public/extension.json` (the Extension [manifest file](../api/manifest)).

```json  theme={null}
{
  "name": "Snippet Manager",
  "description": "Easily access snippets of code directly within the Replit workspace",
  "version": "0",
  "tags": ["snippet", "manager", "tool"]
}
```

Add the `tools` property to `extension.json` and provide a tool that handles the `/` route of your application. This will allow your extension to appear as a tool in the sidebar.

```json  theme={null}
"tools": [
  {
    "handler": "/",
    "name": "Snippet Manager"
  }
]
```

## Build the Snippet Manager

Import the following dependencies in `src/App.jsx`

```js  theme={null}
import { useReplit, useReplitEffect } from "@replit/extensions-react";
import { replDb } from "@replit/extensions";
import { useState } from "react";
import "./App.css";
```

Remove all the existing code from the `App` function and add state variables `snippets` and `newSnippetValue`. `snippets` will store all of the snippets you've created and `newSnippetValue` will be a string for when you create a new snippet.

```jsx  theme={null}
function App() {
  const [snippets, setSnippets] = useState([]);
  const [newSnippetValue, setNewSnippetValue] = useState("");

return (
    <main>
      <h1>Snippet Manager</h1>
    </main>
  );
}
```

### Initialize the Handshake

Initialize the handshake and derive the `status` and `error` properties from the [`useReplit hook`](../development/react/hooks/useReplit) within the `App` function.

The `status` property is an enumerated value indicating whether the handshake connection with Replit is `loading`, `ready`, or has resulted in an `error`.

```js  theme={null}
function App() {
  ...
  const { status, error } = useReplit();
  ...
}
```

### Handle Handshake Statuses

Handle the `loading` and `error` statuses from the `useReplit` hook. If the Extension is neither loading nor has resulted in an error, the main content will be rendered.

```jsx  theme={null}
function App() {
  ...

if(status === 'error') {
    return <div className="screen">
      <h2>Error: {error.message}</h2>
    </div>
  }

if(status === 'loading') {
    return <div className="screen">
      <h2>Loading...</h2>
    </div>
  }

return <main>
    <h1>Snippet Manager</h1>
  </main>
}
```

Paste the following CSS code into `src/App.css` to apply basic styling to your exstension. If you refresh the extension, the snippets you've added will be saved.

```css  theme={null}
body {
  background-color: rgb(40, 40, 40);
  color: white;
  margin: 0;
  font-family: sans-serif;
}

main {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

main h1 {
  margin-top: 0;
  margin-bottom: 16px;
}

.screen {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
```

### Snippet Creation

Create an empty function `insertSnippet` within the `App` function.

```js  theme={null}
const insertSnippet = () => {};
```

Add the following JSX code into the `App` function after the `h1` tag. This will be a basic form to create a new snippet.

```jsx  theme={null}
<div className="create-snippet-form">
  <textarea
    placeholder="Enter a new snippet here..."
    value={newSnippetValue}
    onChange={(e) => setNewSnippetValue(e.target.value)}
  >

``` Define an asynchronous function `updateSnippets` in `App`. This will allow us to update the `snippets` state variable and save it using the [replDb module](../api/replDb) at the same time. Values saved to a Replit App's database get automatically URI-decoded so encoding has to happen twice. Replit App Databases can only store key-values as strings. [Read More](https:/.replit.com/cloud-services/storage-and-databases/replit-database). ```js theme={null} const updateSnippets = async (snippetsArr) => { setSnippets(snippetsArr); await replDb.set({ key: "snippets", value: encodeURIComponent(snippetsArr.map(encodeURIComponent).join(",")), }); }; ``` Back in the `insertSnippet` function, use the `updateSnippets` function to insert and save `newSnippetValue` to the list of snippets. ```js theme={null} const insertSnippet = () => { updateSnippets([...snippets, newSnippetValue]); setNewSnippetValue(""); }; ``` Add the following CSS code into `src/App.css` to style the snippet creation form: ```css theme={null} .create-snippet-form { display: flex; } .create-snippet-form textarea { flex-grow: 1; margin-right: 8px; } textarea, button { padding: 8px; background-color: rgb(90, 90, 90); border-radius: 8px; border: none; color: white; outline: none; } textarea:focus, textarea:hover { border: none; outline: none; box-shadow: 0 0 0 2px #3273dc; } textarea::placeholder { color: rgb(200, 200, 200); } button { cursor: pointer; } button:focus, button:hover { outline: none; background-color: #3273dc; } ``` ### Load and list the snippets Define an asynchronous function `loadSnippets` in `App`. This function will fetch all the snippets from the Replit database and update the `snippets` state variable. ```jsx theme={null} const loadSnippets = async () => { const snippetsFromDB = await replDb.get({ key: "snippets", }); if (snippetsFromDB) { setSnippets(snippetsFromDB.split(",").map(decodeURIComponent)); } }; ``` Call the [`useReplitEffect` hook](../development/react/hooks/useReplitEffect) to run the `loadSnippets` function once, when Replit successfully connects to your Extension. ```js theme={null} useReplitEffect(() => loadSnippets(), []); ``` Add the following code to the main UI after the `.create-snippet-form` element. Display each snippet as a paragraph from the `snippet` state variable. ```jsx theme={null}

{snippets.map((snippet, index) => (

{snippet}

))}

``` [Install your extension](/extensions/development/installation), start creating some snippets, watch as they appear in realtime. ### The Snippet Component You will be able to copy, edit, and delete snippets from the `Snippet` component with the click of a button. Create a file `src/components/Snippet.jsx` and import the following dependencies: ```js theme={null} import { messages } from "@replit/extensions"; import { Copy, Edit2, Trash } from "react-feather"; import { useState, useEffect } from "react"; ``` Create and export the `Snippet` component. The props declared in this component are as follows: * `content` is the value of the snippet * `index` is a number signifying the index of the snippet * `snippets` is a full list of all the snippets in the database * `updateSnippets` is the asynchronous function passed down from the `App` component Add two state variables `isEditing` and `value`. `isEditing` indicates whether the snippet is being edited and `value` is the new value which will be used when editing the snippet, before it is saved. ```jsx theme={null} export const Snippet = ({ content, index, snippets, updateSnippets }) => { const [isEditing, setIsEditing] = useState(false); const [value, setValue] = useState(content); return

Snippet Component

; }; ``` Add a useEffect hook to set `value` to `content` whenever `content` updates. The prop will change when snippets get edited and deleted. ```js theme={null} useEffect(() => setValue(content), [content]); ``` Create a function `copyToClipboard`. Handle the asynchronous clipboard event with the `.then()` and `.catch()` methods. Use the [`messages` module](../api/messages) to display whether the action was successful or not. ```js theme={null} const copyToClipboard = () => { window.navigator.clipboard .writeText(content) .then(async () => await messages.showConfirm("Copied to clipboard")) .catch(async (e) => await messages.showError(e.message)); }; ``` Define a function `saveEdit`. This will update the current snippet to reflect the `value` state variable and save it to the database. ```js theme={null} const saveEdit = async () => { const snippetsArr = [...snippets]; snippetsArr[index] = value; await updateSnippets(snippetsArr); setIsEditing(false); }; ``` Add a function `deleteSnippet`. After it is confirmed that the user wants to delete the snippet, remove the snippet from both the application state and the database. ```js theme={null} const deleteSnippet = async () => { const shouldDelete = confirm("Are you sure you want to delete this snippet?"); if (shouldDelete) { const snippetsArr = [...snippets]; snippetsArr.splice(index, 1); await updateSnippets(snippetsArr); await messages.showConfirm("Snippet Deleted"); } }; ``` Complete the UI of the `Snippet` component with the following JSX code. If the snippet is being edited, a different component will be shown. ```jsx theme={null} return isEditing ? (

setValue(e.target.value)} />
    <div className="snippet-button-row">
      <button onClick={() => setIsEditing(false)}>Cancel</button>
      <button onClick={saveEdit}>Save</button>
    </div>
  </div>
) : (
  <div className="snippet">
    <p>{content}</p>

<button onClick={() => setIsEditing(true)}>
        <Edit2 />
      </button>

<button onClick={deleteSnippet}>
        <Trash />
      </button>
    </div>
  </div>
);
```

Apply the following CSS to `src/App.css`:

```css  theme={null}
.snippet {
  padding: 8px;
  background: rgb(70, 70, 70);
  margin-bottom: 8px;
  display: flex;
  padding: 8px;
  border-radius: 8px;
}

.snippet p {
  flex-grow: 1;
  margin: 0;
  padding: 0;
}

.snippet-buttons {
  display: flex;
}

.snippet-buttons button {
  margin-left: 8px;
}

.edit {
  flex-direction: column;
}

.edit textarea {
  margin-bottom: 8px;
}

.edit .snippet-button-row button {
  margin-right: 8px;
}
```

### Display the snippets

In `App.jsx`, import the `Snippet` component.

```js  theme={null}
import { Snippet } from "./components/Snippet";
```

Update the `.snippet-list` div to render the new component.

```js  theme={null}
snippets.map((snippet, index) => (
  <Snippet
    key={index}
    content={snippet}
    snippets={snippets}
    updateSnippets={updateSnippets}
    index={index}
  />
));
```

Finally, style the snippet list with the following CSS:

```css  theme={null}
.snippet-list {
  flex-direction: column;
  display: flex;
  margin-top: 8px;
}
```

***

The Snippet Manager extension is now complete! [Install it](/extensions/development/installation), open the Tools section on the sidebar, and select the Snippet Manager extension. You can now easily save and access your favorite snippets directly within your Replit App.

[See full solution](https://replit.com/@IroncladDev/Snippet-Manager)

---

# Source: https://docs.replit.com/cloud-services/storage-and-databases/sql-database.md

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

# Database

> Replit Database is a SQL database built-in to your Replit App. It allows you to store and retrieve data for your app and users.

Replit Database uses a fully-managed SQL database that lets you add persistent data storage to your Replit App from the Workspace.

<Note>
  The fastest way to get started is to ask **Agent** to add a database to your app. Agent will set up the integration, create the database schema, and update your app to store and retrieve data.
</Note>

## Features

The Replit Database tool provides the following features:

* **Database tools**: Run queries, manage database schema, and visualize data with the built-in SQL tools
* **Time travel**: Restore your database to any **Agent** checkpoint using the [rollback feature](/replitai/checkpoints-and-rollbacks/)
* **Free storage**: Includes 10GB of free storage for every Replit App.
* **Environment variables**: Use environment variables in your Replit App to securely access the database

<Info>
  Prior to December 4th, 2025, the development database was hosted on Neon and has a few crucial differences.
  See the [Legacy Neon Development Database](#legacy-development-database) section for more details.
</Info>

## Usage

You can access the Replit Database tool directly in your Replit App Workspace.
The following sections guide you through setting up and managing your Database.

<Accordion title="How to access the Replit Database tool">
  From the left **Tool dock**:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3cf383ef9ff4e8b5bad4792121dd6769" alt="PostgresSQL database icon" data-og-width="24" width="24" data-og-height="24" height="24" data-path="images/icons/postgres.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=17b80617d665ef3812021c0fdb3b43cf 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=10bdd7a13380255ddf3af617d08c9220 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a5cacd83bc584eca88ddf943cc98b52f 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cfa8597cf0b3622644faedce574dae7d 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5cf63513422bdc89684306e71bc0d267 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=14b4db671a736545614e0140edff2fdd 2500w" /> **Database**.

From the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool
  2. Type "Replit Database" to locate the tool and select it from the results.
</Accordion>

### Add a database

All Replit Apps come with a database by default. You can access it by selecting the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3cf383ef9ff4e8b5bad4792121dd6769" alt="PostgresSQL database icon" data-og-width="24" width="24" data-og-height="24" height="24" data-path="images/icons/postgres.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=17b80617d665ef3812021c0fdb3b43cf 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=10bdd7a13380255ddf3af617d08c9220 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a5cacd83bc584eca88ddf943cc98b52f 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cfa8597cf0b3622644faedce574dae7d 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5cf63513422bdc89684306e71bc0d267 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=14b4db671a736545614e0140edff2fdd 2500w" /> **Database** tool in your workspace.

You can integrate the database with your Replit App by asking the **Agent** to add a PostgreSQL database to your Replit App,
including details on what data your Replit App should store. The Agent will create the database schema
and update your app to communicate with the database.

### Restore your database to a previous state

You can revert your app and database to a previous state using the [rollback feature](/replitai/checkpoints-and-rollbacks/).
This feature allows you to restore your database to any checkpoint created by **Agent**.

<Info>
  Make sure to select "Database" under "Additional rollback options" when restoring to the state of a checkpoint. This will restore your database to the state it was at the time of the checkpoint.
</Info>

### Run database commands

The SQL runner is a Workspace tool that lets you run SQL commands on your database and view the results.

<Accordion title="How to access SQL runner">
  From the **Replit Database** tool:

1. Select the **My Data** tab
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-runner-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4f2e172b249503888506d56a5f7ba6b8" alt="SQL runner icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/sql-runner-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-runner-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cea74a96d54872b6fca9a0e2894fa758 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-runner-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7938d3c944b60a72ac89b2ee545627bb 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-runner-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=76c11cfa82562777d3d6fd6caac08b90 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-runner-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d85752c4c2569041cfa4d5a74f71aa26 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-runner-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=801bbcdcf3475a4f95c7fb7ab674e7d3 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-runner-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5d63171cf521aa1938952f3a7571765b 2500w" /> **SQL runner**
</Accordion>

To run a query, enter the SQL statement in the text area and select the
adjacent <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-play.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=09a71d59110569ebe7d0d4def83e24ac" alt="sql run icon" data-og-width="18" width="18" data-og-height="18" height="18" data-path="images/icons/sql-play.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-play.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=42205b2701320867d3c30bb9470413ee 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-play.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=30ad9ca945dc61541836549ed1dd9fe5 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-play.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=bcd637e207a19d4f546211a6f56c4452 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-play.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b86f39281a91c06102265a51bf7a8f2e 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-play.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=fbd1089a57f148f2cbe008471bfe0f63 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/sql-play.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=66624797f8cff119e8d719723f80bba7 2500w" /> run button
as shown below:

### Browse and modify data visually

The Replit Database tool includes <a href="https://orm.drizzle.team/drizzle-studio/overview" target="_blank">Drizzle Studio</a>,
a tool that lets you browse and modify data visually.

These visual tools help you avoid syntax errors and offer the following functionality:

* Filter and sort data to focus on specific information
* Export data to a file for external use
* Insert or modify row data
* Create and manage schema, tables, views, and enums

You can access these tools in the **My Data** tab in the **Replit Database** tool.

The following image shows a view from the Drizzle Studio builder interface:

<Tip>
  You can connect to your database using any PostgresSQL-compatible SQL client using the connection string
  found in your [environment variables](#environment-variables).
</Tip>

### View connection credentials and usage

Your database connection credentials are stored as environment variables in your Replit App.
These credentials are used by your app to securely connect to the database and run commands.

<Accordion title="How to access your database connection credentials">
  1. Navigate to the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3cf383ef9ff4e8b5bad4792121dd6769" alt="PostgresSQL database icon" data-og-width="24" width="24" data-og-height="24" height="24" data-path="images/icons/postgres.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=17b80617d665ef3812021c0fdb3b43cf 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=10bdd7a13380255ddf3af617d08c9220 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a5cacd83bc584eca88ddf943cc98b52f 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cfa8597cf0b3622644faedce574dae7d 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5cf63513422bdc89684306e71bc0d267 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/postgres.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=14b4db671a736545614e0140edff2fdd 2500w" /> **Replit Database** tool in your workspace
  2. Select either the Development or Production database
  3. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=39c5a0a4872b7416378ddad9f2bef608" alt="gear icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/settings-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e0a36e6a9a2078c02467d2abf0b8ba9e 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3be97f139b63f478d536ccaa51518c9a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4eba230fefbe9836ffd37672275aa7d1 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=97e5099639faf4a5490d8e000c00149a 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4d9552209cee3306d2bc2a02e747ecb6 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d84a81284c0c9af295e0b86273d5c291 2500w" /> **Settings** tab (the gear icon). This tab shows the connection credentials and storage usage for your database.
</Accordion>

#### Environment variables

The following environment variables are available:

* `DATABASE_URL`: how to connect and authenticate to the database
* `PGHOST`: database hostname
* `PGUSER`: database username
* `PGPASSWORD`: database password
* `PGDATABASE`: database name
* `PGPORT`: database port

This `DATABASE_URL` can only be used by your app and even if leaked, it cannot be used by anyone else to access and modify your database.

To learn how to use these credentials in your code, see [Connect your app to a SQL database](/getting-started/quickstarts/database-connection/).

<Info>
  Because this `DATABASE_URL` is scoped to your app, your development database cannot be accessed by other apps, even ones you own or external database viewers.
  This separation follows security best practices and prevents unauthorized access to your database.

If you need multiple Replit Apps to share a single database, you can expose it as a REST API. See the tutorial on [sharing a database across multiple apps](/tutorials/share-database-across-apps) to learn how to set up a secure database API service.
</Info>

<Warning>
  If you are still on the [legacy Neon development database](#legacy-development-database), do not share your `DATABASE_URL`.
  It contains your database credentials which could be used by anyone to access and modify your database.
  Never paste it in public places or support tickets.
</Warning>

### Security features

When you add a database integration using **Agent**, it adds an Object-Relational Mapper (ORM)
that handles all database communications with built-in security.

This ORM layer, combined with Agent's security best practice implementation, protects your app from
exploits through the following features:

* **Schema validation**: Verifies data conforms to expected formats
* **Data sanitization**: Automatically cleans up builder input to prevent SQL injection attacks

## Legacy Development Database

Prior to December 4th, 2025, the development database was hosted on <a href="https://neon.com/" target="_blank">Neon</a>.
This database is now deprecated and all new development databases are hosted on Replit's own database infrastructure.

You can see if your development database is hosted on Neon by checking the `DATABASE_URL` [environment variable](#view-connection-credentials-and-usage).

<Info>
  If `DATABASE_URL` contains `neon.tech/neondb`, then your development database is still hosted on Neon.
  Otherwise if it contains `helium/heliumdb` then your development database is now hosted on Replit.
</Info>

The following are the key differences between the legacy Neon development database and the new Replit development database:

| **Feature**             | **Replit (current)**                                                                                                                                              | **Neon (legacy)**                                                                                                          |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Hosting**             | Hosted on Replit's own infrastructure                                                                                                                             | Hosted on Neon (third-party provider)                                                                                      |
| **Billing**             | Included for free with every Replit App                                                                                                                           | Usage-based billing. See [Publishing and Database Billing](/billing/about-usage-based-billing#databases) for more details. |
| **Restore capability**  | Restore your database to any checkpoint using the [rollback feature](/replitai/checkpoints-and-rollbacks/)                                                        | Point-in-time restore (PITR)—recover to any point within backup retention window.                                          |
| **Connection security** | Only accessible from within your app; never exposed publicly.                                                                                                     | Used a full connection string—if leaked, anyone could access and modify your database.                                     |
| **Remixing behavior**   | [Remixing](/getting-started/quickstarts/remix-an-app) creates a new development database with copied data for isolation and security.                             | Remixing reuses the same database for all copies, so changes in remixes could affect the original app.                     |
| **Database creation**   | Automatically created for each Replit App.                                                                                                                        | Required explicit setup.                                                                                                   |
| **Publishing workflow** | Deploying or publishing requires creating a [production database](/cloud-services/storage-and-databases/production-databases) for isolation between environments. | Development and production shared the same database, so unintended development changes could affect production apps.       |

---

# Source: https://docs.replit.com/replit-workspace/ssh.md

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

# SSH

> Learn how to set up and use SSH to connect your local development environment to Replit Apps for secure remote access and file synchronization.

## What is SSH?

SSH, which stands for Secure Shell, is a secure protocol that facilitates remote access to your Replit App's command line interface. With SSH, you can seamlessly transfer files and leverage your preferred local Integrated Development Environment (IDE) for editing code on Replit, enhancing collaboration and productivity in your development workflow.

SSH functionality is available for Core, Teams, and all other paid plans.

Here's an overview of the process:

* Generate an SSH keypair on your local machine
* Add that SSH key to the **SSH** pane inside any Replit App
* Connect using an SSH client or an editor which can work over SSH (like [VSCode](https://code.visualstudio.com/) or [Cursor](https://www.cursor.com/))

<Note>
  SSH keys are associated with your account, not a particular Replit App. This means that you only need to add a public key once, after which you can connect to any Replit App you have access to.
</Note>

## Why use SSH?

* **Automatic updates between Replit App and editor**: Any changes made in the Replit App are reflected in your editor instantly, and any modifications in the editor are updated in the Replit App. This seamless synchronization ensures that your codebase is always up-to-date across platforms.

* **File management synchronization**: Whether you add, delete, or update files, these changes are synchronized in real time between your editor and the Replit App. This feature ensures that your project structure remains consistent, regardless of where the changes are initiated.

* **Folder management and file moving**: Moving files across folders is also synchronized between your editors and the Replit App. This ensures that organizational changes made in one environment are accurately reflected in the other, maintaining the integrity and structure of your project.

## Find or create a keypair

To configure SSH for your account, you'll need your SSH public key.

### Figuring out if you already have a keypair

You can check if you already have a public key by running the following command in a Terminal on your local computer:

<Tabs>
  <Tab title="Mac/Linux">
    ```sh  theme={null}
    ls -l ~/.ssh
    ```
  </Tab>

<Tab title="Windows">
    ```sh  theme={null}
    dir %HOMEPATH%\.ssh
    ```
  </Tab>
</Tabs>

If you get an error, that's OK, proceed to [Generating a new keypair](#generating-a-new-keypair).
If you see a file called `replit.pub`, please proceed to [Get the contents of your public key](#get-the-contents-of-your-public-key).

### Generating a new keypair

On your machine, open a Terminal (or Command Prompt) window and paste the following command:

<Tabs>
  <Tab title="Mac/Linux">
    ```bash  theme={null}
    ssh-keygen -t ed25519 -f ~/.ssh/replit -q -N ""
    ```
  </Tab>

<Tab title="Windows">
    ```sh  theme={null}
    ssh-keygen -t ed25519 -f %HOMEPATH%\.ssh\replit -q -N ""
    ```
  </Tab>
</Tabs>

This command checks if a specific SSH public key file already exists. If not, it creates a new SSH key with some sensible parameters.

### Get the contents of your public key

Once you have either confirmed you have a keypair or created one, display the contents of the public key (one of the two similarly named files, suffixed with `.pub`), as we'll need that for later.

<Tabs>
  <Tab title="Mac/Linux">
    ```sh  theme={null}
    cat ~/.ssh/replit.pub
    ```
  </Tab>

<Tab title="Windows">
    ```sh  theme={null}
    notepad %HOMEPATH%\.ssh\replit.pub
    ```
  </Tab>
</Tabs>

Save the contents of `replit.pub` to use later in this article and proceed to [add the SSH key to your account](#add-the-ssh-key-to-your-account).

## Add the SSH key to your account

### Add the public key directly in a Replit App, using the SSH pane

1. In your Replit App on any window, select the **+** button, then search for **SSH**.

2. Navigate to the **Keys** tab and select **New SSH key**.
3. In the popup window, enter a **Label** for your key (e.g., my-ssh-key) and paste the public key you copied into the **Key** section.
   Select the **Add SSH Key** button. Your key has been added and authorized for use.

### Add the public key directly in your Account

You can also add an SSH key by navigating to your [**Account**](https://replit.com/account#ssh-keys) and selecting **SSH keys**.

Select the **Add SSH key** button and paste in the contents of `replit.pub` that we obtained from the previous section, [Find or create a keypair](#find-or-create-a-keypair).

<Note>
  When you have multiple public keys on your machine, it's important to ensure that you use the correct combination of private and public keys for your SSH configuration.
</Note>

## Connecting to your Replit App

### Configure your SSH config

1. In a terminal, ensure the `~/.ssh` directory and `~/.ssh/config` file exist:

<Tabs>
  <Tab title="Mac/Linux">
    ```sh  theme={null}
    mkdir -p ~/.ssh && chmod 700 ~/.ssh && touch ~/.ssh/config && chmod 600 ~/.ssh/config
    open -a 'TextEdit' ~/.ssh/config || nano ~/.ssh/config
    ```
  </Tab>

<Tab title="Windows">
    ```sh  theme={null}
    if not exist %HOMEPATH%\.ssh mkdir %HOMEPATH%\.ssh && type \NUL > %HOMEPATH%\.ssh\config
    notepad %HOMEPATH%\.ssh\config
    ```
  </Tab>
</Tabs>

2. Add a configuration block to use the `replit` keypair for all \*.replit.dev domains:

<Tabs>
  <Tab title="Mac/Linux/Windows">
    ```
    Host *.replit.dev
        Port 22
        IdentityFile ~/.ssh/replit
        StrictHostKeyChecking accept-new
    ```
  </Tab>
</Tabs>

### Connect from VSCode or Cursor

1. From a Replit App, open the **SSH** pane

2. In the SSH pane, navigate to the **Connect** tab and select **Launch VS Code**.

3. If you are prompted to fill out `~/.ssh/config`, enter the following:

```
   Host *.replit.dev
       Port 22
       IdentityFile ~/.ssh/replit
       StrictHostKeyChecking accept-new
   ```

<Note>
     Adding SSH configuration is only prompted the first time you are trying to connect to VS Code or another editor. To return to the configuration file, you will need to select **Configure SSH Hosts...**.
   </Note>

4. If prompted by an external application warning, select **Yes** to confirm you want to open your project in your preferred editor or VS Code.

5. You may be asked to install or update SSH extensions periodically. Replit will endeavor to be compatible with the latest versions of these IDEs, and you may get important security updates as well.

### Connect manually

At the bottom of the **SSH** pane's "Connect" tab, you will find "Connect manually".

Copy that command, paste it into either a local Terminal (Mac or Linux) or local Command Prompt (Windows) in order to connect directly.

This is also a good way to debug connection issues with IDEs, as well as to collect valuable "verbose" connection information when reporting bugs to Replit Support.

**An error indicating we are attempting to connect with a nonexistent private key**:

```
$ ssh -i ~/.ssh/replit -p 22 c96b6ade-d5e4-4f7a-bc5b-52334509b2a3@c96b6ade-d5e4-4f7a-bc5b-52334509b2a3-00-16nh2hskw3ql8.riker.replit.dev
Warning: Identity file /Users/user/.ssh/replit not accessible: No such file or directory.
```

**Full debug logs of an SSH connection attempt, to include with a bug report**:

```
$ ssh -vvv -i ~/.ssh/replit -p 22 c96b6ade-d5e4-4f7a-bc5b-52334509b2a3@c96b6ade-d5e4-4f7a-bc5b-52334509b2a3-00-16nh2hskw3ql8.riker.replit.dev
OpenSSH_9.6p1, LibreSSL 3.3.6
debug1: Reading configuration data /Users/.../.ssh/config
debug1: /Users/.../.ssh/config line 1: Applying options for *
debug1: /Users/.../.ssh/config line 4: Applying options for *.replit.dev
debug3: channel_clear_timeouts: clearing
debug1: Connecting to c96b6ade-d5e4-4f7a-bc5b-52334509b2a3-00-16nh2hskw3ql8.riker.replit.dev port 22.
debug1: Connection established.
debug1: identity file /Users/dstewart/.ssh/replit type 3
debug1: Local version string SSH-2.0-OpenSSH_9.6
debug1: Remote protocol version 2.0, remote software version Replit-SSH-Proxy
debug1: compat_banner: no match: Replit-SSH-Proxy
debug3: fd 5 is O_NONBLOCK
...
Welcome to the Replit SSH Proxy.

Visit https:/.replit.com/replit-workspace/ssh to learn more about SSH on Replit.
debug3: receive packet: type 51
debug1: Authentications that can continue: password,publickey
debug3: start over, passed a different list password,publickey
debug3: preferred publickey,keyboard-interactive,password
debug3: authmethod_lookup publickey
debug3: remaining preferred: keyboard-interactive,password
debug3: authmethod_is_enabled publickey
debug1: Next authentication method: publickey
...
debug2: we did not send a packet, disable method
debug3: authmethod_lookup password
debug3: remaining preferred: ,password
debug3: authmethod_is_enabled password
debug1: Next authentication method: password
```

### Connect via a tool not listed here

There are many SSH clients available for different platforms and operating systems, many offering different features or integrations.

You can always break down the command displayed in "Connect Manually" into its constituent components to determine how to configure each client:

```sh  theme={null}
ssh -i ~/.ssh/replit -p 22  c96b6ade-d5e4-4f7a-bc5b-52334509b2a3@c96b6ade-d5e4-4f7a-bc5b-52334509b2a3-00-16nh2hskw3ql8.riker.replit.dev
       ^-----v-----^    ^^  ^-----------------v----------------^ ^------------------------------v-------------------------------------^
        Private Key   Port                   User               @                           Hostname
```

**Hostname**: `<your_hostname>.<cluster>.replit.dev`
**Port**: `<port_number>`
**User**: `Username`
**Private Key**: Path to the private key file on your computer. Usually next to `replit.pub`.

---

# Source: https://docs.replit.com/billing/plans/starter-plan.md

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

# Starter Plan

> Learn about the Starter plan features, limitations, and what you can build for Free.

export const TeamsCredits = '$40';

export const CoreCredits = '$25';

export const FreeDeployments = '1';

export const StarterWorkspaceStorage = '2GB';

## What you get

The Starter plan gives you everything you need to start building on Replit. Create apps, use AI integrations, and publish  your first project — all at no cost.

### Daily credits for Agent

Starter plan users receive daily credits for Agent usage, up to a monthly cap. These credits reset daily, giving you a fresh allowance to work with Agent each day.

### Monthly credits for cloud usage

You also receive monthly credits that can be used for:

* [Databases (Production)](/cloud-services/storage-and-databases/production-databases)
* [Object storage](/cloud-services/storage-and-databases/object-storage)
* [AI Integrations](/replitai/replit-ai-integrations)
* [Publishing (Autoscale, static)](/category/replit-deployments)

These credits reset each month.

### New faster Build Mode

Access to a newer, faster Build Mode that's improved over the previous version. This enhanced Build Mode delivers better results and faster responses when working with Agent.

### One free published app

Get {FreeDeployments} free published app whether you're using Build mode or Design mode. This published link will automatically go down after 30 days.

Your published app will include a "Made with Replit" badge that contains your unique referral link. If another user signs up with that link from your badge, you'll receive referral credits once you upgrade to a paid plan.

## Limitations

The following features require upgrading to Core:

### Autonomous Mode

Autonomous Mode, which allows Agent to work independently with minimal supervision and more power, is only available on our paid plans.

### Converting from a Design to a full app

Converting a Design to a full app requires Core. Starter plan users can create designs and deploy them, but converting to a full app with backend functionality requires an upgrade. If you want to build an app with backend functionality, you try that out by starting in Build Mode.

### Third-party connectors

External connectors require Core. This includes integrations with services like Google, Stripe, and other third-party APIs (See more info [here](https://docs.replit.com/replitai/integrations#connectors)).

### Remove "Made with Replit" badge

Removing the "Made with Replit" badge from your published apps requires Core. Starter plan users will have the badge displayed on their deployments.

### Additional published apps

Starter plan users get {FreeDeployments} free published app. Additional published apps beyond this require Core or Teams.

### Plan Mode

Using Plan Mode requires Core. Plan Mode allows you to brainstorm ideas, plan work, and collaborate with Replit Agent without editing your app's code or data.

### App Types

Building apps other than web and mobile apps require Core. Choose from a variety of pre-configured technology types including automation apps, data apps, and more.

## Upgrading to Core

Ready for more? Upgrade to Core to unlock:

* **More storage and monthly credits** that also let you pay-as-you-go
* **Unlimited published apps** beyond your first free one
* **Autonomous Mode** for hands-off development
* **Third-party connectors** to connect with external services
* **Plan Mode** to map out tasks before jumping into a build.
* **Replit Badge removal** for a professional look
* And more

<CardGroup cols={2}>
  <Card title="View Pricing" icon="dollar-sign" href="https://replit.com/pricing">
    Compare plans and see pricing details
  </Card>

<Card title="Learn About Core" icon="star" href="/replit-core/replit-core">
    Discover all Core plan features
  </Card>
</CardGroup>

## Next steps

Ready to start building? Here's how to get the most from your Starter plan:

* **[Create your first app](/getting-started/quickstarts/ask-ai)**: Build a full-stack app
* **[Try Design Mode](/replitai/design-mode)**: Create beautiful designs in under 2 minutes
* **[Publish your app](/category/replit-deployments)**: Publish your deployment and share what you've built with others

---

# Source: https://docs.replit.com/getting-started/quickstarts/static-blog-astro.md

# Create a static blog with Astro

> Build and publish a modern static blog using Astro on Replit. Learn how to use Static Deployments for fast, reliable content delivery.

Learn how to create a static blog using Astro's powerful features. This guide shows you how to publish a pre-configured blog template with Replit's static hosting.

## What you'll learn

<CardGroup cols={2}>
  <Card title="Static Sites" icon="globe">
    Build fast, modern static websites
  </Card>

<Card title="Astro Framework" icon="rocket">
    Use Astro's powerful features
  </Card>

<Card title="Content Management" icon="newspaper">
    Create and organize blog posts
  </Card>

<Card title="Deployment" icon="cloud">
    Publish with static hosting
  </Card>
</CardGroup>

## Create your blog

<Steps>
  <Step title="Fork the template">
    Sign in to Replit and fork the [Astro starter kit template](https://replit.com/@replit-matt/Blog-with-Astro?v=1#README). Select **+ Use Template** and follow the prompts to create your Replit App.

<Tip>
      Review the README file in the template for details about the project structure.
    </Tip>
  </Step>

<Step title="Configure your blog">
    The template includes:

* Pre-configured blog layout
    * Markdown support
    * Responsive design
    * SEO optimization
  </Step>

<Step title="Publish your site">
    1. Select **Publish** in the workspace header
    2. Choose **Static** deployment
    3. Keep the default publishing values
    4. Select **Publish**

<Note>
      Static deployments are optimized for content-focused sites like blogs.
    </Note>
  </Step>
</Steps>

## Customization options

<CardGroup cols={2}>
  <Card title="Content">
    * Add blog posts - Create new pages - Customize layouts
  </Card>

<Card title="Styling">
    * Modify themes - Add components - Update typography
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="Custom Domain" icon="globe" href="/cloud-services/deployments/custom-domains">
    Add your own domain
  </Card>

<Card title="Publishing" icon="cloud" href="/cloud-services/deployments/static-deployments">
    Learn about static hosting
  </Card>

<Card title="Developer Frameworks" icon="puzzle-piece" href="/replit-workspace/templates">
    Explore more developer frameworks
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Build with AI" icon="wand-magic-sparkles" href="/getting-started/quickstarts/build-with-ai">
    Create apps using Agent and Assistant
  </Card>

<Card title="Create a file converter" icon="file-arrow-up" href="/getting-started/quickstarts/build-with-ai">
    Build a file conversion app
  </Card>
</CardGroup>

<Note>
  Want to learn more about web development? Check out our [web hosting documentation](/category/replit-deployments).
</Note>

---

# Source: https://docs.replit.com/cloud-services/deployments/static-deployments-advanced.md

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

# Static Deployment Configuration

> Static deployments let you control the HTTP headers, routing rules, and URL rewrites for your static website.

This guide covers the following web server-level configurations:

* [Add response headers](#add-response-headers)
* [Create a custom 404 page](#create-a-custom-404-page)
* [Define URL path rewrites](#define-url-path-rewrites)

## Add response headers

Custom **response headers** let you add HTTP header instructions to requests that match specific paths.
A response header is a name-value pair that provides instructions to browsers on how
to interact with the requested content.

For example, you can specify the `Access-Control-Allow-Origin` header to specify which domains the browser can access for that page.
To create this entry, add the following to the `.replit` file in your Replit App's root directory:

```
[[deployment.responseHeaders]]
path = "/*"
name = "Access-Control-Allow-Origin"
value = "origin"
```

This response header includes the following parameters:

* **path**: URL path pattern that matches requested resources
* **name**: HTTP header name
* **value**: Value of the HTTP header

You can add multiple `deployment.responseHeaders` entries to the `.replit` file.

To apply configuration updates, republish your Replit App.

#### Reserved headers

Replit reserves the following HTTP headers and does not allow you to configure them.

```text [expandable] theme={null}
Accept-Ranges
Age
Allow
Alt-Svc
Connection
Content-Encoding
Content-Length
Content-Range
Date
Location
Server
Set-Cookie
Trailer
Transfer-Encoding
Upgrade
```

<Tip>
  To learn more about HTTP headers, see

<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers" target="_blank">
    HTTP headers
  </a>

in the MDN web documentation.
</Tip>

## Create a custom 404 page

A custom 404 page displays when users request URL paths that don't match any files or rules in your published app.

To add a custom 404 page, create the page content in a file named `404.html` in the root directory of your Replit App.

When users attempt to access a URL path that doesn't exist, they see the rendered HTML of the custom 404 page.

## Define URL path rewrites

You can define URL rewrites to change the URL path of a request before your Replit App processes it.
The original URL remains visible in the browser, but the server loads the resource defined in the rewrite rule.

For example, you can specify all requests that start with `/app` load the contents of the `/app/index.html` file.
To create this entry, add the following to the `.replit` file in your Replit App's root directory:

```
[[deployment.rewrites]]
from = "/app/*"
to = "/app/index.html"
```

* **from**: URL path pattern that matches requested resources
* **to**: Rewritten path, which corresponds to a file in your Static Deployment.

You can add multiple `deployment.rewrites` entries to the `.replit` file.
The server interprets the entries in the listed order and ignores duplicates.

To apply configuration updates, you must republish your Replit App.

The following sections describe URL rewrite rule constraints.

### Path matching

The following constraints apply to the `from` and `to` parameters in rewrite rules:

* Matches must be exact unless a `*` is present
* A `*` matches the remainder of a path
* A `*` is only valid at the end of the path
* When including `*` in the `from` parameter, you can include it in the `to` parameter to represent the matching section of the path

For example, if your `.replit` file contains the following rewrite:

```
[[deployment.rewrites]]
from = "/v1/*"
to = "/v2/*"
```

When a user visits the path `/v1/about-us.html`, the rewrite serves the file located at `/v2/about-us.html`.

### Shadowing

Shadowing occurs when a rewrite matches a URL path that also matches a file in your Static Deployment.
When this occurs, the cloud server ignores the rewrite and serves the file directly.

For example, suppose your published app contains the following files:

* `index.html`
* `about.html`

The `.replit` file contains the following rewrite:

```
[[deployment.rewrites]]
from = "/*"
to = "/index.html"
```

When a user visits `/register.html`, the server rewrites the request to `/index.html` and serves that file.
However, if a user visits `/about.html`, the server ignores the rewrite and serves the `about.html` file since it exists in your Static Deployment.

### Domain restrictions

Rewrites only work for requests to your Static Deployment's primary domain and can
only redirect to files within your Static Deployment.

---

# Source: https://docs.replit.com/cloud-services/deployments/static-deployments.md

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

# Static Deployments

> Static Deployments publish your static websites and frontend apps to a cost-effective cloud server.

Static Deployments host your Replit App's static files, such as HTML, CSS, and JavaScript
on a cloud server. The server automatically uses caching and scaling strategies to deliver
your content quickly and economically.

Static Deployments are ideal for the following use cases:

* Marketing landing pages
* Portfolio websites
* Product and API documentation sites

<Note>
  Static Deployments are not compatible with Replit Apps created using Agent.
  Agent automatically creates full-stack apps that require a backend server. For
  Agent-generated apps, use one of the following deployment types: - [Autoscale
  Deployment](/cloud-services/deployments/autoscale-deployments) - [Reserved VM
  Deployment](/cloud-services/deployments/reserved-vm-deployments)
</Note>

## Features

Static Deployments include the following features:

* **Cost-effective hosting**: Pay only for the amount of data your website serves.
* **HTTP routing options**: Configure response headers, URL rewrites, and redirects.
* **Custom domains**: Configure a custom domain or use a `<app-name>.replit.app` URL to access your app.
* **Custom error pages**: Create and serve a custom 404 error page.
* **Monitoring**: View logs and monitor your published app's status.

## Usage

You can access Static Deployments in the Deployments workspace tool.

<Accordion title="How to access Static Deployments">
  From the left **Tool dock**:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=df3fa2573b451c54591523c9d9111db1" alt="Deployments icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/deploy-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=115e9383e0350a6ef201a41f78f8a19a 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=667b93ae66d0b69569409fb90d9fc280 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ae927e5aadcb7a470ad726f0acb0f782 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=16ee8f7b3d9db6b4f74ea8c2ebb6730f 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ad04a5984543c13895fd30182294ec0a 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/deploy-icon.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=2449268bce371256727b17027eb180f3 2500w" /> **Deployments**.
  3. Select the **Static** option and then select **Set up your published app**.

From the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool
  2. Type "Deployments" to locate the tool and select it from the results.
  3. Select the **Static** option and then select **Set up your published app**.
</Accordion>

### Primary domain

Specify the subdomain part of the hostname for your published app. After you publish, you can access your published app at `https://<subdomain>.replit.app`.

To learn how to use a custom domain, see [Custom Domains](cloud-services/deployments/custom-domains/).

### Private deployment

<Info>
  The private published app feature is available for Teams and Enterprise plans
  only.
</Info>

Private published apps grant permission to your app only to members of your team or organization.
This control lets you toggle whether to make your published app private.

To learn how to set up a private deployment, see [Private Deployments](/cloud-services/deployments/private-deployments/).

### Public directory

Specify the base directory path in your Replit App that contains the static files you want to serve publicly.
After you deploy, the cloud host serves all pages and assets in that directory.

The default value, `/`, is the root directory of your Replit App.

### Build command

Specify a build command to run in your Replit App's shell when you create your Deployment.

For example, if you generate a static site using <a href="https://gohugo.io/" target="_blank">Hugo</a>,
you might use the command `hugo --minify` to generate the files and optimize asset file sizes.

### Deployment secrets

Select **Add deployment secret** to add environment variables or secrets your build command needs to run securely.

For example, if your site generator requires an API key to create your static site, you might pass it
`API_KEY=<your secret name>`.

## Next steps

* [Static Deployment Configuration](/cloud-services/deployments/static-deployments-advanced): Configure HTTP headers, a custom 404 page, and URL rewrites
* [Published App Monitoring](/cloud-services/deployments/monitoring-a-deployment): View logs and monitor your published app
* [Publishing costs](/billing/deployment-pricing): View the costs associated with publishing
* [Pricing](https://replit.com/pricing): View the pricing and allowances for each plan type
* [Usage Allowances](/billing/about-usage-based-billing): Learn about scheduled deployment usage limits and billing units

---

# Source: https://docs.replit.com/category/storage-and-databases.md

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

# Storage and Databases

> Learn about file storage and database options on Replit.

Using Replit's flexible storage solutions, you can quickly add the perfect
data storage your app needs to run. You can use Replit's database or object storage
for apps with the following requirements, and Agent can automatically set up and integrate both solutions:

* A game that needs to save player information such as progress or high scores
* A content platform that manages media files

## What are Replit's storage and database options

Replit offers the following data storage options:

* **Database**: stores structured data such as user profiles, game scores, and product catalogs.
  You can store or retrieve data by attributes and relationships between data points.

* **App Storage**: stores unstructured data such as images, videos, documents.
  You can store and retrieve large files and binary data.

### App Storage and database comparison

|                       | Database                                | App Storage                             |
| --------------------- | :-------------------------------------- | :-------------------------------------- |
| **Ideal data format** | Structured data with relationships      | Large files (images, videos, documents) |
| **Data model**        | Tables, rows, columns                   | Buckets, files                          |
| **Query language**    | SQL                                     | REST API                                |
| **Clients**           | PostgresSQL-compatible clients and ORMs | Replit SDKs and GCS client libraries    |
| **Billing model**     | Pay for compute time and storage space  | Pay for bandwidth and storage space     |

### Workspace tools

Learn more about the following Replit tools to set up and manage your app's data storage:

<CardGroup>
  <Card title="Database" href="/cloud-services/storage-and-databases/sql-database/" icon="database">
    Ideal for structured data and representing data relationships.
    Backed by a fully-managed PostgresSQL database that scales with your app.
  </Card>

<Card title="App Storage" href="/cloud-services/storage-and-databases/object-storage/" icon="bucket">
    Ideal for unstructured data and large files, such as images, videos, and documents.
    Backed by Google Cloud Storage (GCS) for high availability and scalability. Agent can automatically set up App Storage with advanced authentication and access controls.
  </Card>
</CardGroup>

## Getting started

The quickest way to get started with Replit's storage solutions is to follow one of the tutorials below:

<CardGroup cols={3}>
  <Card title="Database" href="/getting-started/quickstarts/database-connection/" icon="database">
    Connect your app to a SQL database
  </Card>

<Card title="App Storage in Python" href="/getting-started/quickstarts/object-storage-python/" icon="python">
    Manage App Storage using the Replit Python SDK
  </Card>

<Card title="App Storage in JavaScript" href="/getting-started/quickstarts/object-storage-javascript/" icon="js">
    Manage App Storage using the Replit JavaScript SDK
  </Card>
</CardGroup>

## Use cases

The following examples show how the database and object storage tools can support your Replit Apps.

### E-commerce app

Store product information, customer profiles, and order history in the database.
Use SQL queries to filter products by category, search for items, and manage customer orders.

### File sharing app

Share large files such as images, videos, and documents using App Storage.
Use the Replit App Storage SDK to upload, download, and move files.

## Next steps

* [Database](/cloud-services/storage-and-databases/sql-database/): Learn about the database workspace tool and how to connect your Replit App to a database
* [App Storage](/cloud-services/storage-and-databases/object-storage/): Learn how to use Replit's App Storage solution

---

# Source: https://docs.replit.com/additional-resources/streaming-native-graphics-vnc.md

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

# Streaming native graphics using VNC

> Replit offers virtual network computing (VNC) functionality. VNC is a mature virtual desktop protocol that allows your Replit App to stream a native desktop to your web browser. This protocol allows native applications (developed in Python, Java, C++, etc.) to open desktop windows as they would on any physical computer.

This streaming technology allows you to work with legacy applications in your browser from any device! For example, you could run a Python-powered game designed for desktop right on your mobile phone or tablet without making any changes to the underlying code.

<a href="https://replit.com/@demcrepl/Tetris-in-Pygame" target="_blank">Tetris (powered by PyGame)</a>

## How Can I Use VNC?

Any Replit App – in any language – can use a virtual desktop. No changes are needed to execute native graphics programs on Replit. The VNC pane will appear when any application attempts to open a native desktop window.

## Securing Your Replit App

By default, your VNC connection does not have a password and can only be accessed from [https://replit.com](https://replit.com) since the connection relies on the same authentication used for the WebSocket. If you need to access your Replit App via the external [noVNC](https://novnc.com) client, you can set a VNC password.

Set a password in your Replit App [secrets](/replit-workspace/workspace-features/secrets) configuration. `Secrets` is a secure place to store passwords without the fear of other users accessing your passwords. Setting `VNC_PASSWORD` will add enhanced security when connecting remotely.

## How Can I Use Fullscreen VNC?

You must have secured your Replit App as instructed above to proceed with these steps.

1. Execute the following command in your "Shell" tab:
   ```sh  theme={null}
   echo $REPL_ID
   ```

2. Construct your connection URL by replacing `REPL_ID` in with the output from above: `<\REPL_ID\>.id.repl.co`
3. Open the [noVNC client](https://novnc.com/noVNC/vnc.html) in a separate browser tab.
4. Open connection settings.

5. Expand the WebSockets field. Enter your connection URL (`\<REPL_ID\>.id.repl.co`) in the `host` field, and leave the `path` field empty.

6. Change the `Scaling Mode` to `Remote Resizing`:

7. Use the `runner` username and the password configured above when asked for credentials.

## Examples

* <a href="https://replit.com/@demcrepl/Tetris-in-Pygame" target="_blank">PyGame</a>
* <a href="https://replit.com/@amasad-matplotlib" target="_blank">Python matplotlib</a>
* <a href="https://replit.com/@sigcse2021/Game-of-Life-demcrepl" target="_blank">Java Processing</a>

---

# Source: https://docs.replit.com/legal-and-security-info/strike-system-faq.md

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

# Strike system FAQ

> Learn about warnings, banned community access, and site bans in Replit.

### What is a Warning in Replit?

A staff member will send you a warning when you violate the [Community Standards](https://blog.replit.com/community-standards), [Terms of Service](https://replit.com/site/terms), or [Privacy Policy](https://replit.com/site/privacy). Other disciplinary actions may include unpublishing of your Replit App(s), cancellation of a Bounty, and/or hiding/deleting Bounty Applications.

### Can I republish my Replit App after it's been unpublished?

Yes. Revise your Replit App to abide by the [Community Standards](https://blog.replit.com/community-standards), then republish.

### What happens when I'm banned from the Community?

When banned from the community, you cannot create posts, share Replit App, or participate in [Bounties](https://replit.com/bounties). However, you can still use the online IDE for features unrelated to community activity.

### What happens when I'm banned from Replit?

A ban from Replit means you cannot log into your account and all Replit App will have been deleted. This often occurs for violating the [Terms of Service](https://replit.com/site/terms).

### How can I appeal a ban?

Send an email to [appeals@replit.com](mailto:appeals@replit.com) with your Replit username, a description of the action that you are appealing, and your reasons for the appeal.

---

# Source: https://docs.replit.com/replitai/stripe-payments.md

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

# Stripe Payments Integration

> Add payments and subscriptions to your app with Stripe using Agent, test safely in a sandbox, then go live with your own Stripe account.

<Note>
  The Stripe Connector is only supported for Replit Free and Core users. It is not available in Teams workspaces at this time.
</Note>

## What you can build

Use Agent to add Stripe to your app in one click—no setup required. Build a storefront, accept one‑time payments, or create subscriptions. Agent wires up the integration, data models, and test environment.

## How it works

Agent starts with a Stripe sandbox so you can safely test payments without moving real money. You can build and try flows immediately. When you are ready, switch to your live Stripe account to publish and accept real payments.

<Info>
  A Stripe sandbox is an isolated test environment where you can simulate
  payments, subscriptions, and events. Learn more in
  [Stripe's docs on sandboxes](https://docs.stripe.com/sandboxes).
</Info>

## Get started

* **Ask Agent to use Stripe**
  * Use a slash command on the home screen and select Stripe, or ask directly:
    <AiPrompt>Build a storefront and integrate Stripe for payments</AiPrompt>

<Note>
  Stripe integration requires an App with backend functionality. Select **App** from the homepage to get started.
</Note>

## Test payments in the sandbox

1. Open your app’s **Preview** in a new tab.
2. Make a test purchase from your storefront or payment page.
3. Use Stripe’s standard test card:

```text  theme={null}
Card number: 4242 4242 4242 4242
Expiry: any future date
CVC: any 3 digits
Name, address: any mock values
```

<Tip>
  Sandbox purchases don’t process through real networks or move money. They’re
  safe for testing end to end.
</Tip>

## Manage products and pricing

You have two options:

1. From your app, select **Publish**, then choose to claim your Stripe sandbox.
   * If you don’t have a Stripe account yet, create one to claim the sandbox.
2. In the Stripe Dashboard, open **Products** to add or edit products and prices.
   Changes you make in the Stripe sandbox reflect in your Replit app automatically
   and sync to your app’s database.

### View synced Stripe data

* In your Workspace, open **Database**.
* Select **MyData**.
* Change the schema selector to **Stripe** to see payment objects and related
  records.

## Go live

To accept real payments:

<Warning>
  Before you publish:

* Install the [Replit Integrated Payments](https://marketplace.stripe.com/apps/replit-integrated-payments) app in your live Stripe account
    (required for sandbox‑to‑live synchronization)
  * Complete Stripe’s KYB verification and add your live API keys

Your sandbox integration is not production‑ready. It cannot accept real
  payments until you complete these steps.
</Warning>

1. In Stripe, switch from sandbox to your live account.
2. Complete Stripe’s KYB (Know Your Business) verification if prompted.
3. Copy your live Publishable and Secret keys from Stripe.
4. In Replit, open the **Publish** pane, then add your live keys.
5. Publish your app.

## Manage the integration

* Go to **Integrations > Stripe** to open the Stripe connector.
* From there, you can test the connection, view status, and manage settings.

## Frequently asked questions

### How do I update the prices of my products?

* Ask Agent: Describe the change and Agent updates your app and Stripe objects.
* Use the Stripe Dashboard: Open **Products** to edit prices and product details.
  * In sandbox, changes sync back to your app and database automatically.
  * For production, switch to your live account first, then update prices. Publish again if your app needs to pick up new configuration.

### How do I test transactions on Replit?

Open your app’s **Preview** in a new tab. Run the Stripe Checkout flow with the
standard test card (4242 4242 4242 4242), any future expiry, and any CVC. See
[Test payments in the sandbox](#test-payments-in-the-sandbox) above for details.

### What is a live Stripe account?

A live Stripe account is an activated and verified account that can process real
payments using your business details. See Stripe’s guidance on account creation
and activation: [Create and manage your Stripe account](https://docs.stripe.com/get-started/account).

### How do I find my live keys?

1. In the Stripe Dashboard, switch to your live account using the account picker (top left).
2. From the bottom left, select **Developers** > **API keys**.
3. Reveal your live keys or create new ones. For step‑by‑step instructions on creating new keys, see
   [Create a secret API key](https://docs.stripe.com/keys#create-api-secret-key).

## Update or remove the Stripe connection

If you're not ready to publish with your Stripe live keys, you have three options:

### Option A: Use placeholder API keys

You can use Stripe placeholder keys that you can replace later.

<Warning>
  Placeholder keys will not process real payments. The catalog and checkout will not function on your published URL until you add your live Stripe keys. Use this option only for testing purposes.
</Warning>

<Steps>
  <Step title="Go to the publishing tab">
    Open the **Publish** pane in your Workspace.
  </Step>

<Step title="Enter placeholder keys">
    Use these values:

**Publishable Key:**

```text  theme={null}
    pk_live_abcdef
    ```

**Secret Key:**

```text  theme={null}
    sk_live_abcdef
    ```
  </Step>
</Steps>

### Option B: Remove the Stripe integration manually

You can completely remove the Stripe integration from your project.

<Steps>
  <Step title="Open your project">
    Navigate to the project with the Stripe integration you want to remove.
  </Step>

<Step title="Select the name of your project">
    This opens the connection details.
  </Step>

<Step title="Ask Agent to remove the Stripe code">
    Go to Agent chat and ask Agent to remove the Stripe connector code from your application. This will remove your entire Stripe integration.
  </Step>
</Steps>

### Option C: Roll back to a checkpoint before the Stripe integration

If you want to completely undo the Stripe integration and return to a previous state, you can roll back to an earlier checkpoint.

<Steps>
  <Step title="Open your project">
    Navigate to the project with the Stripe integration you want to remove.
  </Step>

<Step title="Select the name of your project">
    This opens the connection details.
  </Step>

<Step title="Find a checkpoint from before the Stripe integration">
    Go to Agent chat and look for a checkpoint that was created before the Stripe integration. Select the **clock icon** on the top left of the chat pane to view older chat history.

<Step title="Select Rollback here">
    Once you find a checkpoint that looks good, select **Rollback here** to restore your project to that state.

## Notes and limitations

* Sandbox activity does not affect real balances or customers.
* Some Stripe features can't be tested in sandboxes (for example, IC+ pricing
  and certain Connect flows). See
  [Stripe's sandbox limitations](https://docs.stripe.com/sandboxes).

---

# Source: https://docs.replit.com/legal-and-security-info/support-policy.md

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

# Support Policy

> Replit offers different support options for all Replit users.

## Community support

All Replit users can also access the [Community Forum](https://replit.discourse.group/) for community support and resources.

## Replit Core and Teams support

Replit Core and Teams members can submit private support requests to Replit's support team. This support covers a wide range of topics including billing, account management, product questions, and technical assistance.

### Scope

While Replit Agent is a powerful tool designed to help you build quickly, it may occasionally produce code that doesn't fully match your intent or contains errors. Reviewing, modifying, and refining application code—either through manual changes or additional Agent prompts—is ultimately the user's responsibility.

Replit Support is here to ensure the platform itself is functioning correctly and to assist with billing, account, and platform-related issues. However, we're unable to provide hands-on debugging or fixes for individual application-level code.

However, [Replit Learn](https://blog.replit.com/replit-learn) is a great resource for learning how to use Replit and build your first app!

### Contact Us

Replit Core and Teams support is available via the in-app [`? Get Help` button](https://replit.com/t/replit?supportform=true).

---

# Source: https://docs.replit.com/teams/teams-pro-shutdown.md

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

# Legacy Teams Pro shut down (August 14th, 2025)

## Overview

Replit's Legacy Teams Pro product will sunset on August 14th, 2025. **This timeline has been extended from the previously announced date of July 31st, 2025.** After this date, you will lose access to both the legacy Teams Pro service and your team's data on the platform. We understand this may impact your workflow and want to ensure you have time to export your data and explore our new Teams experience.

Since the launch of the new [Replit Teams](https://replit.com/teams), Legacy Teams Pro has been in maintenance mode. Over the past year, we've shifted  focus to making AI-powered software creation accessible to everyone, while moving away from developing tools for interviewing and classroom education.

## Export your data

Download all your team's projects and content using our export tool before the shutdown date.

1. Click "Teams" in the sidebar.

2. Select "Start Repl Export". You'll get an email with a link once the export is ready.

## Upgrade to Replit Teams

Our new Replit Teams product offers enhanced collaboration, better access management, and powerful AI features. Sign up [here](https://replit.com/teams/new) or [talk to sales](https://calendly.com/d/ckz8-5kw-549/teams-beta?month=2025-04) if you’d like an annual subscription with 10+ seats.

---

# Source: https://docs.replit.com/category/teams.md

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

# Replit Teams and Enterprise

> Have your team build production-ready customer apps and business tools faster with Replit.

export const TeamsCredits = '$40';

<CardGroup cols={2}>
  <Card title="Teams Plan" icon="users">
    {TeamsCredits} per user per month for collaborative development
  </Card>

<Card title="Enterprise Plan" icon="building">
    Custom pricing with advanced security and compliance features
  </Card>
</CardGroup>

Choose the right plan for your organization's development needs. Teams provides essential collaboration features for small teams. Enterprise adds advanced security, compliance, and support for larger organizations.

## Teams

Teams provides shared resources and collaborative features for small teams:

* **Pooled Credits**: Shared credit allocation for team members to use across projects
* **Private Deployments**: Secure app hosting with controlled access
* **Viewer Seats**: Ability for stakeholders and non-builders to use published private apps
* **Role-Based Access Control**: Manage permissions and project access for team members

## Enterprise

Enterprise includes all Teams features plus enhanced security, control, and support for organizations:

<CardGroup cols={2}>
  <Card title="Enterprise Security" icon="shield-check">
    SOC-2 compliant platform with SSO/SAML, SCIM Provisioning, and advanced security controls.
  </Card>

<Card title="Centralized Management" icon="folder-open">
    Manage teams, billing, and resources from a central dashboard. Monitor usage and control costs effectively.
  </Card>
</CardGroup>

* **SSO/SAML with SCIM Provisioning**: Secure team access with Single Sign-On and automated user provisioning
* **Dedicated Development Environment**: Role-based access control with IDP groups for granular permissions
* **Admin Controls**: Require Private Deployments, ban public apps, and mandate Security Scanner checks before publishing
* **Enterprise Security Center**: Detect CVEs across dependencies by severity. View affected apps and download SBOMs for compliance.
* **Custom Integration Permissions**: Define access boundaries for first-party integrations across your organization
* **Larger Deployment VMs**: Access expanded VM sizes for scalable app hosting
* **Dedicated Support**: Access your dedicated account manager and sales engineer for platform support
* **Enterprise Data Connectors**: Connect to Snowflake, BigQuery, and Databricks for seamless data integration
* **Unlimited Viewer Seats**: Give stakeholders and non-builders unlimited access to your published private apps

## Essential resources

Learn more about Teams and Enterprise with comprehensive documentation:

<CardGroup cols={2}>
  <Card title="Identity & Access" href="/teams/identity-and-access-management/" icon="lock">
    Comprehensive guide to user management, permissions, and SSO integration
  </Card>

<Card title="Security & Compliance" href="/teams/information-security/overview" icon="shield">
    Detailed information about our security features and compliance standards
  </Card>
</CardGroup>

Additional documentation:

* [Project Management Guide](/teams/projects/overview)
* [Teams Billing Information](/billing/teams-billing/overview)

## Use cases

Teams supports diverse organizational needs across different scales:

* **Enterprise Applications**: Build and publish mission-critical applications with enterprise-grade security and scaling
* **Business Tooling**: Develop and maintain business tools with seamless access management
* **Rapid Prototyping**: Accelerate innovation with instant development environments

<Note>
  Ready to transform your team's development workflow? [Contact our sales team](https://replit.com/teams) for a personalized demo and enterprise pricing information.
</Note>

---

# Source: https://docs.replit.com/replit-workspace/templates.md

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

# Developer Frameworks

> If your Replit App can be used as a good starting point for other project, you might want to submit it as a developer framework! Let's learn what a Replit developer framework is and how to make a good one.

## What is a developer framework?

Developer frameworks are published Replit Apps that can be used to build upon. The official developer frameworks, made by Replit, have a checkbox next to the name of the framework:

The [HTML, CSS, JS framework](https://replit.com/@replit/HTML-CSS-JS?v=1#index.html) framework is very popular and can be used as a starting point for creating a vanilla JavaScript project. You can fork the framework to use it.

Other developer frameworks have been created by community members, like this one:

## Creating a developer framework

Public Replit Apps can be published by checking the "Publish as Developer Framework" box in the last step of the Publish this Replit Apps flow.

Before you publish your developer framework, make sure it's as easy to use as possible. It should include all the boiler plate code that is needed to get a project started, and it should work right away when the "Run" button is pressed.

A good developer framework should always include well-commented code, easily editable variables, and a README file. It's always important to comment your code, but it's even more important when others will be using your code for their own projects. In the `README.md` file, add descriptive details about your developer framework, and information about the variables that the user can change. READMEs help users understand how your developer framework works, and if there are any requirements, licensing, or other factors they should be aware of.

The `.md` in `README.md` stands for Markdown, which is a basic text language. READMEs can be written in any text format, but we'll use Markdown as it's the best practice.

Here's an example outline for a README - feel free to use this for your own developer frameworks!

```md  theme={null}
# Developer Framework Name

Choose a self-descriptive name, you can also add a simple description about your developer framework.

# Usage

Explain how you can install / use this developer framework. Make sure to provide a detailed explanation and make it easy for people to read. Also, add any code snippets if needed.

# License

This will define how people can use your developer framework. You can visit https://opensource.org/licenses to choose a license.
```

You can also edit your submitted developer framework and share update messages to show how your project has changed over time.

---

# Source: https://docs.replit.com/extensions/api/themes.md

# themes API

> Access and utilize theme data and color tokens in your Replit extensions. Get current theme values and listen for theme changes.

The themes api allows you to access the current user's theme and utilize the color tokens accordingly.

## Usage

```ts  theme={null}
import { themes } from '@replit/extensions';
```

## Methods

### `themes.getCurrentTheme`

Returns all metadata on the current theme including syntax highlighting, description, HSL, token values, and more.

```ts  theme={null}
getCurrentTheme(): Promise<ThemeVersion>
```

### `themes.getCurrentThemeValues`

Returns the current theme's global token values.

```ts  theme={null}
getCurrentThemeValues(): Promise<ThemeValuesGlobal>
```

### `themes.onThemeChange`

Fires the `callback` parameter function with the updated theme when the user's theme changes.

```ts  theme={null}
onThemeChange(callback: OnThemeChangeListener): Promise<DisposerFunction>
```

### `themes.onThemeChangeValues`

Fires the `callback` parameter function with the updated theme values when the user's theme changes.

```ts  theme={null}
onThemeChangeValues(callback: OnThemeChangeValuesListener): Promise<DisposerFunction>
```

## Types

### ColorScheme

Enumerated Color Scheme

| Property | Type |
| -------- | ---- |

### CustomTheme

Custom Theme GraphQL type

| Property                 | Type                            |
| ------------------------ | ------------------------------- |
| author                   | `User`                          |
| colorScheme              | [`ColorScheme`](#colorscheme)   |
| hasUnpublishedChanges    | `boolean`                       |
| id                       | `number`                        |
| isCurrentUserThemeAuthor | `boolean`                       |
| isInstalledByCurrentUser | `boolean`                       |
| latestThemeVersion       | [`ThemeVersion`](#themeversion) |
| numInstalls?             | `number`                        |
| slug?                    | `string`                        |
| status?                  | `"private" │ "public"`          |
| title?                   | `string`                        |

### ThemeEditorSyntaxHighlighting

Theme Editor Syntax Highlighting

| Property     | Type                                                                  |
| ------------ | --------------------------------------------------------------------- |
| \_\_typename | `string`                                                              |
| tags         | [`ThemeSyntaxHighlightingTag[]`](#themesyntaxhighlightingtag)         |
| values       | [`ThemeSyntaxHighlightingModifier`](#themesyntaxhighlightingmodifier) |

### ThemeSyntaxHighlightingModifier

Theme Syntax Highlighting Modifier

| Property        | Type     |
| --------------- | -------- |
| color?          | `string` |
| fontSize?       | `string` |
| fontStyle?      | `string` |
| fontWeight?     | `string` |
| textDecoration? | `string` |

### ThemeSyntaxHighlightingTag

Theme Syntax Highlighting Tag

| Property     | Type              |
| ------------ | ----------------- |
| \_\_typename | `string`          |
| modifiers    | `null │ string[]` |
| name         | `string`          |

### ThemeValues

Both global and editor theme values

| Property      | Type                                      |
| ------------- | ----------------------------------------- |
| \_\_typename? | `string`                                  |
| editor        | [`ThemeValuesEditor`](#themevalueseditor) |
| global        | [`ThemeValuesGlobal`](#themevaluesglobal) |

### ThemeValuesEditor

Editor Theme Values, an array of ThemeEditorSyntaxHighlighting

| Property           | Type                                                                |
| ------------------ | ------------------------------------------------------------------- |
| syntaxHighlighting | [`ThemeEditorSyntaxHighlighting[]`](#themeeditorsyntaxhighlighting) |

### ThemeValuesGlobal

Global theme values interface

| Property                | Type     |
| ----------------------- | -------- |
| \_\_typename?           | `string` |
| accentNegativeDefault   | `string` |
| accentNegativeDimmer    | `string` |
| accentNegativeDimmest   | `string` |
| accentNegativeStronger  | `string` |
| accentNegativeStrongest | `string` |
| accentPositiveDefault   | `string` |
| accentPositiveDimmer    | `string` |
| accentPositiveDimmest   | `string` |
| accentPositiveStronger  | `string` |
| accentPositiveStrongest | `string` |
| accentPrimaryDefault    | `string` |
| accentPrimaryDimmer     | `string` |
| accentPrimaryDimmest    | `string` |
| accentPrimaryStronger   | `string` |
| accentPrimaryStrongest  | `string` |
| backgroundDefault       | `string` |
| backgroundHigher        | `string` |
| backgroundHighest       | `string` |
| backgroundOverlay       | `string` |
| backgroundRoot          | `string` |
| black                   | `string` |
| blueDefault             | `string` |
| blueDimmer              | `string` |
| blueDimmest             | `string` |
| blueStronger            | `string` |
| blueStrongest           | `string` |
| blurpleDefault          | `string` |
| blurpleDimmer           | `string` |
| blurpleDimmest          | `string` |
| blurpleStronger         | `string` |
| blurpleStrongest        | `string` |
| brownDefault            | `string` |
| brownDimmer             | `string` |
| brownDimmest            | `string` |
| brownStronger           | `string` |
| brownStrongest          | `string` |
| foregroundDefault       | `string` |
| foregroundDimmer        | `string` |
| foregroundDimmest       | `string` |
| greenDefault            | `string` |
| greenDimmer             | `string` |
| greenDimmest            | `string` |
| greenStronger           | `string` |
| greenStrongest          | `string` |
| greyDefault             | `string` |
| greyDimmer              | `string` |
| greyDimmest             | `string` |
| greyStronger            | `string` |
| greyStrongest           | `string` |
| limeDefault             | `string` |
| limeDimmer              | `string` |
| limeDimmest             | `string` |
| limeStronger            | `string` |
| limeStrongest           | `string` |
| magentaDefault          | `string` |
| magentaDimmer           | `string` |
| magentaDimmest          | `string` |
| magentaStronger         | `string` |
| magentaStrongest        | `string` |
| orangeDefault           | `string` |
| orangeDimmer            | `string` |
| orangeDimmest           | `string` |
| orangeStronger          | `string` |
| orangeStrongest         | `string` |
| outlineDefault          | `string` |
| outlineDimmer           | `string` |
| outlineDimmest          | `string` |
| outlineStronger         | `string` |
| outlineStrongest        | `string` |
| pinkDefault             | `string` |
| pinkDimmer              | `string` |
| pinkDimmest             | `string` |
| pinkStronger            | `string` |
| pinkStrongest           | `string` |
| purpleDefault           | `string` |
| purpleDimmer            | `string` |
| purpleDimmest           | `string` |
| purpleStronger          | `string` |
| purpleStrongest         | `string` |
| redDefault              | `string` |
| redDimmer               | `string` |
| redDimmest              | `string` |
| redStronger             | `string` |
| redStrongest            | `string` |
| tealDefault             | `string` |
| tealDimmer              | `string` |
| tealDimmest             | `string` |
| tealStronger            | `string` |
| tealStrongest           | `string` |
| white                   | `string` |
| yellowDefault           | `string` |
| yellowDimmer            | `string` |
| yellowDimmest           | `string` |
| yellowStronger          | `string` |
| yellowStrongest         | `string` |

### ThemeVersion

Theme Version GraphQL type

| Property      | Type                          |
| ------------- | ----------------------------- |
| \_\_typename? | `string`                      |
| customTheme?  | [`CustomTheme`](#customtheme) |
| description?  | `string`                      |
| hue           | `number`                      |
| id            | `number`                      |
| lightness     | `number`                      |
| saturation    | `number`                      |
| timeUpdated?  | `string`                      |
| values?       | [`ThemeValues`](#themevalues) |

### ColorScheme

Enumerated Color Scheme

```ts  theme={null}
Dark = 'dark'
Light = 'light'
```

### DisposerFunction

A cleanup/disposer function (void)

```ts  theme={null}
() => void
```

### OnThemeChangeListener

Fires with the new theme data when the current theme changes

```ts  theme={null}
(theme: ThemeVersion) => void
```

---

# Source: https://docs.replit.com/teams/identity-and-access-management/transfer-app-to-teams.md

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

# Transfer App to Teams

> Move personal apps to team workspaces for collaboration

Transfer your personal Replit Apps to team workspaces to enable collaboration and centralized project management. This process allows you to:

* Share apps with team members instantly
* Centralize project management within your organization
* Maintain deployment uptime and URLs during transfer

## What is app transfer?

App transfer moves ownership of a Replit App from your personal workspace to a team workspace. Once transferred, the app becomes accessible to team members according to workspace permissions and is managed under the team's resources and billing.

The transfer process is immediate and irreversible, but maintains all deployment configurations and URLs.

## Getting started

You must be a member of the target team workspace before transferring apps. Verify your team membership by selecting your profile or workspace selector in the upper-right corner to view available teams.

<Note>
  * Transferring a Replit App to a team workspace is irreversible
  * Published apps experience zero downtime during transfer
  * Deployment URLs remain unchanged
  * You must be a member of the team you want to transfer the app to before initiating transfer
</Note>

## How it works

<Steps>
  <Step title="Access your Apps">
    Navigate to your personal Apps by selecting the **Apps** tab from your Replit home page.
  </Step>

<Step title="Select the app">
    Locate the application you want to transfer in your Apps list.
  </Step>

<Step title="Open transfer options">
    Select the **three dots (•••)** menu next to the app name.

<Step title="Choose transfer option">
    Select **Transfer To Organization** from the dropdown menu.
  </Step>

<Step title="Select destination">
    Choose the target team workspace from the available organizations dialog.
  </Step>

<Step title="Confirm transfer">
    Select **Transfer To Organization** to confirm the action.
  </Step>

<Step title="Verify completion">
    You'll see a "Transfer success" notification in the bottom-right corner of the page. Refresh your Apps page to verify the app no longer appears in your personal workspace, then navigate to your team workspace to confirm the app appears there.
  </Step>
</Steps>

## Bulk transfer options

For transferring multiple applications, use CLUI commands:

* **Core to team workspace**: Use `org transfer-repls`
* **Team to team workspace**: Use `org transfer-repls-org-to-org`

## Next steps

To learn more about team collaboration and workspace management, see the following resources:

* [Replit Teams overview](https://docs.replit.com/category/teams) - Learn about team workspace features
* [CLUI commands reference](https://docs.replit.com/additional-resources/clui-graphical-cli) - Explore bulk transfer options

---

# Source: https://docs.replit.com/legal-and-security-info/trust-and-safety.md

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

# Trust and Safety at Replit

> At Replit, we strive to create a fun and creative community that is also trusted and safe. To achieve this goal, we have implemented rules and policies that promote positive behavior and protect our users. In this document, you will find a summary of our key rules, tips on how to report any concerns, and information on where you can learn more.

## Rules for Content and Behavior

To maintain a safe and trusted environment, we have established a set of rules that are detailed in our [Terms of Service](https://replit.com/site/terms). The same rules apply whether you are publishing Replit App, or engaging with other users in our Community.

* Keep it appropriate. All content must be suitable for a workplace environment and free of any offensive language or nudity. We prohibit violent and graphic content, as well as content that depicts or encourages self-harm.
* No bullying. We have a zero-tolerance policy for bullying, trolling, doxxing, hate speech, racism, sexism, or any other form of prejudice. Violation of this rule may result in an immediate ban.
* No illegal or regulated content. Replit should not be used for any illegal activities, such as dealing in drugs, sex, gambling, weapons, or pirated software.
* Misuse of the service is not allowed. Do not share content that could harm other users, such as spam, malware, or phishing. We also do not allow Replit App that consume an excessive amount of resources, such as spam bots and cryptocurrency miners.

## How we enforce our rules

Our staff works hard to keep our service safe by actioning reports concerning content that violates our [Terms](https://replit.com/site/terms), [Community Standards](https://blog.replit.com/community-standards), or [Privacy Policy](https://replit.com/site/privacy).

If your content violates the rules, we will take appropriate action against it. In circumstances of serious violations, you may be banned from using Replit. For more information on the actions we take, checkout our [Strike System FAQ](/legal-and-security-info/strike-system-faq).

## Protecting Underage users

Replit upholds the highest global privacy standards for our youngest members. To ensure that their personal information remains safe, we don't collect it in the first place.

To protect children from inappropriate images, we automatically scan all images uploaded to Replit. Our machine learning technology quickly detects and flags most images that violate our rules for review by a staff member.

We also take swift action to prevent predators from using Replit. Any account that shares child abuse material (CSAM) or seeks sexual contact with minors will be terminated and may be reported to the authorities.

## How to Make Reports

### Reporting a Replit App

Report a Replit App to a staff member by visiting its cover page and clicking the kebab menu. Select the "Report" option and provide a reason for the report. A staff member will investigate and take appropriate action as soon as possible

### Reporting a User

Report a user by accessing the "Report" option on their profile page. Provide a reason for the report, and a staff member will review and address as soon as possible

### Reporting a Bounty

Report a bounty by accessing the "Report" option on the bounty page. If you are the poster of a bounty, you can also report a bounty application that violates our rules in a similar way.

### Reporting a Theme

Report a theme by accessing the "Report" option on the theme page. Themes should not be reported because of their appearance, but only because they contain content such as an offensive name that violates our rules.

## Additional Information

This page contains an easy-to-read summary of information that is given in more detail in our other policy documents. If you would like more information, please consult these resources:

* [Terms of service](https://replit.com/site/terms)
* [Privacy Policy](https://replit.com/site/privacy)
* [Copyright claims and takedown requests](./copyright-claims-takedown-requests)

---

# Source: https://docs.replit.com/legal-and-security-info/usage.md

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

# Usage Quota & Limits

> Learn about Replit's resource limits, including CPU, RAM, storage, and network restrictions that apply to Replit Apps based on your plan.

Replit has certain soft and hard limits in using its service. Hard limits are automatically enforced by the Service. Soft limits are consumable resources that you agree not to exceed. Details of these limits are shown at [https://replit.com/site/pricing](https://replit.com/site/pricing) and may be updated there from time to time Long periods of inactivity may result in an account or your use of the Service being deemed inactive.

* CPU per Replit App: determined by plan (hard)

* RAM per Replit App: determined by plan (hard)

* Concurrent Replit Apps: 20 (hard)

* Storage per Replit App: determined by plan and storage used by other Replit Apps (hard)

* Storage per account: determined by plan (hard)

* Network bandwidth: determined by plan (soft)

In addition, regardless of your plan, some limits and restrictions are imposed on your Replit App’s content and its network activity in order to enforce our Terms of Service. If these limits are exceeded, your Replit App may become temporarily unavailable, or particular operations may fail with an error. These include:

* A limit on the number of concurrent outgoing network connections in a given period.

* Limits on the frequency and size of requests to Replit’s internal GraphQL API.

* Restrictions on the use of code that appears to violate our Terms of Service, such as cryptocurrency mining.

---

# Source: https://docs.replit.com/extensions/development/react/hooks/useActiveFile.md

# useActiveFile() Hook

> The useActiveFile() hook returns the file actively focused on by the current user.

## Usage

```tsx  theme={null}
import { useActiveFile } from "@replit/extensions-react";

const Component = () => {
  const activeFile = useActiveFile();

return (
    <>
      <span>Active File: {activeFile}</span>
    </>
  );
};
```

## Signature

```ts  theme={null}
function useActiveFile(): string | null;
```

---

# Source: https://docs.replit.com/extensions/development/react/hooks/useIsExtension.md

# useIsExtension() Hook

> The `useIsExtension()` hook returns whether the handshake has been successfully established with the Replit workspace. If the handshake is loading, `undefined` will be returned. After loading has finished, the hook will return a boolean.

## Usage

```ts  theme={null}
import { useIsExtension } from '@replit/extensions-react';

const Component = () => {
  const isExtension = useIsExtension();

...
}
```

## Signature

```ts  theme={null}
function useIsExtension(): boolean | undefined;
```

---

# Source: https://docs.replit.com/extensions/development/react/hooks/useReplit.md

# useReplit() Hook

> The `useReplit()` hook establishes the handshake between the Replit and the extension and passes the API wrapper for usage inside a React component.

## Usage

```ts  theme={null}
import { useReplit } from '@replit/extensions-react';

const Component = () => {
  const { replit, status, filePath, error } = useReplit();

...
}
```

## Signature

```ts  theme={null}
function useReplit(init?: {
  permissions: Array<string>;
}): UseReplitInitialized | UseReplitPreInitialization | UseReplitFailure;
```

## Result

| Property | Type                                  | Description                                                                                            |
| -------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| status   | [`HandshakeStatus`](#handshakestatus) | A string indicating the status of the handshake between Replit and the Extension                       |
| error    | `string` \| `null`                    | If the handshake has failed, `error` is a string indicating the error message                          |
| filePath | `string` \| `null`                    | If the handshake has succeeded, `filePath` points to the current file the user is focusing             |
| replit   | `typeof replit`                       | If the handshake has succeeded, `replit` is the API wrapper for the entire `@replit/extensions` module |

## Types

### HandshakeStatus

An enumerated set of values for the handshake status.

| Key     | Value       |
| ------- | ----------- |
| Ready   | `"ready"`   |
| Error   | `"error"`   |
| Loading | `"loading"` |

### UseReplitReady

If the handshake between Replit and the Extension has been established successfully

| Property | Type                                          |
| -------- | --------------------------------------------- |
| status   | [`HandshakeStatus`](#handshakestatus).`Ready` |
| error    | `null`                                        |
| filePath | `string`                                      |
| replit   | `typeof replit`                               |

### UseReplitLoading

The default handshake status, before initialization has been established.

| Property | Type                                            |
| -------- | ----------------------------------------------- |
| status   | [`HandshakeStatus`](#handshakestatus).`Loading` |
| error    | `null`                                          |
| filePath | `null`                                          |
| replit   | `null`                                          |

### UseReplitFailure

If the handshake has failed.

| Property | Type                                          |
| -------- | --------------------------------------------- |
| status   | [`HandshakeStatus`](#handshakestatus).`Error` |
| error    | `string`                                      |
| filePath | `null`                                        |
| replit   | `null`                                        |

---

# Source: https://docs.replit.com/extensions/development/react/hooks/useReplitEffect.md

# useReplitEffect() Hook

> The `useReplitEffect()` hook fires a callback with the `replit` API wrapper upon the first component render and when its dependency array changes. It is similar in functionality to the `useEffect` React hook.

## Usage

```ts  theme={null}
import { useReplitEffect } from '@replit/extensions-react';

const Component = () => {
  useReplitEffect(async (replit) => {
    ...
  }, [...dependencies]);

...
}
```

## Signature

```ts  theme={null}
function useReplitEffect(
  callback: (typeof replit) => Promise<void>;
  dependencies: Array<any>
): null;
```

---

# Source: https://docs.replit.com/extensions/development/react/hooks/useTheme.md

# useTheme() Hook

> The `useTheme()` hook returns all metadata on the current theme including syntax highlighting, description, HSL, token values, and more.

## Usage

```ts  theme={null}
import { useTheme } from '@replit/extensions-react';

const Component = () => {
  const theme = useTheme();

...
}
```

## Signature

```ts  theme={null}
function useThemeValues(): ThemeVersion | null;
```

## Types

### [ThemeVersion](../../../api/themes.md#themeversion)

A specific theme version reflecting all colors and metadata on the current theme.

---

# Source: https://docs.replit.com/extensions/development/react/hooks/useThemeValues.md

# useThemeValues() Hook

> The `useThemeValues()` hook provides you with the global token color values of the current user's theme.

## Usage

```ts  theme={null}
import { useThemeValues } from '@replit/extensions-react';

const Component = () => {
  const themeValues = useThemeValues();

...
}
```

## Signature

```ts  theme={null}
function useThemeValues(): ThemeValuesGlobal | null;
```

## Types

### [ThemeValuesGlobal](../../../api/themes.md#themevaluesglobal)

Replit's global theme token values for UI, excluding syntax highlighting.

---

# Source: https://docs.replit.com/extensions/development/react/hooks/useWatchTextFile.md

# useWatchTextFile() Hook

> The `useWatchTextFile()` hook allows you to read and write to the contents of a file at the provided `filePath`.

## Usage

```ts  theme={null}
import { useWatchTextFile } from '@replit/extensions-react';

const Component = () => {
  const { content, watching, watchError, writeChange } = useWatchTextFile({ filePath: "..." });

...
}
```

## Signature

```ts  theme={null}
function useWatchTextFile({
  filePath: string | null | undefined
}): UseWatchTextFileLoading | UseWatchTextFileErrorLike | UseWatchTextFileWatching;
```

## Result

| Property    | Type                     | Description                                                                       |
| ----------- | ------------------------ | --------------------------------------------------------------------------------- |
| status      | `UseWatchTextFileStatus` | The file watcher's status. Useful for ensuring the desired file is being watched. |
| content     | `string` \| `null`       | If watching, the contents of the file located at the provided `filePath`          |
| watchError  | `string` \| `null`       | If an error occurs, the corresponding error message                               |
| writeChange | `WriteChange` \| `null`  | If watching, a function to update the watched file                                |

## Types

### TextChange

| Property | Type     |
| -------- | -------- |
| from     | `number` |
| to?      | `number` |
| insert?  | `string` |

### UseWatchTextFileErrorLike

| Property    | Type                                                                                                 |
| ----------- | ---------------------------------------------------------------------------------------------------- |
| status      | `UseWatchTextFileStatus.Error` \| `UseWatchTextFileStatus.Moved` \| `UseWatchTextFileStatus.Deleted` |
| content     | `null`                                                                                               |
| watchError  | `string` \| `null`                                                                                   |
| writeChange | `null`                                                                                               |

### UseWatchTextFileLoading

| Property    | Type                             |
| ----------- | -------------------------------- |
| status      | `UseWatchTextFileStatus.Loading` |
| content     | `null`                           |
| watchError  | `null`                           |
| writeChange | `null`                           |

### UseWatchTextFileWatching

| Property    | Type                              |
| ----------- | --------------------------------- |
| status      | `UseWatchTextFileStatus.Watching` |
| content     | `string`                          |
| watchError  | `null`                            |
| writeChange | `WriteChange`                     |

***

## UseWatchTextFileStatus

```ts  theme={null}
Error = "error",
Loading = "loading",
Watching = "watching",
Moved = "moved",
Deleted = "deleted",
```

***

### WriteChange

```ts  theme={null}
(changes: TextChange | Array<TextChange>) => void
```

---

# Source: https://docs.replit.com/replit-workspace/workspace-features/user-settings.md

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

# User Settings

> User Settings let you personalize your workspace across all apps. These settings help you create your ideal development environment.

The User Settings workspace tool offers options to customize appearance, behavior, and
keyboard shortcuts for your account.

## Features

You can customize your Replit App creation experience with these settings categories:

* **Theme customization**: Select between light and dark themes for your workspace
* **Code intelligence**: Configure AI-powered features that enhance your app creation experience
* **Editor preferences**: Adjust how the file editor behaves and appears
* **Notification controls**: Manage alert preferences
* **Accessibility options**: Make Replit work better for users with specific needs
* **Keyboard shortcuts**: Set key combinations to run common actions and navigate the GUI

## Usage

<Accordion title="How to access User Settings">
  From the left **Tool dock**:

1. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools** to see a list of workspace tools.
  2. Select <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=39c5a0a4872b7416378ddad9f2bef608" alt="Settings icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/settings-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e0a36e6a9a2078c02467d2abf0b8ba9e 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3be97f139b63f478d536ccaa51518c9a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4eba230fefbe9836ffd37672275aa7d1 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=97e5099639faf4a5490d8e000c00149a 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4d9552209cee3306d2bc2a02e747ecb6 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/settings-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d84a81284c0c9af295e0b86273d5c291 2500w" /> **User Settings**.

From the **Search bar**:

1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass at the top to open the search tool
  2. Type "User Settings" to locate the tool and select it from the results.
</Accordion>

### Appearance

Customize the following settings related to the appearance of your Replit workspace using the following settings:

* **Theme selection**: Choose from light and dark theme presets, <a href="https://replit.com/themes" target="_blank">community themes</a>, or your custom theme
* **Custom themes**: Create personalized color schemes using the [Themes](/replit-workspace/replit-themes) editor

### File editor preferences

Control the file editor's appearance and behavior using the following settings:

* **Font size**: Adjust text size for readability
* **Auto close brackets**: Automatically insert closing brackets when you type an opening bracket
* **Indentation detection**: Automatically detect indentation settings when you open a file
* **Format pasted text indentation**: Reformat pasted code to follow proper indentation
* **Indentation character**: Choose between spaces and tabs for indenting code
* **Indentation size**: Set the number of columns for each indentation level
* **Wrapping**: Configure line wrapping behavior
* **Minimap**: Include a navigable code overview in a sidebar
* **Multiselect modifier key**: Set the keyboard modifier for multi-file selection
* **Filetree Git status**: Display Git status indicators in the file tree

### Code intelligence

Configure AI-powered tools using the following settings:

* **Semantic tokens**: Use enhanced syntax highlighting powered by language servers
* **AI code completion**: Add inline code suggestions as you type
* **Accept suggestion on commit character**: Automatically accept code suggestions by typing certain characters

### Shell and Preview preferences

Customize the Shell and Preview tool behavior:

* **Shell bell audible indicator**: Play sounds when the Shell tool encounters issues
* **Automatic preview**: Open the Preview tab automatically when a server becomes available
* **Forward opened ports automatically**: Configure handling newly detected ports

### Notifications

Manage the following notification settings:

* **Agent audio notification**: Play sounds when Agent requests feedback
* **Agent push notification**: Receive mobile push notifications when Agent requests feedback

### Accessibility

You can customize the following accessibility setting:

* **Accessible terminal output**: Enable screen reader compatibility for the Shell and Console tools

### Keyboard shortcuts

To access the keyboard shortcut preferences, select the **Keyboard shortcuts** tab in the User Settings tool.

You can search for key combinations using the following methods:

* **Name**: Type the name or description of the keyboard shortcut in the search field
* **Key combination**: Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/keyboard.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=32716c4a6d700e7855f2fe6e6cbc350e" alt="keyboard icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/keyboard.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/keyboard.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=804d6cc3a25658d2102b31e3efb69635 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/keyboard.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cf5792186bd770bd395415275ec0b353 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/keyboard.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8ec4585d303d0abd6e9c4f780ea4ff1c 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/keyboard.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c9572251be0197bf7cc21969b223ab04 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/keyboard.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9fe78d97a973b2c6399209a0f73873eb 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/keyboard.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=bfe030b7c4df8f98c6cf1acc30e37dc9 2500w" /> and enter the key combination

Use the following actions to manage shortcuts:

* **Add**: Select **Add shortcut**
* **Update**: Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9fe8b0d62049a6cc25ff54186cd82167" alt="pencil icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/pencil-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=70f222a550c10565fda88d2a405f0919 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2e0254eba779d03f1854e9dceaca64f3 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=63823efefad606fd66371d96f5d4069a 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0529386335540e80fc49377dbccc8cdd 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0479fb149fec299ab1c26d5c723a534f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/pencil-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a9a6290741fad3dcd5d918c07bd79adc 2500w" /> pencil icon
* **Remove**: Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8f151791088b8b241632ca547f90265e" alt="trash icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/trash-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2623b12e7af8f79729b14508489b0418 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=31c030d2861933867568ad11b940a210 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d3de8c448b8ab0d7b3bd8978fa346ddb 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=70b9aaae5e97d97328752b89a2d6d963 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0d4a3e8a7b503e3fa067daf5d6262b88 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/trash-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3712a7908610fc2a9295f31cd2c5c0c7 2500w" /> trash icon

---

# Source: https://docs.replit.com/replit-workspace/workspace-features/version-control.md

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

# Version control

> Track changes, collaborate with others, and manage your code's evolution using Replit's integrated version control tools.

Version control on Replit enables you to track, manage, and collaborate on your codebase with confidence. With built-in Git integration and GitHub connectivity, you can:

* Track code changes and maintain a history of your development work
* Collaborate with team members without code conflicts or lost work
* Import, modify, and push code between Replit and GitHub
* Work with branches to experiment with new features safely

## What is version control?

Version control is a system that records changes to files over time, allowing you to recall specific versions later. On Replit, version control is powered by Git—the industry-standard tool for tracking code changes—with a user-friendly visual interface that eliminates the need for command-line knowledge.

### How version control works on Replit

All four version control options interact with the same underlying Git repository:

1. **Agent Checkpoints** create commits automatically at important milestones when building with [Replit Agent](/replitai/agent). [Learn more about checkpoints and rollbacks](/replitai/checkpoints-and-rollbacks).
2. **Git Pane** provides visual access to the complete Git repository
3. **Git CLI** offers command-line access to all Git functionality
4. **File History** tracks granular changes within individual files

Choose the interface that best matches your needs, with the confidence that everything is backed by Git's robust version control system.

| Feature              | Agent Checkpoints             | Git Commits                   | File History             |
| -------------------- | ----------------------------- | ----------------------------- | ------------------------ |
| **Creation**         | Automatic at logical points   | Manual or scheduled           | Automatic for user edits |
| **Granularity**      | Feature-level changes         | Any change size               | Character-level changes  |
| **Description**      | AI-generated summaries        | User-written messages         | Automatic timestamps     |
| **Rollback**         | One-click restore             | Requires Git knowledge        | One-click restore        |
| **Git capabilities** | Full Git capabilities         | Full Git capabilities         | No Git capabilities      |
| **GitHub sync**      | Full GitHub sync capabilities | Full GitHub sync capabilities | No GitHub sync           |

## Getting started

Access version control in your Replit App by adding the Git tool to your workspace:

1. Navigate to the Tools section in your Replit App
2. Select the **+** sign to add new tools
3. Select **Git** from the list of available tools

To import existing projects from GitHub, see [Import from GitHub](/getting-started/quickstarts/import-from-github).

## Version control options

Replit's version control is powered by Git at its core. You have multiple ways to interact with and benefit from version control:

### Automatic version control

<Accordion title="Agent Checkpoints">
  Automatic snapshots created during AI-assisted development with [Replit Agent](/replitai/agent).

**Best for**: Development with Replit Agent

**Key capabilities**:

* Automatic creation at logical milestones
  * One-click rollback
  * Feature-level snapshots
  * Progress tracking
  * No setup required
  * Visual timeline of development progress

Agent checkpoints are stored in Git and can be accessed through the Git Pane or Git CLI. You can also visualize all your checkpoints using the History feature, which provides:

* Chronological checkpoint visualization
  * Detailed checkpoint descriptions
  * Direct access to checkpoint states
  * One-click rollback to any checkpoint
</Accordion>

<Accordion title="File History">
  Per-file version tracking with automatic saving for user edits.

**Best for**: Quick recovery of recent file changes

**Key capabilities**:

* Single file focus
  * Character-level changes
  * Visual comparison
  * 30-day history
  * Playback feature

While File History provides its own interface, the underlying changes are part of Git's history. Learn more about [File History](/replit-workspace/workspace-features/file-history).
</Accordion>

### Git-based interfaces

<Accordion title="Git Pane">
  A visual interface for Git operations that makes version control accessible without command-line knowledge.

**Best for**: Most projects requiring GitHub integration and visual workflow

**Key capabilities**:

* Repository-wide tracking
  * Branch management
  * Visual diff viewing
  * One-click GitHub sync
  * Team collaboration

For detailed instructions on using the Git pane, see [Using the Git pane](/replit-workspace/workspace-features/git-interface).
</Accordion>

<Accordion title="Git CLI">
  Full command-line access to Git through the [Shell](/replit-workspace/workspace-features/shell) for advanced operations.

**Best for**: Power users who need complete Git functionality

**Key capabilities**:

* Full Git command set
  * Advanced branching strategies
  * Custom workflows
  * Script automation
  * Complete repository control

For common Git commands and usage, see [Using the Git pane](/replit-workspace/workspace-features/git-interface#using-git-commands-in-shell).
</Accordion>

## Key features

* **Visual Git interface**: Manage repositories, commits, and branches without typing Git commands
* **GitHub integration**: Connect to GitHub repositories for backup and collaboration
* **Import from GitHub**: Turn any [GitHub repository into a Replit App](/getting-started/quickstarts/import-from-github) with a few clicks
* **Branch management**: Create, switch between, and merge branches directly in your workspace
* **Conflict resolution**: Identify and resolve merge conflicts with visual assistance

## Use cases

**Tracking your personal projects**

Track changes to your code as you develop, allowing you to revert to previous versions if needed. The [Git pane](/replit-workspace/workspace-features/git-interface) shows your changes visually, making it easy to commit meaningful updates.

**Collaborating with a team**

Work with multiple developers on the same codebase without overwriting each other's changes. Create branches for new features, then merge them back when ready. Learn more about [collaboration tools](/replit-app/collaborate).

## Agent checkpoints

When building applications with [Replit Agent](/replitai/agent), you benefit from an additional layer of version control through checkpoints. Checkpoints automatically capture the comprehensive state of your project—including workspace contents, AI conversation context, and connected databases—at key moments during AI-assisted development.

### How checkpoints work

Agent checkpoints function as comprehensive snapshots of your entire Replit App state:

* **Automatic creation**: Agent creates checkpoints at logical points during development
* **Complete state capture**: Each checkpoint preserves workspace contents, AI memory, and database states
* **Implementation plans**: Before making changes, Agent presents a plan for your review
* **Complex task tracking**: Multiple checkpoints may be created for larger tasks

### Benefits for AI-assisted development

Agent checkpoints provide unique advantages when building with AI:

* **Safety net**: Experiment confidently knowing you can easily restore previous states across your entire development environment
* **Progress tracking**: See exactly how Agent built your application step by step
* **Logical milestones**: Checkpoints represent complete features rather than arbitrary save points
* **Instant rollback**: Return to any previous state with a single click, including database and AI context restoration

<Info>
  For detailed information about what checkpoints capture and comprehensive rollback capabilities, see [Checkpoints and Rollbacks](/replitai/checkpoints-and-rollbacks).
</Info>

<Tip>
  While Agent checkpoints are powerful for development with AI, consider using Git commits for long-term version tracking and collaboration, especially when working with external repositories.
</Tip>

## Next steps

To learn more about version control on Replit, see the following resources:

* [Using the Git pane](/replit-workspace/workspace-features/git-interface): Master Replit's visual Git interface
* [Import from GitHub](/getting-started/quickstarts/import-from-github): Turn GitHub repositories into Replit Apps
* [Collaboration tools](/replit-app/collaborate): Work with others on shared projects
* [File History](/replit-workspace/workspace-features/file-history): Explore file-level version history
* [Replit Agent](/replitai/agent): Learn more about AI-assisted development

---

# Source: https://docs.replit.com/tutorials/vibe-code-securely.md

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

# Replit's built-in security features

> Learn about the security features built into Replit.

When you're vibe coding—focusing on creativity and rapid iteration—it's easy to overlook security. Replit has designed the platform to push you towards security best practices by providing robust security features that work automatically.

Replit provides several security features out of the box that make it easier to build secure applications.

<Steps>
  <Step title="Version control">
    Replit offers native version control with Git integration. Additionally, you can access file history directly in the Workspace:

* Use the **History** panel to see every keystroke and revert changes
    * Access Git features through the **Git** pane
    * Roll back to checkpoints when using Agent
  </Step>

<Step title="Google Cloud infrastructure">
    All Replit deployments are backed by Google Cloud Platform (GCP):

* Deployments run on GCP
    * Object storage uses Google Cloud Storage (GCS)
    * Resource isolation between projects
    * DDoS protection through Google Cloud Armor
  </Step>

<Step title="Encrypted secrets storage">
    Secrets are encrypted using Google Cloud's secure storage and are safely accessible from your application's code.

To add a secret:

1. Go to the **Secrets** pane in your Workspace
    2. Select **Add a new secret**
    3. Enter a key and value
    4. Select **Add secret**

Keep sensitive information like API keys secure:

```javascript  theme={null}
    // Don't do this
    const apiKey = "sk_test_abcdef12345";

// Do this instead
    const apiKey = process.env.API_KEY;
    ```
  </Step>

<Step title="Object storage">
    When using Replit's object storage:

* Files are backed by Google Cloud Storage
    * Only your app can access stored files by default
    * No need to worry about public access control
    * Agent can set up Object Storage with advanced authentication and access controls

Ask Agent to add secure file storage:

```
    Add Object Storage with authentication for user file uploads
    ```
  </Step>

<Step title="Replit Auth">
    Implement authentication without building it from scratch.

Benefits of Replit Auth:

* Handles login securely
    * Manages sessions
    * Reduces authentication implementation errors

Ask Agent:

```
    Help me implement authentication for my application with Replit Auth
    ```
  </Step>

<Step title="Secure architecture with Agent">
    Agent builds applications with:

* Proper separation of front-end and back-end
    * Secure back-end communication with databases
    * Front-end that communicates only with your back-end API
  </Step>

<Step title="Database security with ORMs">
    Agent uses Object-Relational Mapping (ORM) tools when building applications with databases:

* Protection against SQL injection
    * Schema validation
    * Type safety
    * Managed database connections
  </Step>
</Steps>

---

# Source: https://docs.replit.com/tutorials/vibe-code-security-checklist.md

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

# Security checklist for vibe coding

> Follow this comprehensive security checklist to ensure your vibe coded applications follow best security practices.

This guide provides a comprehensive security checklist to ensure your vibe coded applications follow best security practices.

While Replit provides many security features [out of the box](/tutorials/vibe-code-securely), it's important to understand and implement more security measures for your specific application needs.

## Prerequisites

* A Replit account
* Basic understanding of your preferred programming language
* Familiarity with the Replit Workspace
* An application you're building on Replit

## Front-end security

<AccordionGroup>
  <Accordion title="HTTPS everywhere" icon="lock">
    Replit uses HTTPS by default for all applications. So you don't need to worry about it!
  </Accordion>

<Accordion title="Input validation and sanitization" icon="shield-check">
    Always validate and sanitize user input to prevent cross-site scripting (XSS) attacks:

```javascript  theme={null}
    // Bad: Direct use of user input
    element.innerHTML = userInput;

// Good: Sanitize input before using
    import { sanitize } from 'some-sanitizer-library';
    element.innerHTML = sanitize(userInput);
    ```

Switch to [Fast mode](/replitai/fast-mode) and ask Agent:

```
    Help me validate and sanitize inputs to protect against XSS attacks
    ```
  </Accordion>

<Accordion title="Keep sensitive data out of the browser" icon="eye-slash">
    You should use Replit Secrets to store sensitive information like API keys.

Be sure you don't pass secrets to the client side or put them in the following places:

* Local storage
    * Session storage
    * Client-side JavaScript
    * Cookies without proper security attributes

Switch to [Fast mode](/replitai/fast-mode) and ask Agent:

```
    Help me keep sensitive data out of the browser. Am I doing this correctly?
    ```
  </Accordion>

<Accordion title="CSRF protection" icon="shield">
    Implement Cross-Site Request Forgery (CSRF) protection for forms:

```javascript  theme={null}
    // Example of CSRF token implementation
    const csrfToken = generateToken();
    session.csrfToken = csrfToken;
    ```

Switch to [Fast mode](/replitai/fast-mode) and ask Agent:

```
    Help me implement CSRF tokens for forms
    ```
  </Accordion>
</AccordionGroup>

## Back-end security

<AccordionGroup>
  <Accordion title="Authentication fundamentals" icon="key">
    When implementing authentication:

* Use Replit Auth when possible
    * If building custom auth, use established libraries
    * Never store plain text passwords

Ask Agent:

```
    Help me implement authentication for my application with Replit Auth
    ```
  </Accordion>

<Accordion title="Authorization checks" icon="user-lock">
    Always verify permissions before performing actions:

```javascript  theme={null}
    // Example authorization check
    if (!user.canAccess(resource)) {
      return res.status(403).send('Access denied');
    }
    ```

Ask Agent:

```
    Help me implement authorization checks for my application
    ```
  </Accordion>

<Accordion title="API endpoint protection" icon="shield">
    Secure your API endpoints:

* Add authentication to sensitive endpoints
    * Implement proper CORS settings
    * Consider rate limiting

Switch to [Fast mode](/replitai/fast-mode) and ask Agent:

```
    How do I properly authenticate endpoints in my app?
    ```
  </Accordion>

<Accordion title="SQL injection prevention" icon="database">
    Agent uses ORMs by default, which helps prevent SQL injection. If writing custom database queries:

```javascript  theme={null}
    // Bad: String concatenation in queries
    db.query(`SELECT * FROM users WHERE username = '${username}'`);

// Good: Parameterized queries with ORM
    db.query('SELECT * FROM users WHERE username = ?', [username]);
    ```
  </Accordion>

<Accordion title="Security headers" icon="code">
    Add important security headers to your application:

```html  theme={null}
    
    <meta http-equiv="X-Frame-Options" content="DENY">
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
    ```

You can scan your site at [securityheaders.com](https://securityheaders.com) for recommendations.

Switch to [Fast mode](/replitai/fast-mode) and ask Agent:

```
    Can you add the security headers to my application?
    ```
  </Accordion>
</AccordionGroup>

## Ongoing security practices

<AccordionGroup>
  <Accordion title="Keep dependencies updated" icon="arrow-rotate-right">
    Regularly check for outdated packages that might have vulnerabilities:

```bash  theme={null}
    npm audit
    ```
  </Accordion>

<Accordion title="Proper error handling" icon="exclamation">
    Don't expose sensitive information in error messages:

```javascript  theme={null}
    // Bad: Exposing sensitive details
    catch (err) {
      res.status(500).send(`Database error: ${err.message}`);
    }

// Good: Generic error message
    catch (err) {
      console.error(err); // Log internally
      res.status(500).send('An error occurred');
    }
    ```

Ask Agent:

```
    Help me implement proper error handling for my application
    ```
  </Accordion>

<Accordion title="Secure cookies" icon="cookie">
    When using cookies:

* Set HttpOnly flag to prevent JavaScript access
    * Use Secure attribute to require HTTPS
    * Implement SameSite attribute to prevent CSRF

Ask Agent:

```
    Help me secure my cookies for my application
    ```
  </Accordion>

<Accordion title="File upload security" icon="upload">
    If your application allows file uploads:

* Restrict file types and sizes
    * Scan for malware if possible
    * Store files in Replit's object storage
    * Generate new filenames rather than using user-provided ones

Ask Agent:

```
    Help me secure my file uploads for my application
    ```
  </Accordion>

<Accordion title="Rate limiting" icon="clock">
    Implement rate limiting for API endpoints, especially authentication-related ones:

```javascript  theme={null}
    // Example rate limiting middleware
    const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
      windowMs: 15 * 60 * 1000, // 15 minutes
      max: 100 // limit each IP to 100 requests per windowMs
    });

app.use('/api/', limiter);
    ```

Ask Agent:

```
    Help me implement rate limiting for my application
    ```
  </Accordion>
</AccordionGroup>

## Checklist

Here's the above in a checklist to help you stay on top of your security practices.

## Front-end security

|   | Security Measure                          | Description                                                      |
| - | ----------------------------------------- | ---------------------------------------------------------------- |
| ☐ | Use HTTPS everywhere                      | Prevents basic eavesdropping and man-in-the-middle attacks       |
| ☐ | Input validation and sanitization         | Prevents XSS attacks by validating all user inputs               |
| ☐ | Don't store sensitive data in the browser | No secrets in local storage or client-side code                  |
| ☐ | CSRF protection                           | Implement anti-CSRF tokens for forms and state-changing requests |
| ☐ | Never expose API keys in frontend         | API credentials should always remain server-side                 |

## Back-end security

|   | Security Measure            | Description                                                           |
| - | --------------------------- | --------------------------------------------------------------------- |
| ☐ | Authentication fundamentals | Use established libraries, proper password storage (hashing+salting)  |
| ☐ | Authorization checks        | Always verify permissions before performing actions                   |
| ☐ | API endpoint protection     | Implement proper authentication for every API endpoint                |
| ☐ | SQL injection prevention    | Use parameterized queries or ORMs, never raw SQL with user input      |
| ☐ | Basic security headers      | Implement X-Frame-Options, X-Content-Type-Options, and HSTS           |
| ☐ | DDoS protection             | Use a CDN or cloud service with built-in DDoS mitigation capabilities |

## Practical security habits

|   | Security Measure          | Description                                                            |
| - | ------------------------- | ---------------------------------------------------------------------- |
| ☐ | Keep dependencies updated | Most vulnerabilities come from outdated libraries                      |
| ☐ | Proper error handling     | Don't expose sensitive details in error messages                       |
| ☐ | Secure cookies            | Set HttpOnly, Secure and SameSite attributes                           |
| ☐ | File upload security      | Validate file types, sizes, and scan for malicious content             |
| ☐ | Rate limiting             | Implement on all API endpoints, especially authentication-related ones |

---

# Source: https://docs.replit.com/tutorials/vibe-coding-101.md

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

# Vibe coding 101: from idea to published app

> Learn how to go from an idea to a published application using Replit Agent, featuring an interactive map visualization project.

This tutorial walks you through the "vibe coding" process on Replit—taking an idea from concept to a fully published application. This tutorial will build an interactive map visualization of San Francisco parks, pulling in external data and using modern frameworks. You'll see how to leverage [Replit Agent](/replitai/agent) for initial development, refinements and debugging.

## The vibe coding philosophy

Vibe coding is less about writing every line of code and more about guiding AI tools with your vision and domain knowledge. It's an iterative process of prompting, reviewing, and refining.

Key takeaways from the video:

* **Conceptualize First**: Start with a clear idea of what you want to build. Visualizing the end product helps, especially when prompting AI.
* **Domain Knowledge is Power**: Knowing relevant frameworks (like Leaflet.js for maps) or data sources (like OpenStreetMap) significantly improves AI-generated results.
* **Iterative Development**: Expect to debug and refine. AI tools are powerful, but they're collaborators, not magic wands.

## Project: San Francisco parks map

The goal is to build an interactive map displaying parks and public spaces in San Francisco.

**Problem Statement**: The goal is an interactive map to discover parks and public spaces in San Francisco.
**Solution**: An interactive tool using Leaflet.js and OpenStreetMap data.
**Key lessons**:

* Prompting AI effectively.
* Processing external data.
* Debugging and handling errors.

## Building with Replit Agent

Replit Agent can scaffold entire projects, set up environments, and generate initial code.

<Steps>
  <Step title="Crafting the Initial Prompt">
    A good prompt is specific. We tell Agent:

* The goal: "Help me create a minimalist maps app to visualize San Francisco's parks."
    * Key technologies: "You should use leaflet for map visualization and fetch data from OpenStreetMap."
    * Specific data types from OpenStreetMap (after research): Natural formations (woods, beaches, islets, cave entrances) and leisure locations (parks, gardens).

<AiPrompt>
      Help me create a minimalist maps app to visualize San Francisco's parks. You should use leaflet for map visualization and fetch data from OpenStreetMap. Include the following OpenStreetMap data types for San Francisco: natural formations (woods, beaches, islet, cave entrance) and leisure (park, gardens).
    </AiPrompt>

To learn more about how to write effective prompts, check out [this article](tutorials/effective-prompting).
  </Step>

<Step title="Attaching a Mockup">
    Visual aids help Agent understand the desired layout and features. A simple sketch or mockup can be attached directly to the prompt.

<Step title="Agent's Process">
    1. **Plan Creation**: [Agent](/replitai/agent) outlines the steps it will take. Review and approve this plan.

<Frame>
         <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/agent-plan.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=e25c35ce8054f2ccb02bc8eeb607c23e" alt="Replit Agent plan creation" data-og-width="5120" width="5120" data-og-height="2828" height="2828" data-path="images/tutorials/vibe-coding-101/agent-plan.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/agent-plan.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=c213f7ced9e7429c260a6d36b8fe4897 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/agent-plan.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=bdd1d5197fb393476c11ced89380e3fc 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/agent-plan.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=67679fa7a75c95b2732d34b99a93db62 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/agent-plan.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=9928c751dcfe0215a724b189b73acfd3 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/agent-plan.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=76913a40aa4e6b342dc67d8768fdc221 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/agent-plan.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=9fa426a4567c26d7c0fe9039b34ce832 2500w" />
       </Frame>
    2. **Visual Preview**: Agent streams a visual preview of the app's UI.

<Frame>
         <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/visual-preview.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=1d3fc339176c1fdf0cc73621109c162b" alt="Replit Agent visual preview" data-og-width="5120" width="5120" data-og-height="2828" height="2828" data-path="images/tutorials/vibe-coding-101/visual-preview.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/visual-preview.png?w=280&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=b1872a3869c568a406174a9e9063627a 280w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/visual-preview.png?w=560&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=0d7016dc64bf614da4ea2155e6eb92c5 560w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/visual-preview.png?w=840&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=328c3237ad022ae52adc9d0c2da8c457 840w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/visual-preview.png?w=1100&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=1dcae85f2b62a35ad2c3ca5fb602fd36 1100w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/visual-preview.png?w=1650&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=3f955c5eb946039844010f02862d7d2f 1650w, https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/tutorials/vibe-coding-101/visual-preview.png?w=2500&fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=5af4f954457dfab503967458cbc5fd08 2500w" />
       </Frame>
    3. **Environment Setup**: Agent configures the development environment, installing necessary languages and packages—no manual setup required.
    4. **Building the App**: Agent writes the code for the front end and back end.
    5. **Checkpoints**: Agent creates checkpoints ([Git commits](/replit-workspace/workspace-features/version-control)) so you can roll back if something goes wrong.
  </Step>

<Step title="Debugging with Agent">
    Errors happen. Use the browser's DevTools (specifically the Console and Network tabs) to find error messages.

* **Observe**: The map loaded, but no data points appeared.
    * **Investigate**: The console showed an error: "Failed to fetch map features error cannot read properties of undefined reading natural."
    * **Inform Agent**: Paste the error message directly into the chat with Agent. Agent will attempt to debug and fix the issue.

In the video, Agent identified an issue with parsing the Overpass API response and added robust error handling, which resolved the problem.
  </Step>
</Steps>

## Refining with Fast mode

Once Agent builds the MVP, use [Fast mode](/replitai/fast-mode) for smaller, more targeted edits and refinements. Fast mode is optimized for quick changes.

<AccordionGroup>
  <Accordion title="Improving Map Styling">
    The initial map was functional but could look better.
    **Prompt to Agent**: "Can you use a more minimalist carto style for OpenStreetMap? Carto lite."

This relies on knowing that "Carto lite" is a known theme for Leaflet maps.
  </Accordion>

<Accordion title="Adding Dark Mode">
    A common refinement is adding a dark mode.
    **Prompt to Agent**: "Can you add a dark mode to my app and use, carto dark for the map in the dark mode?"

Agent will:

* Read files for context.
    * Make changes to necessary files (e.g., theme providers, styles).
    * Restart the app to apply changes.
  </Accordion>

<Accordion title="Iterative Debugging with Agent">
    Adding dark mode involved several iterations:

1. Initial implementation had a toggle that worked for the map but then disappeared.
       **Feedback**: "The toggle theme button works for the map, but it disappears when clicked. The theme toggle should be in the side nav and the theme should be applied to the side nav."
    2. Issues with multiple toggle buttons and incorrect component references (`side nav` vs. `sidebar`).
       **Feedback & Guidance**: "Now there are two toggle themes. One controls the map, the other controls the side nav. Make them into one in the side. Now and update the CSS."
       When Agent made an incorrect assumption (e.g. `SideNav` component), explicitly pointing it to the correct file (`@Sidebar`) helps.
    3. Final fix to ensure the dark mode toggle in the sidebar correctly toggled the map theme to Carto Dark.
       **Feedback**: "Now the dark mode toggle in @Sidebar does not toggle the map to carto dark."

This process highlights the "conversation" aspect of vibe coding. Be descriptive and guide the AI.
  </Accordion>
</AccordionGroup>

## Publishing your application

Replit makes publishing straightforward.

1. Select the **[Publish](/cloud-services/deployments/about-deployments)** button.
2. Agent suggests a publishing configuration (e.g., app name, build and run commands). Review and confirm.
3. If your app uses API keys or other sensitive information, store them in **[Secrets](replit-workspace/workspace-features/secrets)**. Agent will use these securely.
4. Select **Publish**. Replit bundles your app and makes it live on the web.

Your published app will have a public URL (e.g., `park-mapper.replit.app`). Changes made in your development environment won't affect the published version until you click **Republish**.

## Recap and next steps

This tutorial went from an idea to a published interactive map application without writing a single line of code manually. Replit Agent was used for the heavy lifting, with Fast mode for refinements, leveraging domain knowledge and an iterative debugging process.

**Potential Next Steps for the Park Mapper App**:

* Add a [database](category/storage-and-databases) to store park data persistently (avoiding re-fetch on every load).
* Allow users to save or favorite parks.
* Implement advanced filtering.
* Improve styling and add custom icons for map markers.
* Enhance mobile responsiveness (e.g., ensuring filters are accessible on mobile).

Vibe coding is about iterating, experimenting, and guiding AI to bring your ideas to life. Don't be afraid of errors; they are part of the process!

---

# Source: https://docs.replit.com/teams/identity-and-access-management/viewer-seats.md

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

# Viewer Seats

> Learn how to set up and manage viewer seats for your Replit Team.

## About viewer seats

Viewers get read-only access to your team's apps and deployments. This makes it easier to share your work with stakeholders and collaborators who don't need edit permissions or a full team license.

Viewer seats are perfect for:

* Internal tool users who are not creating applications
* Stakeholders who need to review project progress
* Teammates who are exploring capabilities of Replit

Teams get 50 viewer seats included in their plan, allowing you to scale your collaboration efficiently.

If you would like to add more than 50 viewers, contact our sales team at [sales@replit.com](mailto:sales@replit.com) regarding an Enterprise plan.

## Inviting a viewer

1. Navigate to the **Members** tab in your Organization
2. Select **+ Add**
3. Choose the Viewer option
4. Enter the email addresses of viewers you would like to add in a comma-separated list
5. Select **Send invites**

Invited users without a Replit account will receive an email with instructions to create an account and join your team. Users who already have a Replit account will be added automatically.

## Viewer access

<Note>
  **Updated Default Access Behavior (Effective June 9, 2025)**: Apps created in organizations will now be **private by default**. Viewers will need to be explicitly granted access to new apps through the Access panel.
</Note>

Viewers will need to be explicitly granted access to new apps through the Access panel. For existing apps created before this change, viewers may still have access based on previous settings.

---

# Source: https://docs.replit.com/replit-app/visibility.md

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

# Replit App Visibility

> Learn how to create and manage private Replit Apps with a Core membership or Teams Pro account. Control access to your projects with privacy settings.

With a free Replit account, personal Replit App are public by default.

As an individual, you can make your Replit App private by subscribing to our [Replit Core membership](https://replit.com/pricing) (previously Hacker or Pro) that comes with unlimited private Replit App.

Teams Pro accounts come with the ability to make any Team Replit App private.

Private Replit App can only be accessed by directly invited guests or by team members.

## Creating a private Replit App

You can make a Replit App private by toggling the Replit App to Private when you're making a new Replit App from a Template or forking an existing Replit App.

## Making an existing Replit App private

### From the Workspace

You can make any public Replit App private by toggling it on from the Workspace.

1. Navigate to your Replit App
2. Open the info panel by clicking on your Replit App's name in the navbar
3. Make your Replit App private by pressing the Private toggle

### From the My Replit App page

You can also make any of your public Replit App private from the My Replit App page.

1. Navigate to the My Replit App page from the left sidebar
2. Hover over the "Public" copy on the card of the Replit App you want to make private
3. Press the "Make private" button

---

# Source: https://docs.replit.com/replitai/visual-editor.md

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

# Visual Editor

> Replit's Visual Editor empowers you to make direct visual edits to your app's UI in the preview, with seamless source code updates.

## Features

The Visual Editor lets you:

* Select elements in your app's preview for editing
* Edit text directly from the preview if it's a string in your source code
* Update images by swapping URLs or uploading your own files
* Adjust styles using intuitive controls for properties like padding, text color, and background color
* Instantly preview styling & changes
* Save those changes by updating the source code instantly

## Usage

Activate the Visual Editor from the Agent chat.

1. **Select an Element**: Click any element in your app's preview to start editing.
2. **Edit Element**: Directly edit text if it's a string in your source code, right from the preview. Or use the editor pane in the chat to update more properties like padding, margin, color, etc.
3. **Preview Changes**: Changes are previewed live in the preview.
4. **Save**: Hit save to update the source code instantly. If it's a simple change, your edits will directly update the source code without consuming AI credits. If there's uncertainty or hidden complexity involved in the edit, Visual Editor seamlessly sends targeted metadata to Agent for accurate assistance.

<Note>
  The Visual Editor is currently available only on <strong>web browsers</strong>. It is not supported on mobile or desktop applications.
</Note>

## Example Use Cases

The Visual Editor is useful for a variety of UI modifications:

* **Text Edits in Preview**: Click, type, done. Edit text directly in the Preview tool.
  <Frame>
    <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-text-edits.mp4" />
  </Frame>

* **Perfect Color Updates**: Use the color picker to adjust text and backgrounds.
  <Frame>
    <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-color-picker-and-eyedropper.mp4" />
  </Frame>
  <Tip>
    Try alternative input methods, such as typing a color name like 'purple' in the input field, or the eyedropper to pick a color from anywhere on your screen.
  </Tip>

* **Style Changes Across Elements**: Adjust padding, margins, and more.
  <Frame>
    <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-related-elements.mp4" />
  </Frame>

* **Image Updates**: Select images to swap URLs or upload your own with instant previews.
  <Frame>
    <video autoPlay muted loop playsInline src="https://storage.googleapis.com/replit-cdn/sanity/v2-image-edits.mp4" />
  </Frame>

## Tips & guidelines for effective use

* Select the most precise element possible for your intended change
* Selecting an element rendered in a loop or used in multiple places will highlight and update all instances of it
* Updating text of composite elements which are made up of multiple sub elements is disabled in Visual Editor, but you can ask Agent to make changes like this in chat
* Clicking on the top left label will take you to the element in the source code
* Escape key can be used to dismiss the Visual Editor when inside the preview

### Upgrading from Element Selector to Visual Editor

When you open an app that has Element Selector available, you'll see an automatic upgrade prompt to switch to the new Visual Editor.

If you want to upgrade manually, you can do so in any Agent-created JavaScript App by opening the Shell pane and running the following command:

```bash  theme={null}
npm i @replit/vite-plugin-cartographer@latest
```

Once you've installed the plugin, you can restart your app to start using the new Visual Editor.

---

# Source: https://docs.replit.com/replitai/warehouse-connectors.md

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

# Warehouse Connectors

> Connect Replit Agent to BigQuery, Databricks, and Snowflake to build data-driven applications.

Warehouse Connectors allow Replit Agent to securely access and query your organization's data warehouses. This Enterprise-only feature enables builders to create powerful, data-driven applications using natural language, with centralized admin control and role-based access.

## Supported warehouses

Replit supports connections to:

* **BigQuery**
* **Databricks**
* **Snowflake**

These connectors allow Agent to write and execute SQL queries against your data. You can build internal dashboards, data visualization tools, reporting systems, and applications that integrate directly with your warehouse data.

## Admin setup

Administrators must configure warehouse connectors before team members can use them. The setup process involves configuring an OAuth application in your warehouse provider and adding those credentials to Replit.

### Prerequisites

* Enterprise plan
* Admin access to your Replit organization
* Ability to create OAuth applications in your warehouse provider (or access to credentials from your IT/Data team)

### Configuration steps

<Steps>
  <Step title="Navigate to Integrations">
    Go to your organization's settings and select the **Integrations** tab.
  </Step>

<Step title="Enable Connector">
    Select the warehouse you want to connect (BigQuery, Databricks, or Snowflake).
  </Step>

<Step title="Enter Credentials">
    Provide the **Client ID** and **Client Secret** for the OAuth application you created in your warehouse provider.
  </Step>

<Step title="Configure Access">
    Use Role-Based Access Control (RBAC) to specify which members or groups can use this connector.
  </Step>
</Steps>

### Warehouse-specific configuration

<AccordionGroup>
  <Accordion title="Databricks">
    Admins can configure Databricks connections using one of two methods: **User-OAuth** or **Service Account**.

**Option 1: User-OAuth**

This method involves minting OAuth application tokens within Databricks.

<Warning>
      With User-OAuth, the credentials of the user who authenticates the connection are used for all subsequent access. This means that anyone using an application created with this connection will effectively have the same permissions as the authenticating user. Ensure the authenticating user has the appropriate scope of access intended for all application users.
    </Warning>

**Option 2: Service Account**

This method involves creating a service account (Service Principal) in Databricks to connect to Replit.

The service account is shared among everyone given permission to use that integration. The permissions granted to the service account in Databricks will flow to all users enabled for the integration. Scope service accounts to READ-only access on the data when possible.

**Managing Access Granularity**

To differentiate access levels (for example, restricting specific tables to different teams):

1. Create multiple Service Principals in Databricks
    2. Assign specific permissions to each Service Principal
    3. Create separate integrations in Replit for each Service Principal
    4. Open access to each integration only for the allowed individuals or groups
  </Accordion>
</AccordionGroup>

## Builder access and login

Once an admin has enabled a connector and granted you access, you can connect to the warehouse.

### Connecting to a warehouse

When you ask Agent to use a warehouse (for example, "Query the Snowflake database..."), or when you manually add the integration, you receive a login prompt.

Each warehouse requires specific information during the login or connection process:

<AccordionGroup>
  <Accordion title="BigQuery">
    **Required at login:**

* **Project ID**: You must specify the Google Cloud Project ID you want to access.
  </Accordion>

<Accordion title="Databricks">
    **Required information:**

* **SQL Warehouse**: The specific SQL Warehouse compute resource to use.
    * **Account URL**: Your Databricks account URL.
  </Accordion>

<Accordion title="Snowflake">
    **Required information:**

* **Account ID**: Your Snowflake Account ID.
  </Accordion>
</AccordionGroup>

### Building with warehouse data

After connecting, you can ask Agent to build applications that use your data. Agent can:

* Build internal tools that fetch and display live data
* Create dashboards with charts and visualizations backed by your warehouse
* Generate SQL queries to power your application's backend
* Explain schema and table structures to help you understand what to build

<Note>
  While Agent can answer ad-hoc questions about your data, the primary purpose of Warehouse Connectors is to enable Agent to build functional applications that leverage your organization's data. Warehouse queries are executed directly against your instance, so make sure your OAuth scopes and database user permissions allow the necessary read and write operations.
</Note>

## Related documentation

* [Connectors overview](/replitai/integrations) — Learn about all integration types
* [Connectors for Organizations](/replitai/connectors-for-organizations) — Centralized connector management for Teams and Enterprise

---

# Source: https://docs.replit.com/legal-and-security-info/web-accessibility.md

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

# Replit web accessibility statement

> Learn about Replit's commitment to web accessibility, WCAG 2.1 compliance goals, current accessibility status, and how to provide feedback about accessibility features.

*See our accessibility features [here](/replit-workspace/workspace-features/user-settings).*

Replit believes that computing is for everyone. As such we are committed to making our service fully accessible to all, including people with disabilities. This statement explains our accessibility goals, our progress towards meeting those goals, and how you can contact us with feedback about accessibility on Replit.

# Conformance goals

Our aim is to achieve full compliance with the W3C WAI’s Web Content Accessibility Guidelines (WCAG) 2.1, which defines requirements for designers and developers to improve accessibility for people with disabilities. Replit is currently partially conformant with WCAG 2.1 level AA. Partially conformant means that some parts of our website content do not yet fully conform to the accessibility standard.

# Current status

Replit has an ongoing internal project to improve our site’s accessibility, responding to our own internal evaluation, user interviews and reports, and the results of an independent evaluation conducted by the Cornell University IT Department in 2021.

The majority of content on our website is available in HTML format conformant with current W3C standards for HTML and CSS. Non-text content presented to the user, such as images and form elements, have a text alternative that can be recognized and spoken aloud by screen readers.

Despite our best efforts to ensure accessibility of Replit, you may encounter some limitations. In particular, the inability to fully manipulate the workspace using your keyboard is a known issue that we are working to address.

# Giving feedback

If you have any trouble accessing the Replit website, we encourage you to provide us with feedback by emailing [contact@replit.com](mailto:contact@replit.com). Please provide the URL (web address) of the material you tried to access, the problem you experienced, and your contact information.

---

# Source: https://docs.replit.com/replitai/web-search.md

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

# Web Search

> Agent searches the web and fetches current information to build apps with up-to-date information, latest documentation, and accurate details from across the internet.

Build applications with current, real-world data using Agent's Web Search <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a283d64b9413da03974641db179998a3" alt="Web Search icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/web-search.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=1eb5edc33fc98fa45e4f35801a88b0a7 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8f7c4cbe8c3d7d80e4a1fa7af249a012 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=625ac9f7025135df41c727aafb94ace5 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=839ca235cb82bcb265c38673ffdf62f2 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=11ef66dd786167f3a64c2f765a0948ae 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0ccbdeb3411514252ecb90fd08706e9e 2500w" /> capabilities.

This feature overcomes knowledge cutoffs by accessing the latest information on the web. When you ask Agent to create something requiring up-to-date information, it searches the web and fetches detailed content to make your app more accurate and useful.

Web Search is valuable for finding the latest packages, tools, and information. This ensures your apps use current best practices and are more accurate.

## Features

Build applications with current information using Agent's Web Search. This eliminates manual research and data gathering. Whether you're creating a dashboard with financial data or building a website showcasing recent startup launches, Web Search ensures your app reflects reality.

Agent can perform the following Web Search actions:

* **Search**: Find current information, latest documentation, and real-time data from the internet
* **Content fetching**: Retrieve detailed information from specific websites and URLs
* **Source citations**: View exactly where Agent found information so you can verify and reference sources

## Usage

Web Search is enabled by default. Include keywords like "search," "research," or "use Web Search" in your prompt to trigger it.

To manually enable Web Search:

1. Open Agent in your Replit App
2. Locate the toggle controls in the chat toolbar <img class="icon-svg" src="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/agent-settings.svg?fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=23a035924bb3c8c61e7ca996c76a90a1" alt="Agent settings icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/agent-settings.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/agent-settings.svg?w=280&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=08dd975be952b60db564bcfedfc6f7fd 280w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/agent-settings.svg?w=560&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=4c35dd49157af177d8e2ea495eb6fb51 560w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/agent-settings.svg?w=840&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=5d87fc1ea8d58c3105dadceb194b4edb 840w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/agent-settings.svg?w=1100&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=6d68bbc6b654bd433f2260669ddbf03b 1100w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/agent-settings.svg?w=1650&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=889488d8482ad86f6bdbe4194eb648ce 1650w, https://mintcdn.com/replit/rBzGsKp9NcWJ7sib/images/icons/agent-settings.svg?w=2500&fit=max&auto=format&n=rBzGsKp9NcWJ7sib&q=85&s=ce1af7526c6290400507c309b091e5f4 2500w" />
3. Toggle <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a283d64b9413da03974641db179998a3" alt="Web Search icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/web-search.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=1eb5edc33fc98fa45e4f35801a88b0a7 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8f7c4cbe8c3d7d80e4a1fa7af249a012 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=625ac9f7025135df41c727aafb94ace5 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=839ca235cb82bcb265c38673ffdf62f2 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=11ef66dd786167f3a64c2f765a0948ae 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0ccbdeb3411514252ecb90fd08706e9e 2500w" /> **Web Search** on
4. Send your prompt

Agent automatically determines when to use Web Search based on your requests. Describe what you want to build, and Agent searches for current information when necessary.

### When Agent uses Web Search <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a283d64b9413da03974641db179998a3" alt="Web Search icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/web-search.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=1eb5edc33fc98fa45e4f35801a88b0a7 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=8f7c4cbe8c3d7d80e4a1fa7af249a012 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=625ac9f7025135df41c727aafb94ace5 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=839ca235cb82bcb265c38673ffdf62f2 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=11ef66dd786167f3a64c2f765a0948ae 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/web-search.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=0ccbdeb3411514252ecb90fd08706e9e 2500w" />

Agent triggers Web Search when you request information that requires current data:

| Use Case                 | Example Prompt                                                                                                                              |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Finding optimal packages | "I need to build an image editor - research the best libraries for canvas manipulation and build an app"                                    |
| API research             | "Build a Discord bot that tracks GitHub commits - find the most reliable Discord.js tutorial and the best way to communicate with GitHub"   |
| Framework comparison     | "Help me decide how to implement inventory management for my shopping app. Research the best authentication solutions and their trade-offs" |
| Tool discovery           | "Create an app with smooth animations - research the best animation libraries"                                                              |
| Current market data      | "Build a crypto tracker showing today's top 10 coins with real prices"                                                                      |
| Company research         | "Make a portfolio site for Michele Catasta, president of Replit"                                                                            |
| Documentation updates    | "Build a Stripe payment form using their latest API changes"                                                                                |
| Technology trends        | "Create a developer tools dashboard - what are the trending VS Code extensions?"                                                            |

### How Web Search enhances your apps

Web Search transforms your applications from using placeholder data to incorporating real, accurate information:

| Benefit                | Description                                                        |
| ---------------------- | ------------------------------------------------------------------ |
| Up-to-date technology  | Your apps use latest information and packages not in training data |
| Best tool selection    | Agent researches options to choose optimal packages                |
| Current best practices | Access to latest development patterns and security practices       |
| Breaking limitations   | Overcome knowledge cutoffs to use packages released after training |
| Accurate data          | Your apps display current information instead of outdated examples |
| Professional results   | Applications that reference real companies appear credible         |
| Time-saving            | Avoid manually researching packages and gathering data             |

### Source citations

When Agent uses Web Search, it provides **source citations** that show exactly where the information came from. Use these citations to:

* **Verify information**: Check the reliability and accuracy of sources
* **Learn more**: Visit the original sources for more context
* **Reference sources**: Include proper attribution in your applications
* **Track research**: Understand what information informed Agent's work

### Content fetching

Agent can fetch detailed content from specific websites to gather comprehensive information for your project. This allows Agent to:

* Read entire web pages to extract relevant details
* Process documentation and reference materials
* Gather specific data points from authoritative sources
* Integrate structured information into your application

### Examples of Web Search in action

**Package discovery for image processing**

<AiPrompt>
  Build a React app that lets people apply filters to photos. Research the best image processing libraries for React and implement blur, sharpen, and vintage effects
</AiPrompt>

Agent searches for current image processing libraries, compares their features and performance, then builds the app using the most suitable tools.

<Tip>
  Web Search works best with specific, detailed requests. For technology discovery, mention your specific requirements
</Tip>

**Latest framework features**

<AiPrompt>
  Do research to understand the latest security best practices for authentication and authorization. Implement those best practices in my app.
</AiPrompt>

Agent researches the latest security best practices for authentication and authorization and implements them in your app.

**Modern API integration**

<AiPrompt>
  Build a weather app that uses the most reliable and feature-rich weather API available
</AiPrompt>

Agent researches current weather APIs, compares their features, reliability, and pricing to select the best option for your needs.

**Startup showcase website**

<AiPrompt>
  Build a website showcasing the latest Y Combinator batch startups
</AiPrompt>

Agent searches for current YC batch information and creates a site with real startup data, logos, and descriptions.

**Personal portfolio site**

<AiPrompt>
  Create a personal website for Michele Catasta, a former researcher at Stanford and President of Replit.
</AiPrompt>

Agent searches for professional information and creates an authentic portfolio with relevant experience and background.

**Travel planning app**

<AiPrompt>
  Build a trip planner for Japan with current prices and recommendations
</AiPrompt>

Agent finds up-to-date travel costs, attractions, and planning information to create a realistic travel application.

**Financial comparison dashboard**

<AiPrompt>
  Create a dashboard comparing the latest quarterly earnings of major cloud providers
</AiPrompt>

Agent searches for recent financial reports and builds a dashboard with current, accurate data visualizations.

<Warning>
  Always verify information from Web Search results, especially for critical applications. While Agent searches reputable sources, confirm important details for production applications.
</Warning>

## Next steps

Combine Web Search with other Agent features for maximum impact:

* Learn about [Agent](/replitai/agent) capabilities for building apps
* Explore [Replit AI tools](/category/replit-ai) for more development features

---

# Source: https://docs.replit.com/getting-started/quickstarts/webscrape-and-slack-notifications.md

# Create a HackerNews Slack bot

> Build a bot that scrapes HackerNews and sends updates to Slack. Learn how to use Scheduled Deployments and integrate with external services.

Learn how to create a bot that monitors HackerNews and sends notifications to Slack. This guide shows you how to use Scheduled Deployments and external APIs.

## What you'll learn

<CardGroup cols={2}>
  <Card title="Web Scraping" icon="spider-web">
    Fetch data from HackerNews
  </Card>

<Card title="Slack Integration" icon="slack">
    Send notifications to Slack channels
  </Card>

<Card title="Scheduling" icon="clock">
    Configure automated publishing
  </Card>

<Card title="API Usage" icon="code">
    Work with external services
  </Card>
</CardGroup>

## Create your bot

<Steps>
  <Step title="Fork the template">
    Sign in to Replit and fork the [HackerNews webscraper template](https://replit.com/@replit-matt/Hacker-News-Alert-Slackbot?v=1#app.py). Select **+ Use Template** and follow the prompts to create your Replit App.
  </Step>

<Step title="Create a Slack app">
    1. Go to [Slack Apps](https://api.slack.com/apps) and select **Create an App**
    2. Choose **From an app manifest**
    3. Select your workspace

4) Replace the manifest with [this JSON](https://replit.com/@replit-matt/Hacker-News-Alert-Slackbot?v=1#manifest.json)

(/\* vale on \*/}

5. Review and select **Create**
    6. Select **Install the App**

<Note>
      You may need administrator approval based on your organization's policies.
    </Note>
  </Step>

<Step title="Configure tokens">
    Add these secrets to your Replit App's **Secrets** tab:

1. **SLACK\_BOT\_TOKEN**

* Go to Settings > Install App
       * Copy the **Bot User OAuth Token**

2. **SLACK\_SIGNING\_SECRET**

* Go to Settings > Basic Information
       * Copy the **Signing Secret** from App Credentials

3. **SLACK\_APP\_TOKEN**
       * Go to Settings > Basic Information
       * Under App-Level Tokens, select **Generate Token and Scopes**
       * Add permissions and generate token
  </Step>

<Step title="Customize your bot">
    Update `app.py` with your preferences:

```python  theme={null}
    KEYWORDS = ["h"]  # Terms to search for
    ALERT_UIDS = ["U06C34217C5"]  # Your Slack member ID
    NUM_TOP_STORIES = 25  # Number of stories to check
    ```

<Tip>
      Get your Slack member ID from your profile settings under the ellipsis menu.
    </Tip>
  </Step>
</Steps>

## Publish with scheduling

<Steps>
  <Step title="Start publishing">
    Select **Publish** in the workspace header.
  </Step>

<Step title="Configure schedule">
    1. Choose [Scheduled
       Deployments](/cloud-services/deployments/scheduled-deployments) 2. Set your
       preferred schedule 3. Select **Publish**
  </Step>

<Step title="Monitor">
    Your bot will now run automatically according to your schedule.
  </Step>
</Steps>

## Customization options

<CardGroup cols={2}>
  <Card title="Enhance filtering">
    * Add more keywords - Refine matching criteria - Customize scoring
  </Card>

<Card title="Improve notifications">
    * Format messages - Add rich previews - Include metadata
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={3}>
  <Card title="AI Integration" icon="robot" href="/getting-started/quickstarts/ai-slack-channel-summarizer">
    Add AI summaries to notifications
  </Card>

<Card title="Deployments" icon="cloud" href="/cloud-services/deployments/scheduled-deployments">
    Learn more about scheduling
  </Card>

<Card title="Databases" icon="database" href="/cloud-services/storage-and-databases/sql-database/">
    Store historical data
  </Card>
</CardGroup>

## Related guides

<CardGroup cols={2}>
  <Card title="Create a Slack summarizer" icon="slack" href="/getting-started/quickstarts/ai-slack-channel-summarizer">
    Build a bot that summarizes Slack channels
  </Card>

<Card title="Build with AI" icon="wand-magic-sparkles" href="/getting-started/quickstarts/build-with-ai">
    Create apps using Agent and Assistant
  </Card>
</CardGroup>

<Note>
  Want to learn more about publishing? Check out our [publishing documentation](/category/replit-deployments).
</Note>

---

# Source: https://docs.replit.com/replit-workspace/workflows.md

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

# Workflows

> A Workflow is a easily configurable 'Run' button that can run any command(s) you'd like.

It is a reusable, customizable sequence of steps that can be executed within your replit app. They can be as simple as running `python main.py` or as complex as executing a multi-step procedure.

Example Use Cases:

* Run multiple services in parallel (e.g., frontend + backend)
* Execute files or commands sequentially (e.g., run linter → run tests, compile → execute code)

To start [creating workflows](#creating-workflows), go to the Workflows pane by using the tools sidebar menu, or search for the Workflows pane using `Command + K`.

## Available Task Types

There are current 3 type of tasks available, `Execute Shell Command`, `Install Packages`, and `Run Workflow`.

### Execute Shell Command

`Execute Shell Command` stores a shell command and executes it using the same environment as the Shell pane. This task type offers a wide range of use-cases, from running individual files:

```text  theme={null}
python main.py
```

to executing complex stored database query commands:

```text  theme={null}
psql -h 0.0.0.0 -U your_username -d your_database -c "SELECT * FROM your_table;"
```

Example use case:

### Install Packages

`Install Packages` utilizes Replit's built-in dependency management system, automatically detecting your project dependencies and installing the necessary packages for your project. See [Dependency Management](../replit-workspace/dependency-management.md#the-universal-package-manager) for more details on how UPM guesses packages to install for your project under the hood.

Example use case:

### Run Workflow

`Run Workflow` allows you to run another workflow from the current workflow. This allows for reusing workflows and combining them to create more complex workflows.

Example use case:

By using this task type for creating dependencies between workflows, you can edit one workflow and have other workflows referencing it automatically use the latest changes. Note that there is a depth limit placed on deeply nested workflow calls.

## Workflow Execution Mode

Workflows offer two different modes of execution: sequential and parallel.

### Sequential

Sequential execution will run each task in the defined order, waiting for each task to finish before moving on to the next step, and stopping execution of the sequence if a task within the workflow failed.

An example of using this mode is for defining commands that are logically connected, such as git commands for fetching the latest changes from your main branch, then rebasing your current branch on the main branch:

### Parallel

Parallel execution will run each task in parallel, such that each task is started and runs independently of other tasks within the workflow. One task failing does not stop the execution of other tasks.

An example of using this mode is running a fullstack project that needs to start both the frontend and the backend server:

## Creating Workflows

Workflows can be created using the workflows pane by clicking on the `+ New Workflow` button. Start by giving your workflow a descriptive name, chose a suitable mode of execution, and start adding tasks. Tasks can be re-ordered by dragging and dropping them into the desired order.

## Assign Workflow to Run Button

A workflow can also be assigned to the run button to replace the default run button behavior (see [Configure a Replit App](/replit-app/configuration)). To keep the default run command configured within `.replit`, select the default "Run Replit App" option within the dropdown.

The selected workflow within the dropdown menu next to the run button will be run when the run button is clicked. Click on your desired workflow within the dropdown menu to change which workflow should be run by the run button.

## Viewing Workflow Outputs

Workflow outputs will be displayed in the `Console` pane. You can toggle the display to only display latest outputs and clear the console altogether.

---

# Source: https://docs.replit.com/category/workspace-features.md

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

# Workspace Features

> The Replit workspace features are a comprehensive set of tools that power your app creation experience.

The workspace includes layout management and integrated tools that power your app-building experience.
These workspace features specialize in handling specific aspects of the development process, letting you
focus on creating instead of configuring.

## Customizable workspace layout

The workspace layout management tools let you customize the components of the development environment.
It consists of the following user interface element types:

| Element     | Description                                                                    | Capabilities                                                                                                                                                    | Use Cases                                                                                                              |
| ----------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Windows** | Browser tabs that contain one or more panes                                    | <ul><li>Can be organized across multiple screens</li></ul>                                                                                                      | <ul><li>Organizing your workspace across multiple screens</li><li> Work on different projects simultaneously</li></ul> |
| **Panes**   | Sections of a window that contain one or more tabs                             | <ul><li>Support horizontal and vertical splitting</li><li>Can be resized and rearranged</li><li>Can be converted to a floating pane within the window</li></ul> | <ul><li>View code and preview side-by-side</li><li>Create custom layouts for different development tasks</li></ul>     |
| **Tabs**    | Contain exactly one workspace tool, such as the file editor, Preview, or Agent | <ul><li>Can be moved between panes and reordered within them</li><li>Can switch between different files or tools with a single click</li></ul>                  | <ul><li>Open different tools or files when you need them</li></ul>                                                     |

The following video identifies each workspace layout element:

## File tree

The file tree lists all the files and directories in your Replit App's workspace.

<Accordion title="How to access the file tree">
  Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=dcf170c63430088fc4e28058849eec4f" alt="folder with arrows icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/files-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b72e6d298af9f96117a8a5492b9d8a42 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=af6a952cc85e5f742968c8a91b1e5137 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7f13cd1bcab1279e81e042c7a80d3033 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=c4b325c9fc5e0e80d3e98b68715f2aa1 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=dcefa4a3a120cf6be1af51a67430632f 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/files-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=78a61e721c9d71f1d41541aea469befc 2500w" /> folder icon on the left to toggle
  the file tree's visibility.
</Accordion>

You can perform the following actions in the file tree:

* Select a folder to display its contents
* Select a file or drag it to a pane to open it in a file editor
* Perform file operations such as duplicating, renaming, moving, downloading, or deleting

The following video shows several file tree actions:

## Tools dock

The tools dock lets you search for and open workspace tools in new tabs.

<Accordion title="How to access the tools dock">
  Select from commonly used tools or select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5b2c72713cc17ac272098bcbfd624d84" alt="All tools icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=284639f38f8e91da05d14611e44a9ae6 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d0e802a9c50a81e5c825cf1ddce00a64 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=b5c4e38a7cf923221d2412e904bbdc94 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=3b43a87adf314fbb300376b404ab8a22 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a11f8a405c4156ff625219a372c2ceca 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-all-tools-button.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=7c86d2f1bfa4611aeca168daf29d08ff 2500w" /> **All tools**
  icon to open the tools search popup menu.
</Accordion>

The following screenshot shows the open **All tools** popup menu in the tool dock:

## Run button

The **Run** button executes the Replit App's selected workflow.

<Accordion title="How to access the run button">
  The **Run** button is located at the top of the workspace screen. Select the button to run the workflow.

When your Replit App is running, the button label is replaced by **Stop**. Select the button to stop the app.
</Accordion>

To learn how to select, view, and manage workflows, see [Workflows](/replit-workspace/workflows/).

The following video shows how to view and run a workflow:

## Spotlight page

The spotlight page lets you view and modify your Replit App cover page and access sharing options.

<Accordion title="How to access the spotlight page">
  Select your project name in the top left of the workspace to toggle the spotlight page.
</Accordion>

The following video shows how to access the spotlight page:

## Options menu

The options menu lets you perform the following types of layout actions:

* **Window management**: Open a workspace for the Replit App in a new window
* **Pane management**: Add panes, move a pane, maximize a pane, and toggle between floating and fixed positions
* **Tab management**: Open or select other tabs, move a tab to another pane, and close a tab

<Accordion title="How to access the options menu">
  Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d6ac2757eaf25e61d31ce51316ec91ad" alt="vertical dots icon" height="16" width="16" data-og-width="24" data-og-height="24" data-path="images/icons/vertical-dots.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=cf215ef22f55bf163c0037f923584e37 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=9659b713156cc159f2b9107450cc0fbd 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=73cb1af8587233823aba8f0aec72d1d9 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5d633ba6d10d1d6d6d179b3086869257 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5255815ba3d626d74ede11e23698ccbd 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/vertical-dots.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=15dffd4252b85614141c73a628671cf1 2500w" /> three vertical dots
  located in the top right corner of the active tab to open the options menu.
</Accordion>

The following screenshot shows the options popup menu in the left pane:

## Search bar

The search bar lets you find files, text, or tools within your workspace.

<Accordion title="How to access the search bar">
  1. To open the search bar, select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=4a0eb8f6b17ff6761d53167334a68b30" alt="magnifying glass icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/workspace-search-icon.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=baa20919b2c8e7db2fad2562c732edd0 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5fcfa3935da89ed6c1c6f893998c4f4a 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=2a24f3fcc4dd990d9062598eab165cff 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=a3258e068d5ead6bacadcbe6e5785575 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=d08ebecb3063ed18a657beb563ac9c3c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/workspace-search-icon.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=e63dd2009929a4b375b86e44ed6d7732 2500w" /> magnifying glass icon at the top.
  2. Enter your search text and select from the auto-complete suggestions.
</Accordion>

The following screenshot shows the search popup menu:

## Resources panel

The resources panel displays your development environment's computing resources and usage, including RAM, CPU, and storage.
This information can help you estimate and optimize your Replit App's publishing requirements.

<Accordion title="How to access the resources panel">
  1. Select the <img class="icon-svg" src="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/resources.svg?fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=507357a8379c837a358dc93ceb498a65" alt="stacked computers icon" data-og-width="16" width="16" data-og-height="16" height="16" data-path="images/icons/resources.svg" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/resources.svg?w=280&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=be5c6b9f8fe4d8216da9400726da2db2 280w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/resources.svg?w=560&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5db0d5ead12c8b689a6f66292fc2fd0d 560w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/resources.svg?w=840&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=5bf121527bb3672e56e49593c9877991 840w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/resources.svg?w=1100&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=f3eabb8fdf7bf05967941e98da4ad55a 1100w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/resources.svg?w=1650&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=105bb239cd97cba6ae4c2955d6da596c 1650w, https://mintcdn.com/replit/7jcTEkTXPQwUz2BL/images/icons/resources.svg?w=2500&fit=max&auto=format&n=7jcTEkTXPQwUz2BL&q=85&s=be617b5dfd58940c90b6bb5fb2150233 2500w" /> resources icon located next to your app's name to toggle the panel.
  2. Hover over the **Compute** or **Storage** line items for more detail.
</Accordion>

The following screenshot shows the resources panel:

## Tools

To learn more about other Replit workspace tools, select from the following list:

<CardGroup cols={3}>
  <Card title="Secrets" icon="key" iconType="solid" href="/replit-workspace/workspace-features/secrets" horizontal={true}>
    Safeguard your app's API keys, credentials, and passwords.
  </Card>

<Card title="File History" icon="clock-rotate-left" iconType="solid" href="/replit-workspace/workspace-features/file-history" horizontal={true}>
    Rewind time to recover lost edits with Replit's version tracking feature.
  </Card>

<Card title="Multiplayer" icon="users" iconType="solid" href="/replit-workspace/workspace-features/multiplayer" horizontal={true}>
    Code together in real-time with two or more users.
  </Card>

<Card title="User Settings" icon="gear" iconType="solid" href="/replit-workspace/workspace-features/user-settings" horizontal={true}>
    Customize your coding experience through the Settings tool.
  </Card>

<Card title="Console" icon="terminal" iconType="solid" href="/replit-workspace/workspace-features/console" horizontal={true}>
    View your Replit App's output
  </Card>

<Card title="Shell" icon="terminal" iconType="solid" href="/replit-workspace/workspace-features/shell" horizontal={true}>
    Interact with your workspace using a command-line interface.
  </Card>

<Card title="Preview" icon="laptop" iconType="solid" href="/replit-workspace/workspace-features/preview" horizontal={true}>
    Preview and debug your web application.
  </Card>
</CardGroup>

{name}

Aloha, Replit! ${randomEmoji}

Hello!

Import Spreadsheet

Welcome to Google Sheet Importer