# Add a Replit Badge to your app Source: https://docs.replit.com/additional-resources/add-a-made-with-replit-badge-to-your-app Add, customize, and embed a Replit Badge in your Replit App to showcase your project and link back to your cover page. The Replit Badge allows you to showcase that you built your app on Replit. When added to your Replit App, it links back to your App's cover page so visitors can learn more about your creations. ## Features The Replit Badge enhances your app with official Replit branding while providing easy navigation back to your project. * **Simple integration**: Add the badge to any app with a single line of code * **Customizable appearance**: Choose from multiple themes and positions * **Flexible implementation**: Use the script tag or custom HTML/CSS options * **Markdown support**: Embed badges in your GitHub repository and other Markdown files ## Usage ### Adding the badge You can add a Badge to any Replit App with an index page. Websites created with the official HTML template have this Badge added by default. 1. **Locate your index.html file**\ Go to your Replit App's file browser and find `index.html` File browser showing index.html file 2. **Add the badge script**\ Add the following code before the closing `` tag: ```html theme={null} ``` HTML code example showing badge script ### Testing your badge 1. **Run your app**\ Run your Replit App, then select **Open in a new tab** Open in a new tab button 2. **View the badge**\ Your Badge should appear in the lower right corner. This is what visitors to your page will see. Badge Preview 3. **Test the link**\ Select your Badge to verify it links back to the Replit App's cover page ### Customizing your badge You can change the color of your Badge by modifying the `theme` attribute with any of these colors: dark, light, red, orange, yellow, lime, green, teal, blue, blurple, purple, magenta, or pink. ```html theme={null} ``` You can change the position of your Badge by modifying the `position` attribute with one of these values: `top-left`, `top-right`, `bottom-left`, or `bottom-right`. ```html theme={null} ``` If the position isn't changing, check the browser console for more information—you may have specified an invalid position. If the Badge was added by default and you want to remove it, delete the script from `index.html`: ```html theme={null} ``` ### Advanced options If the default configurations don't meet your needs, you can create custom badges with standard HTML and CSS. Badges are hosted on `https://replit.com/badge`, allowing you to embed them as images and further style them with CSS. ```html theme={null} Replit Badge ``` You can also use additional options not available in the script: **Custom caption** (maximum 30 characters): ``` https://replit.com/badge?caption=Amazing%20Badges ``` ![Amazing Replit Badge](https://replit.com/badge?caption=Amazing%20Badges) **Smaller variant**: ``` https://replit.com/badge?caption=Amazing%20Badges&variant=small ``` ![Amazing small Replit Badge](https://replit.com/badge?caption=Amazing%20Badges\&variant=small) You can showcase your Replit Badge by embedding it in your repository README. This Markdown snippet combines a link and image to redirect users to your Replit App: ``` [![Try with Replit Badge](https://replit.com/badge?caption=Try%20with%20Replit)](https://replit.com/) ``` Try selecting this: [![Try with Replit Badge](https://replit.com/badge?caption=Try%20with%20Replit)](https://replit.com/) Share your feedback about this feature in the Community! # Earning with Replit Bounties Source: https://docs.replit.com/additional-resources/bounties/bounty-hunting Bounties on Replit allow you to request and pay for coding tasks or project work using a platform-specific currency called Cycles. When you have a specific need—such as developing a new product, needing coding help for a personal project, or requiring API integration—you can create a Bounty. This acts as a job posting that other members, known as Bounty Hunters, can accept to complete the specified task. The Bounties program is deprecated. Replit is no longer accepting applications for Bounty Hunter. If you're interested in building projects and earning Cycles while doing it, you're in for a treat with Bounties. ## Browse Bounties Each posted Bounty includes a reward in Cycles for successful completion and a description of the work they need. Pick a Bounty ## Apply to work on a Bounty Once you find a Bounty you're interested in, select the "Apply to Work" button in the upper-right corner. ### Tips for Applying The best Bounty applications explain to the Poster why you're a good fit for the job and include examples of your past work. Here are some additional tips for creating a quality application: Here are some other tips on how to create a quality application: * Add links to your GitHub, LinkedIn, Twitter, or other social profiles to your Replit account. These links will also appear in your Bounty applications. * Consider using a professional headshot as your Replit profile picture. * If you'd like to start your Bounty application with a greeting, you can say something like `Hello [username]...` or `Hello, my name is [your first name]...` * Include links to relevant projects in your application, such as a Replit App, GitHub repo, or hosted project. * Describe the initial 1-2 milestones you plan to accomplish once accepted. This shows the Bounty Poster that you understand their problem and the technical requirements. * If possible, provide time estimates for completing certain parts of the Bounty after you're accepted. Here's an example application for a Bounty to create a space invaders game: Apply a Bounty ## Do the work If the Bounty Poster selects your application, you'll see the "Accepted" badge on your application: Time to Do the Work! Now it's time to do the work! Communicate with the Bounty Poster early and often - make sure you're both clear on requirements and expectations. ## Deliver the work When you've completed your work, return to the Bounty page and select "Submit Work." Add a description of the work (pro-tip: relate it to the acceptance criteria outlined in the Bounty) and link to the Replit App where you've written the code. Submit a Solution The Poster will review your work and may request changes. If these changes are within the scope of the original Bounty, simply make the updates in the Replit App and submit again. Once the Poster accepts your work, you're awarded your well-earned Cycles. # Bounty Templates Source: https://docs.replit.com/additional-resources/bounties/bounty-templates Learn how to communicate effectively during bounty projects with templates for both bounty hunters and posters to use throughout the process. ## Communication Expectations Effective communication is vital throughout the bounty posting and hunting process. To help with this, we've provided templates that you can use to maintain professionalism and ensure everyone's expectations align. Keep in mind that these templates are starting points and can be adjusted to suit your specific needs. ## Bounty Hunter ### Upon Acceptance After accepting a bounty, it's important to reach out to the Poster within 24 hours via email or Discord. ``` Hello there, I'm very excited to begin working on this Bounty. I am located in . I usually work between the hours of and the best way to reach me is by email. I just wanted to take a moment to check in and outline my approach. - - - - Please let me know if you have any questions. I look forward to working with you. Best, Your Name ``` ### Check-ins To ensure a smooth and successful Bounty experience, it is important to maintain regular communication with the Bounty Poster. This includes providing updates on progress every few days, as well as addressing any roadblocks, pain points, or questions that may arise. Lack of visibility into the progress of the project is a common cause of dissatisfaction among Bounty Posters. Keeping them informed will help to mitigate this issue and maintain a positive working relationship. #### What to say when giving a status update: ``` I wanted to check-in and give you an update on my progress. Everything is going well, and I am still on target to meet by . Please reach out if you have any questions or need further information about this Bounty. ``` #### What to say when you need to change the timeline: ``` I wanted to give you an update on my timeline. has taken longer than I expected due to reasons. I have been able to determine next steps, but wanted to let you know my date has changed to . I have solved any current roadblocks and am on track to complete the Bounty. ``` ### Upon Submission Congratulations on successfully completing the Bounty! It is now important to promptly follow up with the bounty poster to allow them to review the completed work. This will provide an opportunity for them to provide feedback or request any necessary changes. Following up quickly will help ensure a smooth process and timely completion of the project. ``` Hi there, I have submitted the completed Bounty at . Please let me know if you request changes or have any questions about the submission. It has been a pleasure working with you. ``` ### Changes are Requested If the Bounty Poster requests any changes, it is important to respond within 24 hours to acknowledge receipt of their feedback. During this response, it is crucial to discuss a plan for the next steps and a timeline for implementing the suggested updates. It is important to approach any requested changes in a constructive manner. To assist with this process, the following are the two templates you can personalize Example: ``` Thank you for . I value your feedback as it helps me become a better Bounty Hunter. I will have a revised version of this project ready for you to review by . One solution to the input you mentioned is . Does this sound like an ideal solution for your Bounty? If so, I can have an updated version for you by . ``` Example: ``` I know you are concerned about . Including may be an ideal solution. I am open to revisions and willing to make changes to improve the quality of your work. If this solution works for you, I can get you an updated version by . ``` ## Poster ### Upon Acceptance Once you accept a Bounty Hunter for your Bounty, you should reach out to them within 24 hours via email or Discord. Feel free to use this template if you are not sure how to start. ``` Hi , I am excited to work with you on this Bounty. You seem like a great fit for this project. Here is a little bit about me . I would like to chat with you soon to review requirements and set milestones. Please let me know if you have any questions about the Bounty as you get started. ``` ### Check-ins Open and consistent communication with the Bounty Hunter is crucial, especially if the project is complex or has multiple milestones. This will help ensure that the project stays on track and is completed within the agreed-upon timeframe. Here are a few examples of what you can say to stay in touch with your Bounty Hunter: ``` Hi, I wanted to check in and see how the Bounty was going. Do you have any questions about the requirements? I am happy to chat if you need further guidance. ``` ``` Hello, How is the Bounty going? Do you think you are still on track to complete it by ? Do you have any part of it completed that you can send to me as a sample? Please let me know if you have any questions. ``` ### Upon Submission Once your Bounty Hunter submits the Bounty, we recommend you review the submission within three days. If you’re happy with the submission, feel free to press the `Accept` button to complete the Bounty and release the Cycles to the Bounty Hunter. Send them a thank you or acknowledgment that the work has been received and the Cycles released. ``` Hi, Just received your submission. It looks great. Thank you for all your hard work on this. ``` ### Changes Requested You can request changes on your Bounty's Discussion tab. It is important that the changes you request are within the scope of the original project. Give clear expectations of what needs to be changed and ensure the Bounty Hunter has the correct resources or access to test projects if needed. ``` Hello, Thanks for your submission! Would you be up for changing the following: . ``` # Frequently Asked Questions (FAQ) Source: https://docs.replit.com/additional-resources/bounties/faq Learn how to post and complete Bounties on Replit, including pricing guidelines, payment processes, and best practices for both Bounty Posters and Hunters. export const Cost800kCycles = '$8,000'; export const Cost700kCycles = '$7,000'; export const Cost650kCycles = '$6,500'; export const Cost450kCycles = '$4,500'; export const Cost350kCycles = '$3,500'; export const Cost250kCycles = '$2,500'; export const Cost35kCycles = '$350'; The Bounties program is deprecated. Replit is no longer accepting applications for Bounty Hunter. Bounties are a simple way to trade Cycles for different types of tasks on Replit. If you have a new product idea, need coding assistance for a personal project, or want to integrate an API, create a Bounty! You'll be able to examine submissions and pick a developer, known as a Bounty Hunter, to complete the project, which is referred to as the "work." When you post a Bounty, Replit will deduct the required Cycles from your account and hold them until the project is finished. You can publicly post a Bounty on the [Bounties page](https://replit.com/bounties). You will be asked to provide a title, description, and reward amount before posting. Your user account will also need enough Cycles to cover the reward amount before posting; you can reload Cycles [here](https://replit.com/cycles). Anything you can think of or need for your own project. Some of the more popular Bounties we’ve seen are internal tools for your startup, features for existing Replit App (like chat moderation or API integration), websites, and bots (Discord, Slack, Telegram). Keep it simple and descriptive! The name should highlight what is distinctive about that particular Bounty. Try to think about what will catch a Bounty Hunter’s eye. We offer suggestions within the Bounty creation form for certain categories, but ultimately, you decide based on your budget and the caliber of developer you want to work with.
  • {Cost250kCycles} (250,000 Cycles) - {Cost350kCycles} (350,000 Cycles) if your app needs:
    • 1 external connection / API
    • 1-2 pages
    • completion in 4-6 weeks
  • {Cost450kCycles} (450,000 Cycles) - {Cost650kCycles} (650,000 Cycles) if your app needs:
    • 2-3 API connections
    • 2-3 pages
    • a developer with 2+ years of experience
    • user account creation
    • ideal for 2-3 month projects
  • {Cost800kCycles} (800,000+ Cycles) if your app needs:
    • unlimited API connections
    • 3+ pages
    • the ability to handle your first 1000+ users
    • ideal for 3+ month projects
If you can't put the full amount upfront for a large Bounty, indicate in your initial post the payment milestones that will be posted through other Bounties. Yes, Replit charges the Bounty Poster a 10% fee for posting a Bounty. Also, note that Replit will hold the entire number of cycles you’ve promised for the Bounty from your account when posting a Bounty. No, you can only cancel a Bounty *before* accepting an application. To cancel an accepted application for a Bounty, contact the Replit team through the "Contact Support" button in the "Having trouble?" section. If you want to make changes to the accepted Bounty, it's best to discuss the proposed revisions directly with the Bounty Hunter. If you want to become a verified Bounty Hunter, you can apply [here](https://replit.com/bounties/join). However, being a verified Bounty Hunter is not required to apply for Bounties. Replit’s Bounty program is looking for experienced coders who can tackle Bounties and provide great customer service for Bounty Posters. Replit provides access to private Replit App for coding the work, which is Replit’s recommended workspace for completing a Bounty. The completed work must be submitted on Replit with a valid Replit App link. No. Upon successful completion of the Bounty, the Bounty Hunter’s account will be credited with the full Bounty amount listed. Yes. Cycles earned from Bounties are eligible for cash out. There is a minimum threshold of 35,000 Cycles (about {Cost350kCycles} USD) per cash out. There is a 25% cash-out fee and additional fees based on your country of residence and chosen payment method. If you cash out more than 70,000 Cycles (about {Cost700kCycles} USD) in a given request, then the cash-out fee is reduced to 15%. Please note, a Replit staff member will **never** reach out to you in order to initiate a cash out. Only you can begin the process yourself following the instructions below. Once you have earned at least 35,000 Cycles ({Cost350kCycles} USD) from Bounties, you can contact [cashout@replit.com](mailto:cashout@replit.com) with the subject line "Cycles Cash Out - username", replacing "username" with your Replit username. In the body of your email, write the number of Cycles that you wish to cash out. If this is your first cash out, we will send you an online form to verify your identity on [Persona](https://withpersona.com/). You will need a valid government ID and a device with a camera to complete this verification. After that, you will need to verify your payment information by completing the cash-out form on Replit's site [here](https://replit.com/cash-out). Once you have verified your identity and payment information on your Replit account, we will withdraw the requested amount of Cycles from your wallet and execute the payment. If you no longer have a payable balance of Cycles equivalent to the amount you requested, we will cancel the payment and ask you for a new desired amount to withdraw. No, when the work is provided, contents in the `secrets` sidebar is not included. If the intent is to provide that information to the Poster, the parties should discuss how they would like to transfer that information. All rights to the work are transferred from the Bounty Hunter to the Bounty Poster upon successful completion of the Bounty and Cycles are exchanged. By submitting a work for acceptance, the Bounty Hunter represents that they have all necessary rights in the content of the work to transfer to the Poster, as specified in our [terms](https://replit.com/site/cycles-terms). When accepting a Bounty, it's very important to set expectations around timelines and communication cadence with the Bounty Poster in one of your first exchanges. Some Posters would like an email or message check-in every week, and some prefer daily check-ins. Some Posters use the Bounties platform for critical time-sensitive work, and in this case, it's very important to set expectations for whether or not their intended deadline is possible. When a Hunter does not respond in a timely manner, it often causes harm to the Poster's project. Repeated failure to set and meet communication expectations with Bounty Posters may lead to suspension of your Bounty Hunter account. We understand that sometimes there are uncontrollable circumstances that cause a Hunter not to respond in a timely manner. If that is the case, we request you let us know by emailing [bounties@replit.com](mailto:bounties@replit.com). If you are unable to complete a Bounty, please email [bounties@replit.com](mailto:bounties@replit.com) along with any mitigating circumstances so that we can assist you. Please note that if this happens more than once, you may be suspended from the Bounties platform. We recommend that you don’t work on more than two Bounties at a given time. This is to prevent yourself from burning out by taking on too many Bounties simultaneously. This also enables you to give focused attention to a few clients at a given time. If you have questions for the Bounty Poster, you can include them in the application form or reach out through any social media platforms linked in the user’s profile. The Poster will indicate a preferred communication channel (such as email or Discord) in the Bounty post for discussions throughout the project. If you are unable to contact the Poster or Bounty Hunter and need assistance with a Bounty, you can reach out to the Moderator via the “Contact Support” button under the “Having trouble?” section of the Bounties page. We encourage our Bounty Posters and Bounty Hunters to try and settle conflicts among themselves. If for any reason this fails, or if you encounter non-permitted usage, users can contact the Moderator via the “Contact Support” button under the “Having trouble?” section of the Bounties page. All decisions by Replit in case of a dispute are final and binding on both the Hunter and Poster. # Resources for Bounty Hunters Source: https://docs.replit.com/additional-resources/bounties/hunter-resources Find templates, portfolio tips, and tutorials to help you succeed as a Replit bounty hunter. Learn how to showcase your work and build your skills. ## Templates Need some boilerplate code? Use these templates to get started on your next Bounty: * [Bots](https://replit.com/templates/bots) * [Graphics](https://replit.com/templates/graphics) * [Websites](https://replit.com/templates/websites) * [AI](https://replit.com/templates?q=AI) ## Replit Profile Tips Bounties Profile Use [this template](https://replit.com/@replit/Portfolio-Site-Template?v=1#ReadMe.md) to create a portfolio of work to pin to your profile. Add links to previous work, Github profile, Discord, etc. in your profile that are relevant and up to date. Make sure the Replit Apps on your profile are a good representation of your skills. Don't include partial pieces of work on your profile page (hide those in a folder or use Private Replit Apps). The Replit-generated names like PuzzlingPriceyKey are cool and all, but make sure the Replit Apps on your profile have sensible names and are published with nice cover photos. ## Build your Portfolio Use these tutorials and projects as inspiration to add to your portfolio: * [Intro to JS](https://replit.com/learn#:~:text=This%20tutorial-,covers,-the%20basics%20of): Understand the basics of JS * [Socket.IO](https://replit.com/learn#:~:text=Socket.IO-,Tutorial,-Learn%20how%20to): build a multi-player app * [Intro to Bash](https://replit.com/learn#:~:text=Intro%20to-,Bash,-Bash%20is%20one): learn how to read and print files, create games, and run program files as scripts * [Chatbot](https://replit.com/@QwertyQwerty54/Chatbot?v=1): browse the code used to make a chatbot with Python * [AI Basics with Hangman](https://replit.com/@WyattGeorge/AI-Hangman?v=1): create your own version and add it to your portfolio to showcase your AI skills Check out the [Bounty Hunter Feature Tutorial](https://replit.com/@replit/Bounty-Hunters-Tutorial) to learn more. ; }; 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. **New with Agent 3** - Extended autonomous builds with minimal supervision, App Testing for self-validation, two ways to start an app (design-first vs. full app first), and Agents & Automations for building your own autonomous systems. ## 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 how to start**: Try "Design & Iterate" for rapid prototyping or "Build Full App" to get a functional MVP on the first run 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 Agent and Advanced Assistant are premium features that charge your Replit account based on usage. For pricing information and billing policies, see [Replit AI Billing](/billing/ai-billing/). ### 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 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. ### 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: Agent creating an app from a text description ### 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: Experience Agent 3's autonomous development with extended builds and less supervision Understand costs and set up billing controls Build your first autonomous AI-powered app in minutes # Replit Apps Source: https://docs.replit.com/category/replit-apps Replit Apps help you transform your ideas into apps anyone can access, anywhere. 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 ; }; 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 and Assistant 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. **Replit App** is the new product name for **Repl**. To learn more about the renaming, see Repls are now Replit Apps . ## Getting started 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) To open a Replit App, log into Replit and open it in your workspace using one of the following methods. 1. Select plus icon **Create App**. You should see the following screen: Create a new App tabs 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. To access a Replit App you created previously, select folder icon **Apps** from the left sidebar. ## 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 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. 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. Storage limits include all data stored by your app, including installed packages and dependencies. | 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}
Core: {CoreWorkspaceStorage}
Teams: {TeamsWorkspaceStorage}
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
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
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
Included with all plans | For detailed pricing and usage-based billing information, see the [Billing documentation](/category/billing/) and [Storage and Databases overview](/category/storage-and-databases/). ## 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. screenshot of a template description ### Create and test APIs Build an API with RESTful endpoints and use workspace tools to test them before going live. screenshot of code from an API and the API Request Tester ## 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 # Replit Core Source: https://docs.replit.com/category/replit-core Learn about Replit Core membership features and benefits to enhance your development experience with advanced tools and capabilities. Replit Core is the membership to unlock the full Replit experience. # Overview Source: https://docs.replit.com/category/replit-deployments Share your Replit Apps with the world in just a few clicks. 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 ; }; Publishing lets you share your Replit App with the world using a simplified process. The action of making your app live is called "Publishing." This page describes the different types of deployments available. ## 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. Replit's infrastructure is backed by Google Cloud Platform (GCP). All published apps are hosted in the United States. Publishing includes tools to monitor your published app status and view web analytics. Replit offers the following deployment types: Automatically adjusts resources based on your app's usage. Provides an affordable way to host websites that don't change based on user input. Provides a consistent amount of computing resources for your app to run continuously. Runs your app at scheduled times that you choose. ## Getting started Follow the steps below to publish your Replit App: 1. From your Replit App workspace, select Publish icon **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. ## 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. 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. ## 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 # Overview Source: https://docs.replit.com/category/replit-workspace 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 * 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 All tools icon **All tools** in the dock on the left. * Select the magnifying glass icon magnifying glass at the top to open the search tool, then scroll to the "Tools" section. ### 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, [Agent](/replitai/agent/) and [Assistant](/replitai/assistant/), 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. image displaying a full-stack Replit App ### 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. image displaying the Replit App sharing function in the info dialog ## 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) # Storage and Databases Source: https://docs.replit.com/category/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: Ideal for structured data and representing data relationships. Backed by a fully-managed PostgresSQL database that scales with your app. 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. ## Getting started The quickest way to get started with Replit's storage solutions is to follow one of the tutorials below: Connect your app to a SQL database Manage App Storage using the Replit Python SDK Manage App Storage using the Replit JavaScript SDK ## 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. screenshot of an E-commerce app ### 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. screenshot of a file sharing app ## 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 # Replit Teams and Enterprise Source: https://docs.replit.com/category/teams Have your team build production-ready customer apps and business tools faster with Replit. export const TeamsCredits = '$40'; {TeamsCredits} per user per month for collaborative development Custom pricing with advanced security and compliance features 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: SOC-2 compliant platform with SAML SSO, Role-Based Access Control, and advanced security features. Manage teams, billing, and resources from a central dashboard. Monitor usage and control costs effectively. * **SSO & Identity Management**: Single Sign-On with SAML and SCIM integration for easier provisioning and enhanced security * **Advanced Security Controls**: SCIM Groups for data segmentation and granular access control * **Custom Pricing & Solutions**: Tailored pricing plans with flexible publishing options and enterprise-specific integrations * **Dedicated Support**: Priority access to technical assistance and account management * **Advanced Privacy Controls**: Enhanced admin controls and privacy settings ## Essential resources Learn more about Teams and Enterprise with comprehensive documentation: Comprehensive guide to user management, permissions, and SSO integration Detailed information about our security features and compliance standards 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 Ready to transform your team's development workflow? [Contact our sales team](https://replit.com/teams) for a personalized demo and enterprise pricing information. # Workspace Features Source: https://docs.replit.com/category/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 |
  • Can be organized across multiple screens
|
  • Organizing your workspace across multiple screens
  • Work on different projects simultaneously
| | **Panes** | Sections of a window that contain one or more tabs |
  • Support horizontal and vertical splitting
  • Can be resized and rearranged
  • Can be converted to a floating pane within the window
|
  • View code and preview side-by-side
  • Create custom layouts for different development tasks
| | **Tabs** | Contain exactly one workspace tool, such as the file editor, Preview, or Agent |
  • Can be moved between panes and reordered within them
  • Can switch between different files or tools with a single click
|
  • Open different tools or files when you need them
| The following video identifies each workspace layout element: ; }; 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 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 magnifying glass icon magnifying glass at the top 2. Type "Key-Value" to locate the tool ### Importing the database ```python importing.py theme={null} from replit import db ``` ```javascript importing.js theme={null} const Database = require("@replit/database"); const db = new Database(); ``` 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`. ## 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: ```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"); }); ``` #### Storing different data types ```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(); ``` Use 2D arrays/lists to create table-like structures: ```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); }); }); }); ``` ### Reading data Retrieve data by referencing the key: ```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(); ``` For safer access that won't raise an error if the key doesn't exist: ```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(); ``` ### Listing and searching keys Access all keys in the database: ```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(); ``` Find keys with a specific prefix: ```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(); ``` ### Updating data Update stored values by assigning new values to existing keys: ```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(); ``` Perform operations on stored values: ```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(); ``` ### Deleting data Remove key-value pairs: ```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(); ``` ### Complete example Here's a complete example of using the Key-Value Store for a simple task list: ```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(); ``` ## 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? 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 ### 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) ```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) } ``` ### 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: **Set a key-value pair:** ```bash theme={null} curl $REPLIT_DB_URL -d '=' ``` **Alternative set method (for safe characters):** ```bash theme={null} curl -XPOST $REPLIT_DB_URL/= ``` **Get a value:** ```bash theme={null} curl $REPLIT_DB_URL/ ``` **Delete a key:** ```bash theme={null} curl -XDELETE $REPLIT_DB_URL/ ``` **List keys with a prefix:** ```bash theme={null} curl "$REPLIT_DB_URL?prefix=" ``` ### 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. `REPLIT_DB_URL` provides full access to your database. Never expose it publicly or share it with untrusted parties. ```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); ``` **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. ### What are the storage limits? 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 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? 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 ### 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? 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) ## 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 # Database Source: https://docs.replit.com/cloud-services/storage-and-databases/sql-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. 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 ; }; Replit Database uses a fully-managed SQL database that lets you add persistent data storage to your Replit App from the Workspace. 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. screenshot of the database editor ## 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 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. ## 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. From the left **Tool dock**: 1. Select All tools icon **All tools** to see a list of workspace tools. 2. Select PostgresSQL database icon **Database**. From the **Search bar**: 1. Select the magnifying glass icon magnifying glass at the top to open the search tool 2. Type "Replit Database" to locate the tool and select it from the results. ### Add a database All Replit Apps come with a database by default. You can access it by selecting the PostgresSQL database icon **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** or **Assistant**. Checkpoint rollback interface showing rollback options 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. ### Run database commands The SQL runner is a Workspace tool that lets you run SQL commands on your database and view the results. From the **Replit Database** tool: 1. Select the **My Data** tab 2. Select SQL runner icon **SQL runner** To run a query, enter the SQL statement in the text area and select the adjacent sql run icon run button as shown below: screenshot of the SQL runner and run button ### Browse and modify data visually The Replit Database tool includes Drizzle Studio, 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: image of the table structure editor You can connect to your database using any PostgresSQL-compatible SQL client using the connection string found in your [environment variables](#environment-variables). ### 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. 1. Navigate to the PostgresSQL database icon **Replit Database** tool in your workspace 2. Select either the Development or Production database 3. Select the gear icon **Settings** tab (the gear icon). This tab shows the connection credentials and storage usage for your database. #### 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/). 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. 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. ### 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 Neon. 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). 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. 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. | # auth API Source: https://docs.replit.com/extensions/api/auth Learn how to authenticate users securely in your Replit extensions using the auth API module. Get and verify JWT tokens for user authentication. # auth API experimental The `auth` api module allows you to securely authenticate a Replit user if they use your extension. ## Usage ```ts theme={null} import { experimental } from '@replit/extensions'; const { auth } = experimental; ``` ## Methods ### `auth.getAuthToken` Returns a unique JWT token that can be used to verify that an extension has been loaded on Replit by a particular user ```ts theme={null} getAuthToken(): Promise ``` ### `auth.verifyAuthToken` Verifies a provided JWT token and returns the decoded token. ```ts theme={null} verifyAuthToken(token: string): Promise<{ payload: any, protectedHeader: any }> ``` ### `auth.authenticate` Performs authentication and returns the user and installation information ```ts theme={null} authenticate(): Promise ``` ## Types ### AuthenticatedUser | Property | Type | | -------- | -------- | | id | `number` | ### AuthenticateResult | Property | Type | | ------------ | ----------------------------------------- | | installation | `AuthenticatedInstallation` | | user | [`AuthenticatedUser`](#authenticateduser) | # Background Script API Source: https://docs.replit.com/extensions/api/background Learn how to use background scripts to run persistent code in your Replit extension from startup until the workspace closes. Background scripts are loaded when the Replit App opens. They remain permanently loaded until the extension is uninstalled or you close the workspace. Background scripts are written in a "background page", which is an "invisible" iFrame context that renders no UI. You can add a background page to your extension by adding the following field to your [Manifest](/extensions/api/manifest) file: ```json theme={null} { "background": { "page": "/path/to/background.html" } } ``` The path points to a page in your extension bundle. We load it as an invisible iframe element; if you render any UI elements, they will not be visible to users. (To render UI, you want to create tools instead). Here's an example extension that makes use of the background script: # commands API Source: https://docs.replit.com/extensions/api/commands Register and manage custom commands for the Replit command bar and other extension points using the commands API module. The `commands` api module allows you to register commands that can be run from the CLUI command bar and other contribution points. ## Usage ```ts theme={null} import { commands } from '@replit/extensions'; ``` ## Methods ### `commands.add` Adds a command to the command system. ```ts theme={null} add(__namedParameters: AddCommandArgs): void ``` ## Types ### ActionCommandArgs ```ts theme={null} undefined ``` ### BaseCommandArgs ```ts theme={null} undefined ``` ### CommandArgs ```ts theme={null} ActionCommandArgs | ContextCommandArgs ``` ### CommandFnArgs ```ts theme={null} undefined ``` ### CommandProxy ```ts theme={null} | ``` ### CommandsFn ```ts theme={null} (args: CommandFnArgs) => Promise ``` ### ContextCommandArgs ```ts theme={null} undefined ``` ### CreateCommand ```ts theme={null} (args: CommandFnArgs) => undefined ``` ### Run ```ts theme={null} () => any ``` ### SerializableValue ```ts theme={null} string | number | boolean | | undefined | | ``` # data API Source: https://docs.replit.com/extensions/api/data Access Replit's GraphQL API to retrieve user information, Replit App metadata, and other platform data through the Extensions API. The data API allows you to get information and metadata exposed from Replit's GraphQL API. ## Usage ```ts theme={null} import { data } from '@replit/extensions'; ``` ## Methods ### `data.currentUser` Fetches the current user via graphql ```ts theme={null} currentUser(args: CurrentUserDataInclusion): Promise<{ user: CurrentUser }> ``` ### `data.userById` Fetches a user by their id via graphql ```ts theme={null} userById(args: { id: number } & UserDataInclusion): Promise<{ user: User }> ``` ### `data.userByUsername` Fetches a user by their username via graphql ```ts theme={null} userByUsername(args: { username: string } & UserDataInclusion): Promise<{ userByUsername: User }> ``` ### `data.currentRepl` Fetches the current Replit App via graphql ```ts theme={null} currentRepl(args: ReplDataInclusion): Promise<{ repl: Repl }> ``` ### `data.replById` Fetches a Replit App by its ID via graphql ```ts theme={null} replById(args: { id: string } & ReplDataInclusion): Promise<{ repl: Repl }> ``` ### `data.replByUrl` Fetches a Replit App by its URL using GraphQL ```ts theme={null} replByUrl(args: { url: string } & ReplDataInclusion): Promise<{ repl: Repl }> ``` ## Types ### CurrentUser Extended values for the current user | Property | Type | | -------------- | ----------------------------- | | bio? | `string` | | displayName? | `string` | | firstName? | `string` | | followCount? | `number` | | followerCount? | `number` | | fullName? | `string` | | id | `number` | | image | `string` | | isUserHacker? | `boolean` | | isUserPro? | `boolean` | | lastName? | `string` | | roles? | [`UserRole[]`](#userrole) | | socials? | [`UserSocial[]`](#usersocial) | | url? | `string` | | username | `string` | ### CurrentUserDataInclusion Options for the currentUser query | Property | Type | | ------------------ | --------- | | includePlan? | `boolean` | | includeRoles? | `boolean` | | includeSocialData? | `boolean` | ### EditorPreferences Editor Preferences | Property | Type | | ---------------------- | --------- | | \_\_typename | `string` | | codeIntelligence | `boolean` | | codeSuggestion | `boolean` | | fontSize | `number` | | indentIsSpaces | `boolean` | | indentSize | `number` | | keyboardHandler | `string` | | minimapDisplay | `string` | | multiselectModifierKey | `string` | | wrapping | `boolean` | ### Replit App A Replit App | Property | Type | | ---------------- | ------------------------------------------------- | | commentCount? | `number` | | comments? | [`ReplCommentConnection`](#replcommentconnection) | | description | `string` | | iconUrl? | `string` | | id | `string` | | imageUrl? | `string` | | isPrivate | `boolean` | | likeCount? | `number` | | multiplayers? | [`User[]`](#user) | | owner? | [`ReplOwner`](#replowner) | | publicForkCount? | `number` | | runCount? | `number` | | slug | `string` | | tags? | [`Tag[]`](#tag) | | timeCreated | `string` | | title | `string` | | url | `string` | ### ReplComment A Replit App Comment | Property | Type | | -------- | --------------- | | body | `string` | | id | `number` | | user | [`User`](#user) | ### ReplCommentConnection An array of ReplComments as items | Property | Type | | -------- | ------------------------------- | | items | [`ReplComment[]`](#replcomment) | ### ReplDataInclusion Options for replit app queries | Property | Type | | -------------------- | --------- | | includeComments? | `boolean` | | includeMultiplayers? | `boolean` | | includeOwner? | `boolean` | | includeSocialData? | `boolean` | ### ReplOwner A Replit App Owner, can be either a User or a Team | Property | Type | | ------------ | -------- | | \_\_typename | `string` | | description? | `string` | | id | `number` | | image | `string` | | username | `string` | ### Tag A Replit App tag | Property | Type | | ---------- | --------- | | id | `string` | | isOfficial | `boolean` | ### User A Replit user | Property | Type | | -------------- | ----------------------------- | | bio? | `string` | | displayName? | `string` | | firstName? | `string` | | followCount? | `number` | | followerCount? | `number` | | fullName? | `string` | | id | `number` | | image | `string` | | isUserHacker? | `boolean` | | isUserPro? | `boolean` | | lastName? | `string` | | roles? | [`UserRole[]`](#userrole) | | socials? | [`UserSocial[]`](#usersocial) | | url? | `string` | | username | `string` | ### UserDataInclusion Options for user queries | Property | Type | | ------------------ | --------- | | includePlan? | `boolean` | | includeRoles? | `boolean` | | includeSocialData? | `boolean` | ### UserRole A user role | Property | Type | | -------- | -------- | | id | `number` | | key | `string` | | name | `string` | | tagline | `string` | ### UserSocial A user social media link | Property | Type | | -------- | ----------------------------------- | | id | `number` | | type | [`UserSocialType`](#usersocialtype) | | url | `string` | ### UserSocialType An enumerated type of social media links | Property | Type | | -------- | ---- | ### UserSocialType An enumerated type of social media links ```ts theme={null} discord = 'discord' facebook = 'facebook' github = 'github' linkedin = 'linkedin' twitch = 'twitch' twitter = 'twitter' website = 'website' youtube = 'youtube' ``` ### CurrentUserQueryOutput A graphql response for the currentUser query ```ts theme={null} GraphResponse<{ user: CurrentUser; }> ``` ### GraphResponse\<`T`> A graphql response ```ts theme={null} Promise ``` ### ReplQueryOutput A graphql response for the repl query ```ts theme={null} GraphResponse<{ repl: Repl; }> ``` ### UserByUsernameQueryOutput A graphql response for the userByUsername query ```ts theme={null} GraphResponse<{ userByUsername: User; }> ``` ### UserQueryOutput A graphql response for the user query ```ts theme={null} GraphResponse<{ user: User; }> ``` # debug API Source: https://docs.replit.com/extensions/api/debug Learn how to use the debug API module to log data, warnings, and errors to the Extension Devtools in Replit extensions. The `debug` api module allows you to log data to the Extension Devtools ## Usage ```ts theme={null} import { debug } from '@replit/extensions'; ``` ## Methods ### `debug.info` Logs information to the Extension Devtools ```ts theme={null} info(message: string, data: Data): Promise ``` ### `debug.warn` Logs a warning to the extension devtools ```ts theme={null} warn(message: string, data: Data): Promise ``` ### `debug.error` Logs an error message to the extension devtools ```ts theme={null} error(message: string, data: Data): Promise ``` ### `debug.log` Logs information to the Extension Devtools ```ts theme={null} log(message: string, data: Data): Promise ``` # editor API Source: https://docs.replit.com/extensions/api/editor Access and manage editor preferences in Replit Apps using the editor API module. Get settings like font size, indentation, and code intelligence. The `editor` api module allows you to get the current user's editor preferences. ## Usage ```ts theme={null} import { experimental } from '@replit/extensions'; const { editor } = experimental; ``` ## Methods ### `editor.getPreferences` Returns the current user's editor preferences. ```ts theme={null} getPreferences(): Promise ``` ## Types ### EditorPreferences Editor Preferences | Property | Type | | ---------------------- | --------- | | \_\_typename | `string` | | codeIntelligence | `boolean` | | codeSuggestion | `boolean` | | fontSize | `number` | | indentIsSpaces | `boolean` | | indentSize | `number` | | keyboardHandler | `string` | | minimapDisplay | `string` | | multiselectModifierKey | `string` | | wrapping | `boolean` | # exec API Source: https://docs.replit.com/extensions/api/exec Learn how to run shell commands in Replit Apps using the exec API module. Includes methods for spawning processes and executing commands. The `exec` api module allows you to execute arbitrary shell commands. ## Usage ```ts theme={null} import { exec } from '@replit/extensions'; ``` ## Methods ### `exec.spawn` Spawns a command, with given arguments and environment variables. Takes in callbacks, and returns an object containing a promise that resolves when the command exits, and a dispose function to kill the process. ```ts theme={null} spawn(options: SpawnOptions): SpawnOutput ``` ### `exec.exec` Executes a command in the shell, with given arguments and environment variables ```ts theme={null} exec(command: string, options: { env: Record }): Promise ``` ## Types ### BaseSpawnOptions | Property | Type | | ------------ | ------------------------ | | args | `string[]` | | env? | `Record` | | splitStderr? | `boolean` | ### CombinedStderrSpawnOptions | Property | Type | | ------------ | ------------------------ | | args | `string[]` | | env? | `Record` | | onOutput? | `Function` | | splitStderr? | `false` | ### ExecResult | Property | Type | | -------- | -------- | | exitCode | `number` | | output | `string` | ### SpawnOutput | Property | Type | | ------------- | ---------------------- | | dispose | `Function` | | resultPromise | `Promise` | ### SpawnResult | Property | Type | | -------- | --------------- | | error | `null │ string` | | exitCode | `number` | ### SplitStderrSpawnOptions | Property | Type | | ----------- | ----------------------------------------- | | args | `string[]` | | env? | `Record` | | onStdErr? | [`OutputStrCallback`](#outputstrcallback) | | onStdOut? | [`OutputStrCallback`](#outputstrcallback) | | splitStderr | `true` | ### OutputStrCallback ```ts theme={null} (output: string) => void ``` ### SpawnOptions ```ts theme={null} SplitStderrSpawnOptions | CombinedStderrSpawnOptions ``` # fs API Source: https://docs.replit.com/extensions/api/fs Create, read, modify, and watch files and directories in your Replit App using the filesystem API methods and types. The fs or filesystem API allows you to create, read, and modify files on the replit app's filesystem. ## Usage ```ts theme={null} import { fs } from '@replit/extensions'; ``` ## Methods ### `fs.readFile` Reads the file specified at `path` and returns an object containing the contents, or an object containing an error if there was one. Required [permissions](./manifest#scopetype): `read`. ```ts theme={null} readFile(path: string, encoding: null | "utf8" | "binary"): Promise<{ content: string } | { error: string }> ``` ### `fs.writeFile` Writes the file specified at `path` with the contents `content`. Required [permissions](./manifest#scopetype): `read`, `write-exec`. ```ts theme={null} writeFile(path: string, content: string | Blob): Promise<{ success: boolean } | { error: string }> ``` ### `fs.readDir` Reads the directory specified at `path` and returns an object containing the contents, or an object containing an error if there was one. Required [permissions](./manifest#scopetype): `read`. ```ts theme={null} readDir(path: string): Promise<{ children: DirectoryChildNode[], error: string }> ``` ### `fs.createDir` Creates a directory at the specified path. Required [permissions](./manifest#scopetype): `read`, `write-exec`. ```ts theme={null} createDir(path: string): Promise<{ error: null | string, success: boolean }> ``` ### `fs.deleteFile` Deletes the file at the specified path. Required [permissions](./manifest#scopetype): `read`, `write-exec`. ```ts theme={null} deleteFile(path: string): Promise<{} | { error: string }> ``` ### `fs.deleteDir` Deletes the directory at the specified path. Required [permissions](./manifest#scopetype): `read`, `write-exec`. ```ts theme={null} deleteDir(path: string): Promise<{} | { error: string }> ``` ### `fs.move` Moves the file or directory at `from` to `to`. Required [permissions](./manifest#scopetype): `read`, `write-exec`. ```ts theme={null} move(path: string, to: string): Promise<{ error: null | string, success: boolean }> ``` ### `fs.copyFile` Copies the file at `from` to `to`. Required [permissions](./manifest#scopetype): `read`, `write-exec`. ```ts theme={null} copyFile(path: string, to: string): Promise<{ error: null | string, success: boolean }> ``` ### `fs.watchFile` Watches the file at `path` for changes with the provided `listeners`. Returns a dispose method which cleans up the listeners. Required [permissions](./manifest#scopetype): `read`. ```ts theme={null} watchFile(path: string, listeners: WatchFileListeners, encoding: "utf8" | "binary"): Promise ``` ### `fs.watchDir` Watches file events (move, create, delete) in the specified directory at the given `path`. Returns a dispose method which cleans up the listeners. Required [permissions](./manifest#scopetype): `read`. ```ts theme={null} watchDir(path: string, listeners: WatchDirListeners): Promise ``` ### `fs.watchTextFile` Watches a text file at `path` for changes with the provided `listeners`. Returns a dispose method which cleans up the listeners. Use this for watching text files, and receive changes as versioned operational transform (OT) operations annotated with their source. Required [permissions](./manifest#scopetype): `read`. ```ts theme={null} watchTextFile(path: string, listeners: WatchTextFileListeners): Function ``` ## Types ### ChangeEventType A file change event type | Property | Type | | -------- | ---- | ### DeleteEvent Fired when a file is deleted | Property | Type | | --------- | ------------------- | | eventType | `Delete` | | node | [`FsNode`](#fsnode) | ### DirectoryChildNode A directory child node - a file or a folder. | Property | Type | | -------- | --------------------------- | | filename | `string` | | type | [`FsNodeType`](#fsnodetype) | ### FsNode A base interface for nodes, just includes the type of the node and the path, This interface does not expose the node's content/children | Property | Type | | -------- | --------------------------- | | path | `string` | | type | [`FsNodeType`](#fsnodetype) | ### FsNodeType A Filesystem node type | Property | Type | | -------- | ---- | ### MoveEvent Fired when a file is moved | Property | Type | | --------- | ------------------- | | eventType | `Move` | | node | [`FsNode`](#fsnode) | | to | `string` | ### TextChange A written text change for the WriteChange function exposed by WatchTextFileListeners.onReady | Property | Type | | -------- | -------- | | from | `number` | | insert? | `string` | | to? | `number` | ### TextFileOnChangeEvent Signifies a change when a text file's text content is updated | Property | Type | | ------------- | ----------------------------- | | changes | [`TextChange[]`](#textchange) | | latestContent | `string` | ### TextFileReadyEvent A set of listeners and values exposed by WatchTextFileListeners.onReady | Property | Type | | ---------------- | --------------------------------------- | | getLatestContent | [`GetLatestContent`](#getlatestcontent) | | initialContent | `string` | | writeChange | [`WriteChange`](#writechange) | ### WatchDirListeners A set of listeners for watching a directory | Property | Type | | --------------- | ------------------------------------------------------------------- | | onChange | [`WatchDirOnChangeListener`](#watchdironchangelistener) | | onError | [`WatchDirOnErrorListener`](#watchdironerrorlistener) | | onMoveOrDelete? | [`WatchDirOnMoveOrDeleteListener`](#watchdironmoveordeletelistener) | ### WatchFileListeners A set of listeners for watching a non-text file\<`T extends string | Blob = string`> | Property | Type | | --------------- | --------------------------------------------------------------------- | | onChange | [`WatchFileOnChangeListener`](#watchfileonchangelistener) | | onError? | [`WatchFileOnErrorListener`](#watchfileonerrorlistener) | | onMoveOrDelete? | [`WatchFileOnMoveOrDeleteListener`](#watchfileonmoveordeletelistener) | ### WatchTextFileListeners A set of listeners for watching a text file | Property | Type | | --------------- | ----------------------------------------------------------------------------- | | onChange? | [`WatchTextFileOnChangeListener`](#watchtextfileonchangelistener) | | onError? | [`WatchTextFileOnErrorListener`](#watchtextfileonerrorlistener) | | onMoveOrDelete? | [`WatchTextFileOnMoveOrDeleteListener`](#watchtextfileonmoveordeletelistener) | | onReady | [`WatchTextFileOnReadyListener`](#watchtextfileonreadylistener) | ### ChangeEventType A file change event type ```ts theme={null} Create = 'CREATE' Delete = 'DELETE' Modify = 'MODIFY' Move = 'MOVE' ``` ### FsNodeType A Filesystem node type ```ts theme={null} Directory = 'DIRECTORY' File = 'FILE' ``` ### DisposerFunction A cleanup/disposer function (void) ```ts theme={null} () => void ``` ### FsNodeArray ```ts theme={null} Array ``` ### GetLatestContent Returns the latest content of a watched file as a string ```ts theme={null} () => string ``` ### WatchDirOnChangeListener Fires when a directory's child nodes change ```ts theme={null} (children: FsNodeArray) => void ``` ### WatchDirOnErrorListener Fires when watching a directory fails ```ts theme={null} (err: Error, extraInfo: Record) => void ``` ### WatchDirOnMoveOrDeleteListener Fires when a watched directory is moved or deleted ```ts theme={null} (event: DeleteEvent | MoveEvent) => void ``` ### WatchFileOnChangeListener Fires when a non-text file is changed ```ts theme={null} (newContent: T) => void ``` ### WatchFileOnErrorListener Fires when watching a non-text file fails ```ts theme={null} (error: string) => void ``` ### WatchFileOnMoveOrDeleteListener Fires when a non-text file is moved or deleted ```ts theme={null} (moveOrDeleteEvent: MoveEvent | DeleteEvent) => void ``` ### WatchTextFileOnChangeListener Fires when a watched text file's text content is updated ```ts theme={null} (changeEvent: TextFileOnChangeEvent) => void ``` ### WatchTextFileOnErrorListener Fires when watching a text file fails ```ts theme={null} (error: string) => void ``` ### WatchTextFileOnMoveOrDeleteListener Fires when a watched text file is moved or deleted ```ts theme={null} (moveOrDeleteEvent: MoveEvent | DeleteEvent) => void ``` ### WatchTextFileOnReadyListener Fires when a text file watcher is ready ```ts theme={null} (readyEvent: TextFileReadyEvent) => void ``` ### WriteChange Writes a change to a watched file using the TextChange interface ```ts theme={null} (changes: TextChange | Array) => void ``` # init API Source: https://docs.replit.com/extensions/api/init Learn how to initialize a Replit extension, establish a handshake with the Replit App, and manage event listeners using the init() method. The `init()` method initializes the Extension, establishes a handshake with the Replit App, and adds an event listener to the window object. It takes as an argument an object containing optional parameters for the initialization process. It returns a function that removes the event listener added to the window object. ## Usage ```ts theme={null} import { init } from '@replit/extensions'; ``` ## Signature ```ts theme={null} init(args: ReplitInitArgs): Promise ``` ## Types ### HandshakeStatus An enumerated set of values for the Handshake between the workspace and an extension | Property | Type | | -------- | ---- | ### ReplitInitArgs The Replit init() function arguments | Property | Type | | -------- | -------- | | timeout? | `number` | ### ReplitInitOutput The output of the Replit init() function | Property | Type | | -------- | ------------------------------------- | | dispose | `Function` | | status | [`HandshakeStatus`](#handshakestatus) | ### HandshakeStatus An enumerated set of values for the Handshake between the workspace and an extension ```ts theme={null} Error = 'error' Loading = 'loading' Ready = 'ready' ``` # Extension manifest reference Source: https://docs.replit.com/extensions/api/manifest 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; } ``` # me API Source: https://docs.replit.com/extensions/api/me 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 ``` # messages API Source: https://docs.replit.com/extensions/api/messages 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 ``` ### `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 ``` ### `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 ``` ### `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 ``` ### `messages.hideMessage` Hides a message by its IDs ```ts theme={null} hideMessage(id: string): Promise ``` ### `messages.hideAllMessages` Hides all toast messages visible on the screens ```ts theme={null} hideAllMessages(): Promise ``` # replDb API Source: https://docs.replit.com/extensions/api/replDb 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 ``` ### `replDb.get` Returns a value associated with the given key. Required [permissions](./manifest#scopetype): `repldb:read`. ```ts theme={null} get(args: { key: string }): Promise ``` ### `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 ``` # session API Source: https://docs.replit.com/extensions/api/session 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 ``` ## 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 ``` # themes API Source: https://docs.replit.com/extensions/api/themes 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 ``` ### `themes.getCurrentThemeValues` Returns the current theme's global token values. ```ts theme={null} getCurrentThemeValues(): Promise ``` ### `themes.onThemeChange` Fires the `callback` parameter function with the updated theme when the user's theme changes. ```ts theme={null} onThemeChange(callback: OnThemeChangeListener): Promise ``` ### `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 ``` ## 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 ``` # Create your first Replit Extension Source: https://docs.replit.com/extensions/basics/create-extension Learn how to build a basic Replit extension by creating, previewing, and adding features to a sample project using Extension Devtools and the Extensions API. #### Learn the basics of extension development by building and previewing a simple extension. In this guide, you'll build a sample "Hello, world!" React.js extension with a custom Tool UI. ## Before you begin * Make sure you have a Replit account — you'll need to be logged in to create an extension. * You'll also need to make sure you've verified your email address, as this is required to publish an extension. * You'll need to be familiar with JavaScript, and ideally React.js, which is our preferred framework for building UI Extensions. ## Create an Extension Replit App To start building a Replit extension, you need to create an Extension Replit App. This is a special Replit App that contains all the configuration necessary to build, preview, and release your extension. 1. Fork a template below. Give it a name and click "Create Extension Replit App" A starter template for Replit Extensions using the React JavaScript framework. A starter template for a Replit Extension with Vanilla JavaScript 2. After creating the Replit App, your Workspace should open. On the left side you'll find a code editor, and on the right side, you'll find the Extension Devtools tab. [Learn more about devtools](/extensions/development/devtools) ### Preview your extension Building an extension is a lot easier when you can see what you're building. We've made it easy to preview your extension in a Replit App, similar to the Preview tool you're familiar with in other Replit Apps. Extension Replit Apps do not support the regular Preview tool. Read more in the [FAQ](/extensions/faq) 1. **Open Extension Devtools** 2. **Click "Load Locally"** This will run your Replit App's development server, if it's not already running, and load your extension in the preview window. 3. **Open a development preview tab** Click the "Preview" button next to any Tool or File Handler in the Extension Devtools to open a preview tab. This will open a new tab in your Workspace, where you can see your extension in action. ### Add features Next, it's time to start adding features using the Replit Extensions API. There are two ways to use the APIs, depending on which template you chose: * **React Extensions** In React Extensions, some APIs have hooks, while others are available on the `replit` object returned by [`useReplit()`](/extensions/development/react/hooks/useReplit). * **JavaScript Extensions** In JavaScript Extensions, all APIs are available on the global `replit` object created by the [`init` API](/extensions/api/init) Features are added through the Devtools UI, which is available in the [Extension Devtools](/extensions/development/devtools) tab. Features are divided into three categories: 1. **Tools (*UI Extensions*)** An 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). 2. **File Handlers (*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. ### Using devtools to scaffold features Extension developer tools make it easy to scaffold out new functionality without manually editing the Manifest file. (*Behind the scenes, all the edits you make here are reflected in the Manifest file.*) # Key Concepts Source: https://docs.replit.com/extensions/basics/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. # Extension Devtools Source: https://docs.replit.com/extensions/development/devtools Learn how to use Replit's Extension Devtools to manage metadata, file handlers, and tools while developing your extension. # Developing your Extension In every extension Replit App, you will see a button labeled **Extension Devtools** in the top-right corner of the workspace. Devtools button If you do not see this button, make sure your Replit App is [configured to be an Extension](/replit-app/configuration/). ## Developer Tools The Extension Devtools pane makes it easy to edit your Extension's metadata and manage [Tools](/extensions/basics/key-concepts#tool-extension-ui) and [File Handlers](/extensions/basics/key-concepts#file-handler-file-editors-and-icons). Devtools ### Extension Metadata Click the **Edit** button in the top-right corner of your Extension preview to edit it. See [docs on the manifest file](/extensions/api/manifest). Extension preview ### File Handlers Click the "+" Icon next to **File Handlers** or click **New File Handler**. You will then be prompted to fill out the necessary information for the file handler. See [Type Definition](/extensions/api/manifest#filehandler). To preview a file handler in action, click the **Open** button on the right side of an existing file handler. ### Tools Click the "+" Icon next to **Tools** or click **New Tool**. You will then be prompted to fill out the necessary information for the new tool. See [Type Definition](/extensions/api/manifest#tool). To preview a tool in action, click the **Open** button on the right side of an existing tool. # Full-Stack Source: https://docs.replit.com/extensions/development/full-stack Learn how to build a full-stack extension by creating a separate backend API server to handle requests from your extension client on Replit. # Create a full-stack Extension While full-stack extensions are not supported within a single Replit App (aka a monorepo) at this time, you can always call out from your Extension client Replit App to any outside API endpoints. Until we have full Deployments support, you can use this simple workaround to create your own server API for your extension: 1. [Create your Extension Client Replit App →](https://replit.com/new/extension) 2. [Create a separate Replit App](https://replit.com/new) for your backend. This should expose an API. For example it could be a [Node](https://replit.com/new/nodejs) or [Ruby](https://replit.com/new/ruby) API server, or even a [Next.js](https://replit.com/new?template=482b2b7d-6b3e-4b9d-863c-d51c1d5cf6f0) site with a serverless function. 3. Make fetch requests from your extension client to your backend\ Make sure to enable CORS requests on your extension backend API, since the extension client and API will run on different subdomains If you’re using Next.js to build your extension, we recommend [exporting it statically](https://nextjs.org/pages/building-your-application/deploying/static-exports) and pointing your releases to the build directory. # Manual Installation Source: https://docs.replit.com/extensions/development/installation Learn how to install and initialize the Replit Extensions API client using script tags or npm packages for your project. While we recommend using our [templates](/extensions/extensions#templates) to get started, you can also install the API client manually. ### As a ` ``` Start using the API client by creating a new ` ``` ### As an npm package Install the client with your preferred package manager, and use the `import` statement to start using it. ``` npm install @replit/extensions yarn add @replit/extensions pnpm add @replit/extensions ``` After installing the API client, use the `import` statement to start using it. ```tsx theme={null} import { fs, data, ... } from '@replit/extensions'; ``` # useActiveFile() Hook Source: https://docs.replit.com/extensions/development/react/hooks/useActiveFile 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 ( <> Active File: {activeFile} ); }; ``` ## Signature ```ts theme={null} function useActiveFile(): string | null; ``` # useIsExtension() Hook Source: https://docs.replit.com/extensions/development/react/hooks/useIsExtension 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; ``` # useReplit() Hook Source: https://docs.replit.com/extensions/development/react/hooks/useReplit 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; }): 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` | # useReplitEffect() Hook Source: https://docs.replit.com/extensions/development/react/hooks/useReplitEffect 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; dependencies: Array ): null; ``` # useTheme() Hook Source: https://docs.replit.com/extensions/development/react/hooks/useTheme 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. # useThemeValues() Hook Source: https://docs.replit.com/extensions/development/react/hooks/useThemeValues 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. # useWatchTextFile() Hook Source: https://docs.replit.com/extensions/development/react/hooks/useWatchTextFile 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) => void ``` # Introduction Source: https://docs.replit.com/extensions/development/react/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( ) ``` 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
Loading...
} if(status === "error") { return
An error occurred: {error?.message}
} return
Extension is Ready!
} ``` # JavaScript Commands Source: https://docs.replit.com/extensions/examples/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 ` * "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) # JSON Editor Source: https://docs.replit.com/extensions/examples/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
My app
; } ``` ### 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
{error.toString()}
} else if (status === "loading") { return
Loading...
} else if (status === "ready") { return
Ready
} } ``` [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. Loading state Error state 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
{path && content ? :
Please select a file
}
} ``` That's it. Now install and load your Extension, and it should work. Select a file Editor without CSS ### 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). ; }; 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. Replit Workspace 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 ⏱️ *1 minute* Jump-start your project by building on community-contributed apps. ⏱️ *7 minutes* Use the AI-powered Replit tools to create, explain, and debug your app. ⏱️ *15 minutes* Create a full-stack app with complete control. ### Import existing projects ⏱️ *2 minutes* Import an existing GitHub repository into Replit. ⏱️ *3 minutes* Convert your Figma designs into functional React applications. ⏱️ *4 minutes* Migrate your Bolt projects to Replit with Agent assistance. ⏱️ *4 minutes* Transfer your Lovable projects to Replit and continue building. ### 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 AI Agent Replit AI [Agent](/replitai/agent) and [Assistant](/replitai/assistant) accelerate 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 Replit Mobile To learn more about all of Replit's features, see the following resources: * 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/) and [Replit Assistant](/replitai/assistant/). * 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. # Create a Slack channel summarizer Source: https://docs.replit.com/getting-started/quickstarts/ai-slack-channel-summarizer Build a Slack bot that summarizes channel activity using GPT-4. Learn how to integrate AI with Slack's API. Turn your Slack conversations into concise summaries with AI. This guide shows you how to create a bot that summarizes channel activity using GPT-4. ## Features Summarize Slack channel activity for any time period Generate intelligent, context-aware summaries using OpenAI's GPT-4 ## Create your summarizer 1. Sign in to Replit 2. Navigate to the [AI Slack summary template](https://replit.com/@replit-matt/Slack-Channel-Summary-Bot) 3. Select **+ Use Template** in the upper-right corner 4. Follow the prompts to create your Replit App 1. Go to the [Slack Apps page](https://api.slack.com/apps) 2. Select **Create an App** 3. Choose **From an app manifest** 4. Select your workspace from the dropdown 5. Replace the manifest content with the [manifest.json](https://replit.com/@replit-matt/Slack-Channel-Summary-Bot#assets/manifest.json) file 6. Review the configuration and select **Create** 7. Select **Install the App** You may need administrator approval to install the app depending on your organization's settings. Add the following secrets to your Replit App's **Secrets** tab: 1. **SLACK\_BOT\_TOKEN** * Navigate to Settings > Install App in your Slack 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 a token name and select permissions * Copy the generated token 4. **OPENAI\_API\_KEY** * Get your API key from OpenAI's platform 1. Select **Publish** in the Workspace header 2. Choose **Reserved VM Deployments** 3. Select **Set up your published app** 4. Select **Publish** ## Using your summarizer Add your bot to a channel and send it a direct message with the following command: ```bash theme={null} /summarize-channel #channel-name duration ``` For example, to summarize the last 24 hours of activity in #general: ```bash theme={null} /summarize-channel #general 24 ``` ## Customization options Customize your summaries by modifying the prompt to focus on specific keywords or topics. Extend functionality by connecting with additional platforms and services. Customize the format and content of Slack alert messages. Configure different summarization intervals for channels or topics. # Create with AI Source: https://docs.replit.com/getting-started/quickstarts/ask-ai Learn how to create a Replit App using AI-powered tools. export const AiPrompt = ({children}) => { return
{children}
; }; ## Create your app using AI ⏰ *Estimated time: 7 minutes* Learn how to create your Replit App using the **Agent** and **Assistant** AI tools in this guide. Specializes in generating new projects and building complex features. Specializes in describing your code, making quick fixes, and adding new features. Follow the steps below to build a polished business website. Use Replit's AI features to create an app, and refine it until it matches your desired design. image of the Completed App Navigate to the Home screen and select **Create App**: image of the Create App button Select the **Create with Replit Agent** tab as shown in the following image: image of the Create with Replit Agent tab To ask Agent to create your Replit App, enter your **prompt** in the text area. A prompt is a description of the task you want AI to perform. You can include text and file attachments in your prompt. Follow these steps to submit both in your prompt: 1. Copy the following image: image of a SaaS business website 2. Paste the image into Agent text area. 3. Enter the following prompt in the text area: Build a website for a SaaS B2B website that looks like the attached file. 4. Select **Start building**. After you submit your prompt, Agent sets up your Replit App and provides updates on its status in real time. You can monitor and view the history in the **Progress** tab. When Agent finishes setup, it prompts you with what it intends to build and options to include additional features as shown in the following image: image of Agent's approve dialog Leave the additional options unchecked and select **Approve plan & start**. After Agent builds your app, navigate to the **Preview** tab, where you can interact with the website. The website should resemble the following image: The generated website might differ since Agent can return different results for the same prompt. image of the Preview tool showing the website created by Agent Since the prompt only includes information about the landing page, Agent might omit content creation for the links on the page. The next step demonstrates how to use Assistant to add those pages. Navigate to the **Assistant** tab, which should resemble the following image: image of the Assistant tab Enter the following prompt in the text area and submit it: Create pages for each of the links in the navigation bar. You can select **Preview code changes** to view the Assistant's planned changes. Select **Apply All** and confirm your selection if prompted. Assistant and Agent, which rely on popular AI models, occasionally produce 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. At this point, you should have a navigable website that includes sample text and functional links. ## Explore Try the tasks in the following sections to build your knowledge of Replit. ### Undo an Agent change Agent lets you perform a rollback, a feature that reverts your app to a previous checkpoint, discarding all changes made after that point. Follow these steps to revert the app to a specific checkpoint: When you use the rollback feature, you restore the Replit App to a previous state. This action removes all changes made after that point. This includes edits by you or AI-powered features and AI conversation context. Database data can also be restored if you select "Restore databases" under "Additional rollback options." The rollback affects your entire development environment. For detailed information about checkpoints and rollbacks, see [Checkpoints and Rollbacks](/replitai/checkpoints-and-rollbacks). Navigate to the **Agent** tab and locate the checkpoint you want to restore. Select **Rollback to here** to undo all changes after that point as shown in the following image: image of Rollback to here button in the Agent tab After Agent completes your request, check that the **Agent** tab displays "Rollback completed". Confirm that your app functionality matches its state before the checkpoint. ### Undo an Assistant change Assistant lets you perform a rollback, a feature that reverts your app to a previous checkpoint, discarding all changes made after that point. Follow these steps to revert the app to a specific checkpoint: When you use the rollback feature, you restore the Replit App to a previous state. This action removes all changes made after that point. This includes edits by you or AI-powered features and AI conversation context. Database data can also be restored if you select "Restore databases" under "Additional rollback options." The rollback affects your entire development environment. Navigate to the **Assistant** tab and locate the checkpoint you want to restore. Select **Undo these changes**\* to revert all changes from the checkpoint after that point in time as shown in the following image: image of Undo these changes button in the Assistant tab After Assistant completes your request, the **Undo these changes** button label should be replaced with **Restore checkpoint**. Confirm that your app functionality matches its state before the checkpoint. ## 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: * Use Agent to create a new Replit App using your own prompt. If your prompt needs more direction or details, select the pen icon labeled **Improve prompt**. * Add features to your app using Assistant. Navigate to the **Assistant** tab and try one of the recommended prompts. * Publish your Replit App to make it publicly available. Learn more about publishing options and billing from [About Deployments](/category/replit-deployments/). * Learn more about the AI-powered Replit features from the following guides: * [Replit Agent](/replitai/agent/) * [Replit Assistant](/replitai/agent/) # Create a file converter with AI Source: https://docs.replit.com/getting-started/quickstarts/build-with-ai Build a file conversion app in 15 minutes using Replit's AI tools. Learn how to use Agent and Assistant to create apps through natural language. export const AiPrompt = ({children}) => { return
{children}
; }; Learn how to replace line-by-line coding with AI-powered conversations. This guide shows you how to effectively communicate your vision and leverage Replit's AI tools to bring your ideas to life. ## What you'll learn Use Agent and Assistant effectively for different development tasks Learn the art of describing your vision to AI tools Discover how to provide context and specifications effectively Build and publish a working app in just 15 minutes You'll need a Replit account and Core subscription to access Agent. * [View the finished template](https://replit.com/@matt/msftmd-Office-Markdown-Converter?v=1\&utm_source=matt\&utm_medium=youtube\&utm_campaign=msftmd-app) * [Try the live demo](https://msftmd.replit.app/) ; }; export const platform_0 = "Figma" export const projectType_0 = "design" export const setupDescription_0 = "Replit automatically sets up your app's environment and dependencies" ## Import your Figma design ⏰ *Estimated time: three minutes* You can import your Figma designs and turn them into functional React apps on Replit. This quickstart covers how to convert your designs into working applications using AI-powered code generation. For comprehensive import options including other platforms like GitHub, Bolt, and Lovable, see the [Import feature documentation](/replit-app/import-to-replit). Preview of Figma design import in Replit ## Import your design 1. Navigate to [https://replit.com/import](https://replit.com/import). Replit import interface showing available sources 2. Select **Figma** from the available import sources. 3. **Connect your Figma account** to authorize access to your designs. Figma authentication process in Replit 4. **In Figma, select the frame** you want to build in Replit. Selecting a frame in Figma for import 5. **Copy the frame URL** from Figma and paste it into the Replit import interface. 6. Select **Import** to start the conversion process. Figma import progress in Replit ## What gets imported During the import process, Replit converts your Figma design into a functional React application: * **Theme & components**: Design system elements, colors, typography, and reusable components * **Assets & icons**: Images, icons, and other visual assets from your design * **App scaffolding**: Basic application structure and layout framework ## Figma design guidelines To copy the Figma Design frame URL: 1. Right-click the frame 2. Select **Copy/Paste as** 3. Select **Copy link to selection** For optimal conversion results, ensure your Figma design is well-structured with clear component hierarchies complete with auto layout constraints. Follow [these guidelines](https://support.animaapp.com/en/articles/6431384-create-responsive-designs-in-figma) for responsive designs in Figma. You can also ask Agent to help you make your design responsive. ### Tips * Use auto layout constraints to ensure your design is responsive. * Name your layers something short and meaningful. * Convert any groups to frames * Mark image assets for export ## Configure and run your app During the import process, {setupDescription_0}. If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues: * **[Agent](/replitai/agent)**: Use AI to add new features and refine your imported project * **[Assistant](/replitai/assistant)**: Get help with code questions and debugging * **[Secrets](/replit-workspace/workspace-features/secrets)**: Add your API keys and environment variables * **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command ## Interact in Agent chat (beta) After importing, you can paste Figma links into Agent chat to explore layers, extract tokens, and request code changes. These Agent chat features require a Figma Dev or Full seat; the initial import does not. See the guide: [Figma MCP Integration](/replitai/mcp/figma). ## Continue your journey Now that you've imported your {platform_0} {projectType_0}, learn more about what you can do with your Replit App: * [Replit Agent](/replitai/agent): Get AI assistance with code review, testing, and feature implementation * [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template for others to remix * [Replit Deployments](/category/replit-deployments): Publish your app to the cloud with a few clicks * [Collaborate](/replit-app/collaborate): Work with others on your imported projects # Import from GitHub Source: https://docs.replit.com/getting-started/quickstarts/import-from-github Learn how to import GitHub repositories into Replit using rapid import or guided import methods. ## Import your GitHub repository ⏰ *Estimated time: two minutes* You can import your GitHub repositories and turn them into Replit Apps to run, test, and publish your code. This quickstart covers the fastest methods to get your GitHub projects running on Replit. For comprehensive import options including other platforms like Figma, Bolt, and Lovable, see the [Import feature documentation](/replit-app/import-to-replit). Preview of GitHub repository import in Replit ## Rapid import Rapid import works instantly with public repositories. Combine the Replit import URL with your GitHub repository URL to start the import process. 1. Copy the repository GitHub URL, starting with `github.com`. 2. Type `https://replit.com/` in the browser address bar and paste your copied GitHub URL at the end (no spaces). **Example**: GitHub repository URL: `https://github.com/exampleUser/my-app` Import URL: `https://replit.com/github.com/exampleUser/my-app` 3. Press Enter to start the automatic import process. ## Guided import Guided import steps you through the process of selecting a repository to import and supports public and private repositories. 1. Navigate to [https://replit.com/import](https://replit.com/import). 2. Select **GitHub** from the available import sources. 3. **Connect your GitHub account** to authorize access to your repositories. 4. **Select the repository** you want to import. 5. Select **Import** to start the conversion process. 6. Configure your privacy settings and click **Import** to start the automatic import process. ## Configure and run your app During the import process, Replit attempts to set your app's language, dependencies, and workflow. If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues: * **[Assistant](/replitai/assistant)**: Diagnose and fix setup issues using AI-powered assistance. * **[Configure Repl](/replit-app/configuration)**: Configure your app's language, dependencies, and workflow. * **[Secrets](/replit-workspace/workspace-features/secrets)**: Securely add environment variables your app depends on. * **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command. ## Continue your journey Now that you've set up your app, learn more about what you can do with your Replit App from the following resources: * [Using the Git interface](/replit-workspace/workspace-features/git-interface): Learn how to manage your Git repositories in Replit * [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your Replit App as a Template for others to remix * [Replit Deployments](https://docs.replit.com/category/replit-deployments): Publish your Replit App to the cloud with a few clicks * [Secrets](/replit-workspace/workspace-features/secrets): Securely store sensitive information, including API keys and database credentials * [Collaborate](/replit-app/collaborate): Work with others on your GitHub-imported projects # Import from Lovable Source: https://docs.replit.com/getting-started/quickstarts/import-from-lovable Learn how to import Lovable projects into Replit by exporting to GitHub first, then importing with Agent assistance. export const platform_1 = "Lovable" export const platform_0 = "Lovable" export const projectType_0 = "project" export const setupDescription_0 = "Agent validates your project structure and assists with migration to optimize it for the Replit environment" ## Import your Lovable project ⏰ *Estimated time: four minutes* You can import your Lovable projects into Replit by exporting them to GitHub first, then importing them as Replit Agent Apps. This quickstart covers the step-by-step process to migrate your Lovable projects to Replit. For comprehensive import options including other platforms like GitHub, Figma, and Bolt, see the [Import feature documentation](/replit-app/import-to-replit). Preview of Lovable project import in Replit ## Export and import process 1. **Export your Lovable project to GitHub** from your Lovable workspace. 2. Navigate to [https://replit.com/import](https://replit.com/import). 3. Select **Lovable** from the available import sources. 4. **Connect your GitHub account to Replit** to authorize repository access. 5. **Select your new Lovable project repo** for import from the available repositories. 6. Select **Import** to start the migration process. ## What gets imported During the import process, Replit migrates your {platform_1} project with Agent assistance: * **Code**: All application code and logic from your {platform_1} project * **Design and styles**: UI components, styling, and visual design elements * **Assets**: Images, icons, and other static resources * **Backend functionality**: If your {platform_1} project includes backend functionality, it is imported into the Replit environment. * **Database schema**: Database structure and table definitions are imported into a Neon Postgres database, which is integrated directly into the Replit environment. ### What's not included * **Supabase database**: Database content and data are not migrated * **Secrets**: Environment variables and API keys must be added separately You can ask Agent to help build out functionality, add secrets, and recreate databases in your new app. ## Configure and run your app During the import process, {setupDescription_0}. If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues: * **[Agent](/replitai/agent)**: Use AI to add new features and refine your imported project * **[Assistant](/replitai/assistant)**: Get help with code questions and debugging * **[Secrets](/replit-workspace/workspace-features/secrets)**: Add your API keys and environment variables * **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command ## Continue your journey Now that you've imported your {platform_0} {projectType_0}, learn more about what you can do with your Replit App: * [Replit Agent](/replitai/agent): Get AI assistance with code review, testing, and feature implementation * [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template for others to remix * [Replit Deployments](/category/replit-deployments): Publish your app to the cloud with a few clicks * [Database setup](/cloud-services/storage-and-databases/sql-database): Let Agent help you configure and optimize your database * [Collaborate](/replit-app/collaborate): Work with others on your imported projects # Import from Vercel Source: https://docs.replit.com/getting-started/quickstarts/import-from-vercel Learn how to import Vercel projects into Replit by linking your GitHub repository and letting Agent handle the setup. export const platform_0 = "Vercel" export const projectType_0 = "project" export const setupDescription_0 = "Agent automatically sets up your app's environment and dependencies and configures run commands for the Replit environment" ## Import your Vercel project ⏰ *Estimated time: three minutes* You can import your Vercel projects into Replit by linking the GitHub repository that backs your Vercel project. Agent scans your code and handles the setup automatically. This quickstart covers the step-by-step process to migrate your Vercel projects to Replit with a clean workflow, live preview, and logs. For comprehensive import options including other platforms like GitHub, Figma, Bolt, and Lovable, see the [Import feature documentation](/replit-app/import-to-replit). Preview of Vercel project import in Replit ## Import process 1. Navigate to [https://replit.com/import](https://replit.com/import). Replit import interface showing available sources 2. Select **Vercel** from the available import sources. 3. **Connect your GitHub account** to authorize access to your repositories. 4. **Select the repository** that backs your Vercel project from the available repositories. 5. **Provide environment variables** when prompted by Agent. Only non-standard secrets and environment variables will be requested. 6. Select **Import** to start the migration process. ## What gets imported During the import process, Replit converts your Vercel project into a functional Replit App: * **Project structure**: Complete codebase and file organization * **Dependencies**: Package.json and dependency management * **Build configuration**: Optimized for Replit's environment * **Environment setup**: Runtime and framework configuration ## What's not included The following items from your Vercel project are not automatically imported: * **Environment variables**: You'll be prompted to provide these during import * **Custom domains**: Set up separately in Replit Deployments * **Vercel-specific configurations**: Edge functions and middleware may need adjustment * **Analytics and monitoring**: Use Replit's built-in monitoring tools ## Configure and run your app During the import process, {setupDescription_0}. If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues: * **[Agent](/replitai/agent)**: Use AI to add new features and refine your imported project * **[Assistant](/replitai/assistant)**: Get help with code questions and debugging * **[Secrets](/replit-workspace/workspace-features/secrets)**: Add your API keys and environment variables * **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command ## Continue your journey Now that you've imported your {platform_0} {projectType_0}, learn more about what you can do with your Replit App: * [Replit Agent](/replitai/agent): Get AI assistance with code review, testing, and feature implementation * [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template for others to remix * [Replit Deployments](/category/replit-deployments): Publish your app to the cloud with a few clicks * [Collaborate](/replit-app/collaborate): Work with others on your imported projects # Import from ZIP Source: https://docs.replit.com/getting-started/quickstarts/import-from-zip Learn how to import ZIP files into Replit by uploading your compressed project and letting Agent handle the setup. export const platform_0 = "ZIP" export const projectType_0 = "project" export const setupDescription_0 = "Agent automatically sets up your app's environment and dependencies and configures run commands for the Replit environment" ## Import your ZIP project ⏰ *Estimated time: three minutes* You can import your projects into Replit by uploading a ZIP file containing your codebase. Agent scans your code and handles the setup automatically. This quickstart covers the step-by-step process to import your ZIP-compressed projects to Replit with a clean workflow, live preview, and logs. For comprehensive import options including other platforms like GitHub, Figma, Bolt, Lovable, and Vercel, see the [Import feature documentation](/replit-app/import-to-replit). Preview of ZIP project import in Replit ## Import process 1. Navigate to [https://replit.com/import](https://replit.com/import). Replit import interface showing available sources 2. Select **ZIP** from the available import sources. 3. **Upload your ZIP file** containing your project files. 4. **Provide environment variables** when prompted by Agent. Only non-standard secrets and environment variables will be requested. 5. Select **Import** to start the migration process. ## What gets imported During the import process, Replit extracts and converts your ZIP file into a functional Replit App: * **Project structure**: Complete codebase and file organization * **Dependencies**: Package files and dependency management * **Build configuration**: Optimized for Replit's environment * **Environment setup**: Runtime and framework configuration ## What's not included The following items from your ZIP file are not automatically imported: * **Environment variables**: You'll be prompted to provide these during import * **Custom domains**: Set up separately in Replit Deployments * **Platform-specific configurations**: Some configurations may need adjustment * **Analytics and monitoring**: Use Replit's built-in monitoring tools ## Configure and run your app During the import process, {setupDescription_0}. If your app doesn't run as expected, Replit offers the following workspace tools to help you resolve the issues: * **[Agent](/replitai/agent)**: Use AI to add new features and refine your imported project * **[Assistant](/replitai/assistant)**: Get help with code questions and debugging * **[Secrets](/replit-workspace/workspace-features/secrets)**: Add your API keys and environment variables * **[Workflows](/replit-workspace/workflows)**: Configure the Run button to your preferred command ## Continue your journey Now that you've imported your {platform_0} {projectType_0}, learn more about what you can do with your Replit App: * [Replit Agent](/replitai/agent): Get AI assistance with code review, testing, and feature implementation * [Make your Replit App Public](/replit-app/collaborate#make-your-replit-app-public): Share your app as a Template for others to remix * [Replit Deployments](/category/replit-deployments): Publish your app to the cloud with a few clicks * [Collaborate](/replit-app/collaborate): Work with others on your imported projects # Create a Next.js app Source: https://docs.replit.com/getting-started/quickstarts/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 Build modern React applications Enable SSR for better performance Publish with automatic scaling Optimize for production ## Create your app 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. 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` Autoscale deployments automatically adjust resources based on traffic. Select **Publish** to launch your app. It will be live in a few minutes! ## Next steps Add your own domain Learn about scaling Optimize your app ## Related guides Build a blog with Astro Create apps using Agent Want to learn more about web development? Check out our [publishing documentation](/category/replit-deployments). # Create a cat image generator Source: https://docs.replit.com/getting-started/quickstarts/no-code-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 Create apps through natural language conversations Build without writing code Choose the right AI tool for each task Take your app live in minutes You'll need a Replit account and Core subscription to access Agent. ``` Replace `YOUR Replit App LINK` with the actual link to your Replit App, for example, `https://replit.com/@user/repl-name.` Here's an example of an embedded Replit App: ``` Example with a light theme: ; }; export const platform_1 = "Lovable" export const platform_0 = "Bolt" export const TeamsCredits = '$40'; export const CoreCredits = '$25'; export const AssistantCheckpointCost = '$0.05'; Replit's import feature allows you to transform existing projects and designs from external development and design tools into Replit Agent Apps. This reference covers supported platforms, technical specifications, limitations, and compatibility requirements. Preview of Figma design import in Replit ## Supported import sources Replit's import feature supports the following external platforms: * **Figma**: Convert design frames into React applications using AI-powered code generation * **Bolt**: Import existing Bolt projects and migrate them to Replit Agent Apps * **Lovable**: Transfer Lovable projects to Replit with Agent assistance * **Vercel**: Import Vercel projects by linking your GitHub repository with Agent assistance * **Replit Agent**: Import previously exported Agent Apps from GitHub repositories * **GitHub**: Import compatible repositories as Agent Apps * **ZIP**: Import ZIP files containing your project files All imported projects are validated for Agent compatibility before conversion begins. ## Quickstart guides For step-by-step instructions to import from each platform, see the quickstart guides: ⏱️ *2 minutes* Import an existing GitHub repository into Replit. ⏱️ *3 minutes* Convert your Figma designs into functional React applications. ⏱️ *3 minutes* Import your Vercel projects by linking your GitHub repository. ⏱️ *4 minutes* Migrate your Bolt projects to Replit with Agent assistance. ⏱️ *4 minutes* Transfer your Lovable projects to Replit and continue building. ⏱️ *3 minutes* Import your ZIP projects by uploading your existing .zip file. ## Features * **Automatic compatibility validation**: Ensures imported projects work with Replit Agent * **AI-powered migration**: Agent assists with project setup and feature completion * **Design-to-code conversion**: Transform Figma designs into functional React applications * **Enterprise-ready templates**: Import customized Agent Apps with internal configurations * **Real-time progress tracking**: Monitor import status with detailed progress updates ## Usage ### Accessing the import feature 1. Navigate to [replit.com/import](https://replit.com/import) 2. Select your desired import source from the available options 3. Follow the platform-specific import workflow ### Import workflow The import process follows these general steps: Choose your import source and provide the necessary project information. The system validates compatibility with Agent before proceeding. If your project is incompatible, you'll see an error message with suggestions for resolving compatibility issues. During the import process, you'll see an interstitial screen showing progress updates. Processing time varies based on project complexity and source platform. Import progress interstitial screen Once import completes, Agent engages to finalize the setup and ensure your project is ready for development. This is similar to the end state of Agent Rapid Build. ## Platform-specific workflows Import your Figma designs directly into Replit Agent Apps and turn them into functional web applications. ### Getting started 1. **Connect your Figma account** to authorize access to your designs 2. **In Figma, select the frame** you want to build in Replit 3. **Copy the frame URL and paste it** into the Replit import interface For a full guide on how to import a Figma design, see our [quickstart guide](/getting-started/quickstarts/import-from-figma). ### What we'll import * **Theme & components**: Design system elements, colors, typography, and reusable components * **Assets & icons**: Images, icons, and other visual assets from your design * **App scaffolding**: Basic application structure and layout framework ### Import process 1. Provide your Figma frame URL or file details 2. The system converts your design into React code 3. Agent wires the generated code to a JavaScript stack 4. Your design becomes a functional web application Ensure your Figma designs are well-structured with clear component hierarchies complete with auto layout constraints for optimal conversion results. Import your Vercel projects by linking the GitHub repository that backs your Vercel project with Agent assistance. ### Getting started 1. **Navigate to the import page** and select Vercel from available sources 2. **Connect your GitHub account** to authorize access to your repositories 3. **Select the repository** that backs your Vercel project from the available repositories For a full guide on how to import a Vercel project, see our [quickstart guide](/getting-started/quickstarts/import-from-vercel). ### What we'll import * **Project structure**: Complete codebase and file organization * **Dependencies**: Package.json and dependency management * **Build configuration**: Optimized for Replit's environment * **Environment setup**: Runtime and framework configuration ### What's not included * **Environment variables**: You'll be prompted to provide these during import * **Custom domains**: Set up separately in Replit Deployments * **Vercel-specific configurations**: Edge functions and middleware may need adjustment * **Analytics and monitoring**: Use Replit's built-in monitoring tools ### Import process 1. Agent scans your code and asks for any required secrets/env vars 2. You provide environment variables one by one—only what isn't already standard 3. Your app boots on Replit with a clean workflow, live preview, and logs 4. No manual rewiring of build commands or port configuration needed Import your Bolt projects by exporting them to GitHub first, then importing into Replit Agent Apps. ### Getting started 1. **Export your Bolt project to GitHub** from your Bolt workspace 2. **Connect your GitHub account to Replit** to authorize repository access 3. **Select your new Bolt project repo** for import from the available repositories For a full guide on how to import a Bolt project, see our [quickstart guide](/getting-started/quickstarts/import-from-bolt). ## What gets imported During the import process, Replit migrates your {platform_0} project with Agent assistance: * **Code**: All application code and logic from your {platform_0} project * **Design and styles**: UI components, styling, and visual design elements * **Assets**: Images, icons, and other static resources * **Backend functionality**: If your {platform_0} project includes backend functionality, it is imported into the Replit environment. * **Database schema**: Database structure and table definitions are imported into a Neon Postgres database, which is integrated directly into the Replit environment. ### What's not included * **Supabase database**: Database content and data are not migrated * **Secrets**: Environment variables and API keys must be added separately You can ask Agent to help build out functionality, add secrets, and recreate databases in your new app. ### Import process 1. The system validates project structure and dependencies 2. Agent assists with migration and feature completion 3. Your project is optimized for the Replit environment Import your Lovable projects by exporting them to GitHub first, then importing into Replit Agent Apps. ### Getting started 1. **Export your Lovable project to GitHub** from your Lovable workspace 2. **Connect your GitHub account to Replit** to authorize repository access 3. **Select your new Lovable project repo** for import from the available repositories For a full guide on how to import a Lovable project, see our [quickstart guide](/getting-started/quickstarts/import-from-lovable). ## What gets imported During the import process, Replit migrates your {platform_1} project with Agent assistance: * **Code**: All application code and logic from your {platform_1} project * **Design and styles**: UI components, styling, and visual design elements * **Assets**: Images, icons, and other static resources * **Backend functionality**: If your {platform_1} project includes backend functionality, it is imported into the Replit environment. * **Database schema**: Database structure and table definitions are imported into a Neon Postgres database, which is integrated directly into the Replit environment. ### What's not included * **Supabase database**: Database content and data are not migrated * **Secrets**: Environment variables and API keys must be added separately You can ask Agent to help build out functionality, add secrets, and recreate databases in your new app. Import previously exported Agent Apps from GitHub repositories with preserved configurations. ### Getting started 1. **Provide the GitHub repository URL** containing your exported Agent App 2. **Verify repository access** ensuring the repository is accessible to your account 3. **Confirm Agent App structure** in the repository For a full guide on how to import a GitHub repository, see our [quickstart guide](/getting-started/quickstarts/import-from-github). ### What we'll import * **Complete codebase**: All application code, dependencies, and configurations * **Agent configurations**: Preserved Agent-specific settings and optimizations * **Enterprise customizations**: Internal hardening and custom configurations * **Project structure**: Full project hierarchy and organization ### Import process 1. The system validates the repository contains Agent App configurations 2. Internal customizations and enterprise hardening are preserved 3. The imported app is ready for immediate use or further development Import compatible GitHub repositories and convert them into Replit Agent Apps. ### Getting started 1. **Provide the repository URL** of the GitHub project you want to import 2. **Ensure repository access** with proper permissions or public visibility 3. **Verify compatibility** with supported frameworks and technologies For a full guide on how to import a GitHub repository, see our [quickstart guide](/getting-started/quickstarts/import-from-github). ### What we'll import * **Source code**: Complete repository codebase and file structure * **Dependencies**: Package configurations and dependency definitions * **Documentation**: README files, documentation, and project notes * **Configuration files**: Build configs, environment setups, and project settings ### Import process 1. The system analyzes the codebase for Agent compatibility 2. If compatible, the repository is converted to an Agent App 3. Agent assists with any necessary setup or configuration 4. Project is optimized for the Replit environment Import ZIP files containing your project files and convert them into Replit Agent Apps. ### Getting started 1. **Create a Zip file** of your project files 2. **Upload the Zip file** to the Replit import interface 3. **Prompt the agent** to get your app up and running For a full guide on how to import a ZIP file, see our [quickstart guide](/getting-started/quickstarts/import-from-zip). ### What we'll import * **Source code**: Complete repository codebase and file structure * **Dependencies**: Package configurations and dependency definitions * **Documentation**: README files, documentation, and project notes * **Configuration files**: Build configs, environment setups, and project settings ## Limitations and considerations ### Current limitations * **Database data**: Database contents are not imported; the system includes only schemas and edge functions * **Complex dependencies**: Some complex or proprietary dependencies may require manual configuration * **Large projects**: Very large projects may take longer to process or require optimization ### Future enhancements * **Database content migration**: Full database content import capabilities * **Enhanced validation**: Improved compatibility checking for complex projects ## Error handling If an import fails, you'll receive specific error messages indicating the issue: * **Compatibility errors**: The project structure may have issues that need to be resolved * **Access errors**: Unable to access the source project or repository * **Processing errors**: Technical issues during conversion If you encounter persistent import issues, check that your source project is publicly accessible or that you have proper permissions. ## Best practices ### Preparing for import * **Clean project structure**: Ensure your source project has a clear, organized structure * **Remove sensitive data**: Remove API keys, credentials, and sensitive information before import * **Document dependencies**: Include clear documentation of external dependencies * **Test functionality**: Verify your source project works correctly before importing ### After import * **Review generated code**: Check the imported code for accuracy and completeness * **Test functionality**: Thoroughly test all features in the Replit environment * **Check secrets**: Agent will help you add secrets, but be sure to double check them and add any missing ones using [Replit's Secret](/replit-workspace/workspace-features/secrets) management. * **Recreate databases**: If your project uses databases, recreate them using the [Database tool](/cloud-services/storage-and-databases/sql-database) or by asking Agent to help you. ## Billing Import processing may consume Agent credits depending on the complexity of the migration and Agent involvement. Imports that require Agent assistance for migration or setup will consume credits based on the amount of processing required. Simple imports may complete without more charges beyond your standard Replit usage. ## Troubleshooting ### Common issues **Import validation fails** * Verify your source project uses supported frameworks and technologies * Check that all required files are present and accessible * Ensure your project follows standard conventions for your platform **Import takes too long** * Large or complex projects may require extended processing time * Monitor the progress screen for status updates * Contact support if processing exceeds expected time frames **Generated code doesn't work as expected** * Review the imported code for missing dependencies or configurations * Use Agent to help debug and resolve any issues * Check that all external services and APIs are properly configured For more support, visit the [Replit Help Center](https://docs.replit.com) or contact the support team. # Replit App Visibility Source: https://docs.replit.com/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. Creating a Private 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 Making a Replit App private from the Workspace ### 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 Making a Replit App private from the My Replit App page # Replit Core Source: https://docs.replit.com/replit-core/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 * 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 pricing page for cost and limits for specific plans. ### Monthly credits * Receive monthly credits that automatically apply to paid services such as Agent, Assistant, publishing, network transfer, and database storage You receive the following monthly credit based on your plan: - **Core**: {CoreCredits}- **Team**: {TeamsCredits} ### One-click Publishing * Select from multiple publishing options to optimize your spending * Access built-in logging & analytics. ### 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 Pricing 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: * [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 # Dependency Management Source: https://docs.replit.com/replit-workspace/dependency-management Replit supports a variety of languages and dependency management systems through the Dependencies tool. This section will cover the different types of dependencies and how to manage them in your Replit App. ## Imported Packages Packages imported directly from your code are managed in the `Imports` tab. This tab allows you to view and manage the packages grouped by language. Links are also provided to the appropriate packager file, such as `package.json` for Node.js. Imports tab for a project using Node.js and Python ### Search and add packages Clicking on `Add new package` will allow you to search for and install new packages. The language dropdown provides quick access between packagers. Node.js package search for 'React' You can view installation progress and relevant errors in the `Console` tab. Example console output for an uninstalled package ### The Universal Package Manager Replit will install most packages using [the universal package manager](https://blog.replit.com/packager). To see which languages and package managers are supported, please check out [UPM: Supported Languages](https://github.com/replit/upm/#supported-languages). If you prefer using the CLI, you can still use language-specific package managers such as `poetry` or `npm`. Any changes to the packager files will be reflected in the `Dependencies` tool, but require the respective CLI command or using the **Run** button to properly update. ### Import guessing As your code evolves, we analyze your project for missing dependencies and automatically guess what needs to be installed to get your code to run. For example, if you add `import flask` to `main.py`, the next time you select **Run**, you'll see a section in the **Console** indicating that the latest version of **Flask** is being installed: upm output showing packages being installed ### Guessing failures This section helps you with the command to run a particular version of your package. If there's a particular version that you need, or we guessed the wrong package entirely, you can run `upm` in the shell to resolve the conflict: ```bash theme={null} upm add 'flask==2.3.3' ``` To install additional packages in your Workspace, open a new tab by selecting the **+** sign and searching for **Packages**. Select the packages of your choice and select **Install**. Additional options for package guessing can be configured in the [.replit](/replit-app/configuration#replit-file) file. ### Python package managers When you create a Python Replit App, your package manager will be **poetry** by default. This means that you will not be able to use `pip install` to manage dependencies manually. Instead of running `pip install `, you can instead run `poetry add ` or `upm add `, which will do the same thing. `pip` is one of the earliest, and consequently most popular, package managers for Python. You can use `pip` as your Replit App's package manager instead of `poetry`. Follow the steps below: 1. In the Tools pane, select the **Shell** tab to add the common `requirements.txt` file using the following command: ```bash theme={null} touch requirements.txt ``` 2. Delete the `poetry.lock` file. 3. Move your dependencies from `[tool.poetry.dependencies]` to `requirements.txt`. Note that the `flask = "^3.0.2"` in `pyproject.toml`'s `[tool.poetry.dependencies]` section would become `flask>=3.0.2,<4` in `requirements.txt`. 4. Finally, delete the other `[tool.poetry...]` sections from `pyproject.toml`. After the above changes, the packaging infrastructure will use `pip` for all future operations. Now, as you add code to your `main.py` file, any time you select **Run**, [upm](https://github.com/replit/upm/) will determine whether there are any missing packages for your imports, find the latest versions of packages that provide those imports, and install them automatically. ## Advanced Configuration Replit supports all programming languages through integration with [Nix](https://nixos.org/). Nix is a tool for managing software packages and system configurations. The **System (Advanced)** tab provides quick access to Nix support for your Replit App. System (Advanced) tab for a project using Node.js and Python ### System Modules Modules combine support for programming languages, formatters, and packagers. These provide the foundation for your Replit App. If you create a Replit App from a template or GitHub repository, we will automatically install the modules that are required for the languages used. If you want to start with a blank Replit App, you will need to install a module under **System Modules** before you can use the **Imports** tab. You can also add more modules to support additional languages. You can further customize modules and other Nix settings using the [.replit](replit-app/configuration#replit-file) file. ### System Dependencies If you need more specific support for a language or other system-level dependencies, you can add [Nix packages](https://search.nixos.org/packages) under **System Dependencies**. These can also be managed in your [replit.nix](/replit-app/configuration#replit-nix-file) file. # Extensions Source: https://docs.replit.com/replit-workspace/extensions Extensions are applications you can develop to enhance the functionality and tools available within the Replit Workspace. Extensions ## What can Extensions do? ### Streamline workflows Extensions are deeply integrated with Replit, so users can automate actions like reading and editing files, formatting or linting code, and more. ### Add custom apps with tools Tool Extensions lets you interact with custom experiences and products in the Replit Workspace, similar to the apps you install on your phone or computer. ### Extend native functionality Extensions can extend and improve the existing functionalities within Replit, like formatting code and editor capabilities. ## Reasons to build an Extension ### Consolidate your tools Developing an Extension allows you to integrate your preferred tools into the Replit environment, serving your specific workflow preferences. ### Personalize your Workspace Extensions empower you to customize Replit to suit your needs, creating a sense of empowerment and productivity. ### Expand your software reach Companies can use Extensions to distribute their products directly to Replit's active Community, accessing a targeted audience within a relevant context. ## Extensions store The Extensions store allows you to view and install from various Workspace Extensions. Extensions store ## Access the store In your Replit App, you can access the Extensions store by navigating to the **Tools** section on the sidebar and selecting **Extensions**. ## Install an Extension In the Extensions store, choose an Extension and select **Activate Extension for your account**. Install Extensions Select **Accept and Activate** to start using the Extension. You'll find installed Extensions in the **Installed** tab alongside the **Store**. You can use the ellipses next to each Extension to manage them, allowing you to uninstall, unlist, un-bless, feature, or delete them from the store. # Keyboard Shortcuts Source: https://docs.replit.com/replit-workspace/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 The Replit.com web app and desktop apps keep separate shortcut preferences. Changes in one environment don't affect the other. To view your keyboard shortcut settings, follow these steps: 1. Open a Replit App to navigate to the workspace. 2. Open the gear icon **User Settings** tab from all tools icon **All tools** in the dock. Alternatively, search for "User Settings" using the magnifying glass icon 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 plus icon**Add shortcut**, located next to the unassigned command, or the pencil icon 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 rollback icon rollback icon. ## Removing keyboard shortcuts To remove a keyboard shortcut, select the trash icon 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 # Ports Source: https://docs.replit.com/replit-workspace/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. computer 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. Localhost ports are only visible on the computer that is hosting them. 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. External ports forward traffic to internal ports, which programs listen to. 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. Clicking the domain in the webview will let you choose what port to view. ## 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. The networking tool shows your port 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. Programs can change the ports they listen to. 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 ``` # Replit Auth Source: https://docs.replit.com/replit-workspace/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. Auth configuration ## 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. ; }; 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. image 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: image ### 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: image ### 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: image 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: image ### 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: image ## 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. image ## 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. image ## 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. image # Console Source: https://docs.replit.com/replit-workspace/workspace-features/console Console shows the output of running your Replit App code, informing you of activity and errors. Console lets you monitor and review logs printed by your running Replit App in real time. You can use information from current and past runs to understand your app's behavior, troubleshoot errors, and optimize performance. When debugging using Agent, include console logs in your prompt to provide context. screenshot of the Console workspace tool ## Features Console provides the following tools to help you understand your app's behavior: * **Real time logging**: View your app's output as it happens * **AI assistance**: Receive suggestions to fix errors reported in the logs * **Run history**: Show logs from prior runs to track changes ## Usage You can access the Console tool directly in your Replit App workspace. From the left **Tool dock**: 1. Select All tools icon **All tools** to see a list of workspace tools. 2. Select Console icon **Console**. From the **Search bar**: 1. Select the magnifying glass icon magnifying glass at the top to open the search tool 2. Type "Console" to locate the tool and select it from the results. Each time you use the **Run** button in your Replit App, Console displays a new entry that includes the following information: * The Command that executed your code * Timestamp information * Standard output and error logs The following screenshot shows the `npm run dev` command used to start the app and log messages from the run: Console log entry showing the command run Client-side logs, such as those generated from HTML, CSS, and JS code, appear only in the Developer tools in the [Preview](/replit-workspace/workspace-features/preview) tool. ### AI-powered debugging When you encounter errors or other information in the logs that you want to understand, select the **Ask Assistant** button at the top of the entry. This automatically opens the **Assistant** tab and submits the log content to Assistant for analysis. ### Log entry commands Console provides the following tools to manage your logs: * **Show Only Latest**: Toggle this control to the **on** position to display only the most recent run. * **Collapse entry**: Select the downward arrow icon downward arrow to the left of the command name to hide the logs. * **Clear past runs**: Select this to delete logs of prior runs. This action is irreversible. ### Network availability You can control the development version of your app's availability online. To stop serving requests to the development URL, select the network off icon globe with slash icon on the right side of the network information line. To enable it, select the network on icon globe icon. To view your development URL, select the `{...}.replit.dev` text in the location bar. Preview development URL location Your app remains accessible in the Preview tool even when set to stop serving requests to the development URL. ### Stop a workflow command You can stop a running workflow command from the Console workspace tool. Select the square button on the right side of the line that contains your Replit App run command to terminate it. To restart your app, use the workflow **Run** button at the top of your workspace. ## Next steps To learn more about related Workspace tools see the following resources: * [Preview](/replit-workspace/workspace-features/preview/): Explore the Preview tool for testing your application and viewing console output * [Assistant](/replitai/assistant/): Learn about Assistant for code help and error resolution * [Shell](/replit-workspace/workspace-features/shell/): Learn how to use the command-line interface in your workspace. # File History Source: https://docs.replit.com/replit-workspace/workspace-features/file-history To make sure you never lose any of your work, Replit auto-saves your code as you write. If you ever lose an edit to your code that you'd like to recover, rewind back in time with File History. Get started by opening a text file in the Workspace and pressing the **History** button in the bottom-right corner. opening history ## Viewing previous versions of a file Once you've opened up File History, you can view previous versions of a file by using the scroll bar, the arrow buttons, or the **left** and **right** arrow keys. scroll bar demo ## Comparing previous versions to the current file Press the Compare Latest toggle in the bottom left hand of the File History pane to see in-line comparisons of your file at that point in time and the latest version. compare latest image ## Restoring a previous version of a file If you want to restore a file to a previous version, just press the `Restore` button, which will restore. Don't worry, you won't erase any history. When you restore to a previous version, it is added as a new version to the file's history. restore history image ## Viewing File History playback You can use the playback feature of File History to watch your file change over time like a movie. This can be useful for creating videos of your programming sessions. replay history video # Using the Git pane Source: https://docs.replit.com/replit-workspace/workspace-features/git-interface The Git pane streamlines version control directly in your workspace, making code tracking, branch management, and collaboration seamless. The Git pane in Replit provides a visual interface for Git operations, eliminating the need to use command-line Git commands. This feature makes version control accessible for beginners while remaining powerful for experienced developers. ## Features The Git pane offers comprehensive version control capabilities directly in your workspace, with a user-friendly interface that simplifies complex Git operations. * **Repository management**: Initialize, connect, and manage Git repositories with GitHub integration * **Commit tracking**: Stage, commit, and view changes across all your files * **Branch operations**: Create, switch between, and merge branches visually * **Conflict resolution**: Identify and resolve merge conflicts with visual assistance * **Shell integration**: Synchronization between Git commands run in Shell and the Git pane ## Usage ### Repository setup 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 The Git pane helps you set up and connect your repository: * **Initialize repository**: Create a new Git repository for your Replit App * **Connect to GitHub**: Link your repository to GitHub for backup and collaboration * **Configure remote**: Set up and manage the connection to your GitHub repository Git pane showing the initialize repository button ### Change management 1. Make changes to any files in your Replit App 2. Open the Git pane from the Tools section 3. Review changes in the **Review Changes** section The Git pane provides tools to manage your code changes: * **Review changes**: See modified files with additions and deletions highlighted * **Stage files**: Select specific files to include in your next commit * **Commit changes**: Save your changes with descriptive messages * **Push updates**: Send your commits to GitHub with a single click Git pane showing commit message field and stage options You can use Replit AI to help generate commit messages that accurately describe your changes. ### Branch management 1. Open the Git pane from the Tools section 2. Select the branch dropdown next to the branch name 3. Create a new branch or select an existing one The Git pane simplifies working with multiple versions of your code: * **Create branches**: Make new branches to develop features separately * **Switch branches**: Move between different versions of your code * **Publish branches**: Share your branches to GitHub * **Pull changes**: Sync with remote updates from collaborators Git pane showing branch creation interface ### Merge conflict resolution 1. Attempt to pull changes when conflicts exist 2. The Git pane will highlight conflicting files 3. Open each conflicted file to see and resolve the conflicts 4. Save the files after resolving conflicts 5. Complete the merge by selecting **Pull** When code from different sources conflicts, the Git pane helps you: * **Identify conflicts**: See exactly which files contain conflicts * **Visualize differences**: Review both versions of the conflicting code * **Resolve issues**: Choose which code to keep or manually edit conflicts * **Finalize merges**: Complete the merge process after resolving conflicts Code editor showing merge conflict markers After resolving a conflicted file, you can remove the conflict markers by removing the lines starting with conflict symbols and save the file. ### Using Git commands in Shell 1. Select **All tools** from the left Tool dock 2. Select **Shell** from the available tools While the Git pane provides a user-friendly interface, power users can use standard Git commands in the Shell for more complex operations. Changes made through either method will be reflected in both places. If you prefer using Git through the command line: * **Command synchronization**: Any Git commands executed in the Shell will automatically sync with the Git pane * **Full Git functionality**: Access advanced Git features not available in the Git pane * **Seamless switching**: Switch between using Shell commands and Git pane as needed **GitHub and GitLab CLI Support**: In addition to standard Git commands, you can also use the [GitHub CLI](https://docs.github.com/en/github-cli) (`gh`) and [GitLab CLI](https://docs.gitlab.com/ee/editor_extensions/gitlab_cli/) (`glab`) in the Shell to manage and connect to external Git repositories. These tools provide enhanced functionality for working with GitHub and GitLab repositories, including pull requests, issues, and other platform-specific features. #### Repository operations * **Clone repository**: `git clone ` * **Initialize repository**: `git init` * **Add remote**: `git remote add origin ` #### Making changes * **Check status**: `git status` (shows modified, added, and deleted files) * **Stage files**: `git add ` or `git add .` (for all files) * **Commit changes**: `git commit -m "your commit message"` * **Push changes**: `git push origin ` * **Pull changes**: `git pull origin ` #### Authentication When working with private repositories, you'll need to authenticate: * For GitHub repositories, use a personal access token instead of your password * To avoid re-entering credentials, you can store them using Replit Secrets: 1. Create a new secret with key `GIT_URL` 2. Set the value to `https://:@github.com//` 3. Use `git push $GIT_URL` to push without typing credentials When using credential secrets, anyone with access to your Replit App can potentially access your Git credentials. For sensitive repositories, consider manually entering credentials each time. # Multiplayer Source: https://docs.replit.com/replit-workspace/workspace-features/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. Multiplayer overview ## 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 To invite users by email address or Replit username: 1. Select person with plus icon **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 person with plus icon **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 Multiplayers popup dialog 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 1. Select person with plus icon **Invite** to open the Multiplayers popup dialog 2. Select the **X** next to the collaborator's username When you remove a collaborator, they instantly lose access to the Replit App workspace. 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**. ### Toggle observation mode To **turn on** observation mode, select the collaborator's profile icon. To **exit** observation mode, select any area in the workspace. 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 person with plus icon **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 # Preview Source: https://docs.replit.com/replit-workspace/workspace-features/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. Preview is the new name for Webview. screenshot of the Preview tool ## 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. From the left **Tool dock**: 1. Select All tools icon **All tools** to see a list of workspace tools. 2. Select Preview icon **Preview**. From the **Search bar**: 1. Select the magnifying glass icon magnifying glass at the top to open the search tool 2. Type "Preview" to locate the tool and select it from the results. ## 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 Eruda 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 wrench icon **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 clear icon 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 filter icon filter icon and entering the text. * **Copy output**: Copy selected console messages by selecting the copy icon copy button. * **Run JavaScript code**: Run JavaScript code in your app's context by selecting the right arrow icon 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 copy icon copy button. Use the select icon 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 filter icon funnel icon to show results that match your text. Enter an empty filter to clear it. * **Copy**: Copy storage information by selecting the copy icon 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 filter icon 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 clear icon clear button. * **Delete selected**: Remove storage items by selecting the delete icon "X" icon. * **Copy**: Copy storage information by selecting the copy icon 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 # Secrets Source: https://docs.replit.com/replit-workspace/workspace-features/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. ; }; export const TeamsCredits = '$40'; export const CoreCredits = '$25'; export const AssistantCheckpointCost = '$0.05'; Agent uses powerful AI technology to transform your ideas into applications and seamlessly add new features by describing what you want. **New with Agent 3** - Extended autonomous builds with minimal supervision, App Testing for self-validation, two ways to start an app (design-first vs. full app first), and Agents & Automations for building your own autonomous systems. ## Features Agent uses powerful AI technology to create your apps, leveraging industry-leading models to deliver the best results. Chat with Agent in your Replit App to receive the following support: * Create full-stack apps from scratch * Add advanced features and integrate complex APIs * Design, create, and modify database structures * Streamline environment setup and dependency management ## Build Modes **New in Agent 3**: Choose between two distinct build approaches to match your development style and project needs. When you submit your initial prompt to create an app, Agent creates a feature list based on your request. You'll then see the question "How do you want to continue?" with two build options: Agent build mode selection interface showing 'Build the full app' and 'Start with a design' options You can also choose to "continue planning" if you want to refine the feature list before building begins. ### Start with a design Perfect for seeing visual results first: * **Quick design phase**: Agent creates a clickable front-end prototype in \~3 minutes * **Visual-first approach**: See how your app will look and feel before building functionality * **Flexible continuation**: Press "Build functionality" to have Agent complete a full working version of your app * **User-controlled pacing**: You decide when to move from visual prototyping to a finished application After the design phase, you'll see options to continue: Interface showing 'Keep iterating on design' and 'Build functionality' options after design phase ### Build the full app Ideal for comprehensive application development: * **Complete functionality**: Agent builds out the full functionality of your app from the start * **Initial build**: Agent creates an initial working application in \~10 minutes * **Comprehensive scope**: Full-stack development with frontend, backend, and integrations After the initial build phase, you can: * **Review the full task list**: See exactly what Agent plans to build next * **Accept or modify**: Approve the plan or request changes before full implementation * **Complete the build** (New in Agent 3): Let Agent finish the comprehensive development (can run for up to 200 minutes) After creating an MVP, you'll see options to continue building: Interface showing 'Dismiss' and 'Continue building' options after MVP creation ## Autonomous Features (New in Agent 3) Agent 3 introduces powerful autonomous capabilities that enable extended, self-supervised development with minimal human intervention. ### App Testing **Automated browser testing** - Agent tests itself using an actual browser, navigating through your application like a real user would. **Key capabilities:** * **Real user simulation**: Agent clicks through your app, testing functionality and user workflows * **Automatic issue detection**: Identifies problems and fixes them during development * **Visual feedback**: Provides video replays of testing sessions for review * **Intelligent timing**: Agent decides when testing would be most valuable **Usage**: Toggle "App testing" in the Agent Tools panel. When enabled, Agent intelligently decides when testing adds the most value. Agent Tools interface showing App testing toggle enabled with description Learn more about [App Testing](/replitai/app-testing) capabilities and troubleshooting. ### Max Autonomy (Beta) **Extended autonomous development** - Agent works for much longer periods with minimal supervision. Learn more about [Autonomy Level settings](/replitai/autonomy-level) and how to choose the right level for your project. **Key benefits:** * **Extended work sessions**: Agent can work much longer without requiring input * **Longer-tasklist handling**: Creates much longer task lists to complete more functionality * **Reduced supervision**: Agent will supervise itself, so you don't have to (runs up to 200 minutes) **Usage**: Turn on "Max autonomy" in the Agent Tools panel under the Autonomy Level based on your comfort level with autonomous development. This feature is currently in Beta. Agent Tools interface showing Max autonomy toggle enabled with Beta label ### Agents & Automations **Beyond traditional apps** - Build intelligent agents, chatbots, and automated workflows that interact with external services. Agents & Automations is currently in beta. Your automation must be deployed to function with external triggers like Slack or Telegram. **Supported use cases:** * **Slack Agents**: Intelligent Slackbots for research, Q\&A, and task automation * **Telegram Bots**: Customer service, scheduling, and entertainment bots * **Timed Automations**: Scheduled workflows for reports, summaries, and monitoring **Getting started**: Select "Agents & Automations" from the Replit homepage app type selector to begin building automated systems. Replit homepage showing Agents & Automations selection with Beta label and prompt input area Learn more about [Agents & Automations](/replitai/agents-and-automations) use cases and setup. ## Usage You can access Agent in your Replit App workspace by selecting the Agent tool. From the **Create a new App** screen, select the **Replit Agent** tab to enter a description of the app you want as shown in the following animation: animation showing Agent in the Create a new App screen If viewing a Replit App started by Agent, you can locate the Agent tool in your workspace in one of the following locations: From the left tool dock, select Agent icon **Agent** as shown in the following animation: animation showing Agent selection from the dock From the **Search bar**: 1. Select the magnifying glass icon magnifying glass at the top to open the search tool 2. Type "Agent" to locate the Agent tool and select it from the results From the Agent tool, you can perform the following actions: * **Chat**: Describe your app or feature in the text area and respond to Agent's follow-up questions * **Add detailed requests**: Upload files or import content from URLs to give Agent more information * **Manage conversations**: Select **New chat** or select previous conversations from the menu icon menu icon to start or resume a conversation * **Track usage**: Select the usage icon usage icon at the top right to view your billing page * **Reverse changes**: Undo changes made by Agent by selecting rollback icon **Rollback to here** ### Chat prompts Agent chat interface with Make, test, iterate header and build options To communicate your request to Agent, enter a **prompt** in the text area. A prompt is a natural language instruction that describes the task you want Agent to perform. In addition to text, you can include the following data in your prompt: * **File attachments**: Drag a file into the text area or select the Paperclip icon paperclip icon * **Web content**: Include text data from a webpage by entering a URL and selecting **Copy page content** * **Webpage screenshots**: Include a screenshot of a webpage by entering a URL and selecting **Take screenshot** Agent operates in three distinct modes to support different types of work: * **Build mode** (default): Agent writes code, modifies files, and implements features directly in your project * **Plan mode**: Brainstorm ideas, plan development work, and collaborate on project architecture without modifying code. Learn more about [Plan mode](/replitai/plan-mode) * **Edit mode**: Make targeted changes to specific files or code sections with precise control **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. ### Checkpoints Agent checkpoint with interactive map and rollback options A **checkpoint** is a comprehensive snapshot of your Replit App that captures completed work from Agent, including workspace contents, AI conversation context, and connected databases. Agent creates checkpoints when it finishes implementing your request, ensuring you only pay for completed functionality. #### How checkpoints work with effort-based pricing Agent's new effort-based pricing creates checkpoints that reflect the actual work performed: * **One checkpoint per request**: Agent bundles all work for your request into a single, meaningful checkpoint * **Variable pricing**: Simple changes cost less, while complex builds cost more based on the effort required * **Transparent costs**: Each checkpoint shows exactly what you're paying for that completed work * **No intermediate billing**: You're not charged for Agent's thinking or planning process Each checkpoint lets you perform the following actions: * **Rollback**: Undo changes made by Agent and return to the state of the previous checkpoint, including workspace contents and AI memory; connected databases can also be restored when selected * **Track usage**: Hover over the usage icon usage icon in a checkpoint to view the amount billed for that checkpoint For comprehensive details about what checkpoints capture and how rollbacks work across your entire development environment, see [Checkpoints and Rollbacks](/replitai/checkpoints-and-rollbacks). Agent uses effort-based pricing where you pay based on the complexity and scope of your request. Simple changes typically cost less than complex builds. Initial planning and proposal stages are free - you only pay when Agent implements approved changes. Learn more about [Agent billing](/billing/ai-billing#agent-billing). ### Progress tab The **Progress** tab shows a record of Agent's actions in real-time. Access it through the Tools dock or search bar to monitor Agent's progress and navigate directly to relevant files. **Key features:** * **Real-time updates**: Monitor Agent's progress with live activity feed * **Chronological history**: Review Agent's activities to understand changes and troubleshoot issues * **File navigation**: Click links to jump directly to files Agent is working on ## Getting the most from Agent ### Best practices for prompts * **Be specific**: Describe exactly what you want your app to do * **Provide context**: Include relevant files, URLs, or examples * **Start simple**: Begin with basic functionality and add complexity gradually * **Use examples**: Show Agent similar apps or features you want to emulate * **Choose your mode thoughtfully**: Consider your timeline, certainty about requirements, and development style ### Managing costs effectively * **Start with free planning**: Review Agent's implementation plan before approving work * **Use simple requests**: Break complex projects into smaller, focused tasks * **Set spending limits**: Configure [usage alerts and budgets](/billing/managing-spend) to control costs * **Monitor usage**: Track checkpoint costs to understand pricing patterns ## Next steps Ready to start building with Agent? Here's how to begin: 1. **Create your first app**: Use the [Create with AI quickstart](/getting-started/quickstarts/ask-ai/) 2. **Choose your build mode**: Start with a design for visual-first development or build the full app for comprehensive functionality 3. **Learn effective prompting**: Follow our [vibe coding guide](/tutorials/how-to-vibe-code) 4. **Set up billing controls**: Configure [spending management](/billing/managing-spend) 5. **Explore Agent 3 features**: Try [App Testing](/replitai/app-testing) for self-validation, [Autonomy Level](/replitai/autonomy-level) for customized workflows, and [Agents & Automations](/replitai/agents-and-automations) for building intelligent systems Learn more about [Agent pricing](/billing/ai-billing#agent-billing) or explore other [Replit AI tools](/category/replit-ai). # Agents & Automations Source: https://docs.replit.com/replitai/agents-and-automations Build intelligent agents, chatbots, and automated workflows using Replit Agent. Create Slackbots, Telegram bots, scheduled automations, and more. export const AiPrompt = ({children}) => { return
{children}
; }; Replit homepage showing Agents & Automations selection with Beta label and prompt input area **Beta Feature**: Agents & Automations is currently in beta. Features and functionality may change. Some limitations apply, and not all use cases are fully supported yet. ## Features ### Supported use cases **Currently available:** * **Slack Agent** - Create intelligent Slackbots that can answer questions, integrate with APIs, and automate tasks * **Telegram Agent** - Build Telegram bots for customer service, scheduling, entertainment, and more * **Timed Automation** - Set up scheduled workflows that run automatically at specified times **Coming soon:** * **Custom webhook triggers**: Respond to any external event or API call using a webhook URL * **Additional pre-built triggers**: Discord, WhatsApp, and more ### Additional functionality * **Rich integrations**: Connect with Outlook, Spotify, Notion, Linear, GitHub, and more * **Testing environment**: Test your agents and visualize workflows before deployment * **Cloud deployment**: Automatically configured for 24/7 availability with Autoscale or Scheduled deployments ## How to get started ### Step 1: Select Agents & Automations From the Replit homepage after logging in, **select "Agents & Automations"** from the app type selector on the homepage. Replit homepage showing Agents & Automations selection with Beta label and prompt input area ### Step 2: Choose your trigger type Next, you'll see a trigger type selector. Choose from the supported options: * **Slack** - Create intelligent Slackbots that integrate with your workspace * **Telegram** - Build Telegram bots for various use cases * **Timed Automation** - Set up scheduled workflows that run automatically ### Step 3: Enter your prompt **Enter your prompt** describing what you want your agent to do. ### Step 4: Let Agent build your automation Agent will create your automation based on your prompt and selected trigger type, including all necessary integrations and deployment configuration. Agent testing environment showing a StockReporter automation with workflow visualization and testing interface Once your project is created, you'll find a dedicated **Agents & Automations pane** in your workspace: * **Location**: Opens under the preview area in your workspace * **Functions**: * View and interact with your agent * Test chatbot functionality before deployment * Visualize automation workflows * Monitor logs and debug issues * **Testing**: Chat with your agent directly in the pane to test responses and behavior ### Deployment Requirement **Deployment Required**: Your agent or automation must be deployed to function with external triggers like Slack, Telegram, or scheduled automations. The testing pane works for development and testing, but live triggers require deployment. Agent will automatically prompt you to deploy your project when it's ready. Choose the appropriate deployment type: * **Autoscale deployments** - For chatbots and event-driven workflows * **Scheduled deployments** - For time-based automations ## Supported use cases and examples ### Slack Agent examples **Research assistant with Perplexity integration** Create an AI Slackbot assistant that can answer research questions using the Perplexity API. When someone asks a question in the #research channel, it should search for current information and provide comprehensive answers with sources. **Codebase Q\&A with GitHub integration** Create an AI Slackbot that can answer questions about my codebase using a GitHub integration. It should be able to explain functions, find files, and help with debugging by analyzing our repository. **Email assistant with Outlook integration** Create an AI Slackbot that can answer questions about my Outlook emails. It should help me find specific emails, summarize conversations, and provide quick responses to common email queries. ### Telegram Agent examples **Business assistant with calendar scheduling** Create an AI business assistant that can schedule emails on my Outlook calendar. Users should be able to request meeting times and the bot will find available slots and send calendar invites. **Music recommendation bot with Spotify** Make a fun AI chatbot that can return a Spotify song for any message I send describing the vibe I want. It should understand mood descriptions and suggest perfect tracks. **Fictional character bot** Make an AI bot that is a fictional character - specifically Sherlock Holmes. It should respond to messages in character, solve puzzles, and engage in detective-style conversations. ### Timed Automation examples **Daily Linear task summary** Send me an email every morning summarizing my new tasks from Linear. Include task priorities, due dates, and project context to help me plan my day. **Email digest automation** Send me an email every 6hrs with a summary of all my emails. Group them by importance and highlight any urgent messages that need immediate attention. **Weekly competitor analysis** Every week at 8am on Monday, send me a summary of any news about my competitors using web search. Focus on product updates, funding news, and market developments. ## Next steps **Quick start ideas:** * **Slack**: Build a research assistant or codebase Q\&A bot * **Telegram**: Create a scheduling assistant or entertainment bot * **Timed**: Set up daily summaries or weekly reports Want to be notified when new triggers become available? Follow [@Replit](https://twitter.com/replit) for the latest updates on Agents & Automations. Learn more about [Replit Agent](/replitai/agent) and other [Agent 3 autonomous features](/replitai/agent#autonomous-features-new-in-agent-3), or explore additional [AI-powered features](/category/replit-ai). # App Testing Source: https://docs.replit.com/replitai/app-testing Agent's self-testing feature that validates your app's functionality using an actual browser, with visual feedback and automatic issue resolution. **App Testing is a powerful new feature in Agent 3** that allows Agent to test itself using an actual browser. Agent tests the apps it builds by navigating through your application like a real user would, clicking around and validating functionality. This self-testing capability helps ensure your app works correctly and allows Agent to catch and fix issues automatically. **New in Agent 3**: App Testing represents a major advancement in Agent's autonomous capabilities, enabling more reliable and higher-quality app development. ## How App Testing works When App Testing is enabled, Agent will periodically decide to test itself when it thinks enough has changed to deem it necessary. Agent doesn't test after 100% of user messages, but intelligently determines when testing would be most valuable. Watch App Testing in action as Agent navigates through your app: