@font-face {
    font-family: 'ABC diatype';
    src: url('https://cdn.replit.com/dotcom/fonts/ABCDiatypePlusVariable.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
h1,
h2,
h3 {
  font-family: 'ABC diatype';
  letter-spacing: normal !important;
}

#card-group {
  background-color: #F8F8F9;
}

.card {
  background-color: transparent !important;
}
#home-search-entry {
  outline: 4px solid rgb(229, 231, 235);
}

.dark #home-search-entry {
  outline: 4px solid rgb(21, 21, 21);
}

a[href*="mintlify.com"] {
  display: none !important;
}

#content-area {
  max-width: 640px;
  margin: 0 auto;
}

@media screen and (min-width: 1280px) {
  #content-area {
    min-width: 680px;
    max-width: 680px !important;

  }
}

@media screen and (min-width: 1536px) {
  #content-area {
    min-width: 680px;
    max-width: 720px !important;
  }
}

#content-area img:not(.no-style):not(.icon-svg) {
  max-height: 40vh;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

#content-area .icon-svg {
  display: inline;
  max-height: none;
  margin: 0;
  border-radius: 0;
}

.dark .icon-svg {
  filter: invert(1);
}


/* Custom styles for copy buttons */
.copy-button {
  font-weight: 500;
  min-width: 90px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 10;
  transition: all 0.2s ease;
}

/* Mobile styles for copy button - hide on mobile */
@media screen and (max-width: 768px) {
  .copy-button, #copy-md-button {
    display: none !important;
  }
}

/* Dark mode styling */
.dark {
  .copy-button {
    background-color: rgba(17, 24, 39, 0.4);
    color: #e5e7eb;
    border-color: rgba(75, 85, 99, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  .copy-button:hover {
    background-color: rgba(31, 41, 55, 0.7) !important;
    border-color: rgba(107, 114, 128, 0.7) !important;
  }
}

.copy-button:focus {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: 2px;
}

.copy-button:active {
  transform: translateY(1px);
}

.copy-button:disabled {
  opacity: 0.7;
  cursor: default;
}

.copy-icon {
  flex-shrink: 0;
}

/* Hover effect enhancement */
.copy-button:not(:disabled):hover .copy-icon {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

/* Remove the old dark mode container styles that are no longer needed */
@media (prefers-color-scheme: dark) {
  .copy-buttons-container {
    background-color: rgba(31, 41, 55, 0.5);
  }
}

iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

iframe[src*="youtube.com"] {
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 16/9;
}

/* Navigation collapse styles */
ul[data-collapsed="true"] > li:not(:first-child) {
  display: none !important;
}

h5 svg {
  transition: transform 0.2s ease-in-out;
}


// Custom JavaScript to inject Copy button into Mintlify docs content area
(function() {
  // Only run in browser environment
  if (typeof window === 'undefined' || typeof document === 'undefined') return;

  // Debug flag
  const DEBUG = false; // Set to false in production
  
  function debugLog(...args) {
    if (DEBUG) console.log('[CopyButton]', ...args);
  }
  
  debugLog('Script loaded');

  // Track if we're currently processing a mutation to avoid loops
  let isProcessingMutation = false;
  // Track if button is already injected
  let buttonInjected = false;
  // Debounce timer
  let debounceTimer = null;

  // Inject button immediately
  injectButton();

  function injectButton() {
    // If already injected, don't do it again
    if (buttonInjected) {
      return;
    }
    
    // Find the content area directly
    const contentArea = document.getElementById('content-area');
    
    // If content area doesn't exist yet, retry immediately
    if (!contentArea) {
      requestAnimationFrame(injectButton);
      return;
    }
    
    // Check if button already exists
    if (document.getElementById('copy-md-button')) {
      debugLog('Button already exists, skipping injection');
      buttonInjected = true;
      return;
    }
    
    // Find the header element within the content area
    const header = contentArea.querySelector('header');
    if (!header) {
      requestAnimationFrame(injectButton);
      return;
    }
    
    // Create the button container with dropdown
    const buttonContainer = document.createElement('div');
    buttonContainer.className = 'relative inline-block';
    buttonContainer.style.position = 'absolute';
    buttonContainer.style.right = '1rem';
    buttonContainer.style.top = '1rem';
    buttonContainer.style.zIndex = '10';

    const mdButton = document.createElement('button');
    mdButton.id = 'copy-md-button';
    mdButton.className = 'copy-button flex items-center gap-2 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 py-1.5 px-3 rounded text-sm transition-colors border border-gray-200 dark:border-gray-700';
    
    // Create dropdown toggle button
    const dropdownToggle = document.createElement('button');
    dropdownToggle.className = 'ml-1';
    dropdownToggle.style.padding = '4px'; // Add padding to make the click target bigger
    dropdownToggle.innerHTML = `
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 9l6 6 6-6"/>
      </svg>
    `;

    // Create dropdown menu
    const dropdownMenu = document.createElement('div');
    dropdownMenu.className = 'absolute left-0 mt-1 w-full bg-white dark:bg-gray-900 rounded shadow-lg border border-gray-200 dark:border-gray-700 hidden';
    dropdownMenu.style.minWidth = '180px';
    dropdownMenu.innerHTML = `
      <div class="py-1">
        <button class="copy-page-btn w-full text-left px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800">
          Copy as Markdown
        </button>
        <a href="https://docs.replit.com${window.location.pathname}.md" target="_blank" rel="noopener noreferrer" class="block px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800">
          View as Markdown
        </a>
      </div>
    `;

    // Add mobile-specific styles
    const mobileStyle = document.createElement('style');
    mobileStyle.textContent = `
      @media (max-width: 768px) {
        #copy-md-button {
          min-height: 44px;
          min-width: 44px;
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
        }
      }
    `;
    document.head.appendChild(mobileStyle);
    
    // Create icon element
    const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    iconSvg.setAttribute('width', '16');
    iconSvg.setAttribute('height', '16');
    iconSvg.setAttribute('viewBox', '0 0 24 24');
    iconSvg.setAttribute('fill', 'none');
    iconSvg.setAttribute('stroke', 'currentColor');
    iconSvg.setAttribute('stroke-width', '2');
    iconSvg.setAttribute('stroke-linecap', 'round');
    iconSvg.setAttribute('stroke-linejoin', 'round');
    iconSvg.className = 'copy-icon';
    
    // Create path for the copy icon
    const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path1.setAttribute('d', 'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2');
    
    const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path2.setAttribute('d', 'M14 2H10a2 2 0 0 0-2 2v2h8V4a2 2 0 0 0-2-2z');
    
    // Add paths to SVG
    iconSvg.appendChild(path1);
    iconSvg.appendChild(path2);
    
    // Create text span
    const textSpan = document.createElement('span');
    textSpan.textContent = 'Copy page';
    
    // Add icon and text to button
    mdButton.appendChild(iconSvg);
    mdButton.appendChild(textSpan);
    mdButton.appendChild(dropdownToggle);
    
    // Add click handlers
    mdButton.addEventListener('click', (e) => {
      if (e.target === dropdownToggle || dropdownToggle.contains(e.target)) {
        e.stopPropagation();
        dropdownMenu.classList.toggle('hidden');
      } else {
        copyMarkdown();
      }
    });

    // Add click handler for copy button in dropdown
    dropdownMenu.querySelector('.copy-page-btn').addEventListener('click', (e) => {
      e.stopPropagation();
      copyMarkdown();
      dropdownMenu.classList.add('hidden');
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', () => {
      dropdownMenu.classList.add('hidden');
    });

    // Assemble the button container
    buttonContainer.appendChild(mdButton);
    buttonContainer.appendChild(dropdownMenu);
    
    // Insert the button into the header
    try {
      isProcessingMutation = true;
      header.appendChild(buttonContainer);
      buttonInjected = true;
      
      // Reset processing flag after a short delay
      setTimeout(() => {
        isProcessingMutation = false;
      }, 50);
    } catch (e) {
      debugLog('Error inserting button:', e);
      isProcessingMutation = false;
    }
  }
  
  // Improved copy function with fallbacks and error handling
  function copyMarkdown() {
    // Get the current URL and convert it to a markdown URL
    const currentPath = window.location.pathname;
    // Remove trailing slash if present
    const cleanPath = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;
    // Add .md extension
    const mdUrl = `${cleanPath}.md`;
    
    // Show loading state
    const button = document.getElementById('copy-md-button');
    if (!button) return;
    
    const originalText = button.querySelector('span').textContent;
    button.querySelector('span').textContent = 'Loading...';
    
    // Disable the button during fetch
    button.disabled = true;
    
    fetch(mdUrl)
      .then(response => {
        if (!response.ok) {
          throw new Error(`Failed to fetch markdown: ${response.status}`);
        }
        return response.text();
      })
      .then(mdContent => {
        copyToClipboard(mdContent)
          .then(() => {
            // Show success message
            button.querySelector('span').textContent = 'Copied!';
            
            // Reset after 2 seconds
            setTimeout(() => {
              button.querySelector('span').textContent = originalText;
              button.disabled = false;
            }, 2000);
          })
          .catch(err => {
            debugLog('Error copying to clipboard:', err);
            button.querySelector('span').textContent = 'Copy failed';
            
            // Reset after 2 seconds
            setTimeout(() => {
              button.querySelector('span').textContent = originalText;
              button.disabled = false;
            }, 2000);
          });
      })
      .catch(err => {
        debugLog('Error fetching markdown:', err);
        
        // Reset button on error
        button.querySelector('span').textContent = 'Error loading';
        
        // Reset after 2 seconds
        setTimeout(() => {
          button.querySelector('span').textContent = originalText;
          button.disabled = false;
        }, 2000);
      });
  }
  
  // Robust clipboard copy function with comprehensive fallbacks
  function copyToClipboard(text) {
    // Primary method: Modern Clipboard API
    if (navigator.clipboard && window.isSecureContext) {
      debugLog('Using Clipboard API');
      
      // Try the standard writeText method first
      return navigator.clipboard.writeText(text)
        .catch(err => {
          debugLog('writeText failed, trying ClipboardItem approach for Safari', err);
          
          // Safari-specific fallback using ClipboardItem
          if (navigator.clipboard.write && ClipboardItem) {
            const type = 'text/plain';
            const blob = new Blob([text], { type });
            const data = [new ClipboardItem({ [type]: blob })];
            
            return navigator.clipboard.write(data);
          } else {
            // If ClipboardItem isn't available, fall back to execCommand
            return fallbackCopyToClipboard(text);
          }
        });
    } else {
      // Fallback for older browsers or non-secure contexts
      debugLog('Clipboard API not available, using fallback');
      return fallbackCopyToClipboard(text);
    }
  }
  
  // Fallback method using document.execCommand
  function fallbackCopyToClipboard(text) {
    return new Promise((resolve, reject) => {
      try {
        // Create temporary textarea
        const textArea = document.createElement('textarea');
        textArea.value = text;
        
        // Make the textarea part of the visible DOM to ensure it works on iOS
        textArea.style.position = 'fixed';
        textArea.style.left = '0';
        textArea.style.top = '0';
        textArea.style.width = '2em';
        textArea.style.height = '2em';
        textArea.style.opacity = '0';
        textArea.style.padding = '0';
        textArea.style.border = 'none';
        textArea.style.outline = 'none';
        textArea.style.boxShadow = 'none';
        textArea.style.background = 'transparent';
        document.body.appendChild(textArea);
        
        // Ensure textarea is visible and focusable
        textArea.focus();
        textArea.select();
        
        // Execute copy command
        const successful = document.execCommand('copy');
        
        // Clean up
        document.body.removeChild(textArea);
        
        if (successful) {
          resolve();
        } else {
          reject(new Error('Unable to copy to clipboard'));
        }
      } catch (err) {
        reject(err);
      }
    });
  }
  
  // Function to handle route changes in SPA with debounce
  function handleRouteChange() {
    // Clear any existing timer
    if (debounceTimer) {
      clearTimeout(debounceTimer);
    }
    
    // Set a new timer
    debounceTimer = setTimeout(() => {
      // Reset injected flag
      buttonInjected = false;
      
      // Remove existing button if present
      const existingButton = document.getElementById('copy-md-button');
      if (existingButton) {
        isProcessingMutation = true;
        existingButton.remove();
        
        // Reset processing flag after a short delay
        setTimeout(() => {
          isProcessingMutation = false;
        }, 50);
      }
      
      // Inject button immediately after route change
      requestAnimationFrame(injectButton);
    }, 100); // 100ms debounce
  }

  // Set up observer to detect navigation changes
  function setupObserver() {
    const observer = new MutationObserver((mutations) => {
      // Skip if we're currently processing a mutation to avoid loops
      if (isProcessingMutation) {
        return;
      }
      
      // Check if content area exists and if our button is still there
      const contentArea = document.getElementById('content-area');
      const button = document.getElementById('copy-md-button');
      
      if (contentArea && !button) {
        // Content area exists but button doesn't - reinject
        buttonInjected = false;
        handleRouteChange();
      }
    });

    // Start observing the document body for changes
    observer.observe(document.body, { 
      childList: true, 
      subtree: true,
      attributes: false,
      characterData: false
    });
    
    // Also listen for popstate events (browser back/forward)
    window.addEventListener('popstate', handleRouteChange);
  }
  
  // Set up the observer
  setupObserver();
  
  // Also try immediately and retry a few times with requestAnimationFrame for smoother loading
  requestAnimationFrame(injectButton);
})(); 

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

Overview

Legal and Security

Replit

Replit is a browser-based platform where you can effortlessly create and share apps without installation or setup.

Introduction

Replit Apps help you transform your ideas into apps anyone can access, anywhere.

Replit Apps

One of the great parts about Replit is that _everything_ you make can be shared with the world. Since your code is hosted in the cloud, it's as simple as one click!

Collaboration

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.

Visibility

Replit App Visibility

Learn how to configure your Replit App using .replit and replit.nix files to manage dependencies, run commands, environment variables, and deployment settings.

Advanced Configuration

Replit App Configuration

Embedding a Replit App in your website or documentation allows you to display a read-only view of your code, meaning viewers can see but not edit the code. This feature is particularly useful for showcasing examples, tutorials, or code snippets directly within your content.

App Embed

Replit App Embed

Replit's AI-powered tools help you code faster, solve problems more efficiently, and deliver production-ready apps.

Replit AI

Replit Agent uses AI to set up and create apps from scratch. Describe your app in everyday language, and it can set up and create your Replit App in minutes.

Replit Agent

Replit Assistant uses AI to help you create and polish your app quickly. Type what you want in everyday language, and it can add new features or fix problems for you. Assistant can also analyze your code to explain what it does and suggest the next lines as you type.

Replit Assistant

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 deploy your apps from any device.

The Workspace is like an IDE (Integrated Development Environment), providing a comprehensive set of development tools and features for creating, debugging, and managing your software. It helps you quickly and easily create, modify, and collaborate on your code.

Introduction to the Workspace

A Workflow is a easily configurable 'Run' button that can run any command(s) you'd like.

Workflows

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.

Dependency Management

Learn how to set up and use SSH to connect your local development environment to Replit Apps for secure remote access and file synchronization.

Extensions are applications you can develop to enhance the functionality and tools available within the Replit Workspace.

Extensions

Learn how ports work in Replit's cloud environment, including port forwarding, configuration, and troubleshooting for your web applications.

Ports

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

Keyboard Shortcuts

If your Replit App can be used as a good starting point for other project, you might want to submit it as a template! Let's learn what a Replit template is and how to make a good one.

Templates

Share your Replit Apps with the world in just a few clicks.

Learn about storage and database options on Replit, including object storage, a SQL database, and the Replit Key-Value Store.

Storage and Databases

Database is a Replit workspace tool that lets you set up a database for your apps to store and query your data.

Database

Learn how to use Replit's built-in key-value database to store and manage data in your Replit Apps. No configuration required - just import and start coding.

Key-Value Store

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

Mobile App

Replit Mobile App

The Replit Desktop App for macOS, Windows, and Linux lets you create apps using all Replit's tools in a focused coding environment.

Desktop App

Replit Desktop App

Learn about Replit Core membership features and benefits to enhance your development experience with advanced tools and capabilities.

Replit Core

Learn about Replit Core membership features including AI coding assistance, powerful workspaces, monthly credits, deployments, and exclusive perks.

Learn how to earn Cycles by completing coding tasks or post your own Bounties to get help with development projects on Replit.

Bounties

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.

Earning with Replit Bounties

Learn how to post a bounty, manage applications, and review work submissions on Replit's bounty platform to get help with your projects.

Posting and awarding a Bounty

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.

Resources for Bounty Hunters

Learn how to communicate effectively during bounty projects with templates for both bounty hunters and posters to use throughout the process.

Bounty Templates

Learn how to post and complete Bounties on Replit, including pricing guidelines, payment processes, and best practices for both Bounty Posters and Hunters.

Frequently Asked Questions (FAQ)

Learn how to add, customize, and embed a Made with Replit badge in your Replit App's Webview to showcase your project and link back to your cover page.

Add a "Made with Replit" badge to your Webview

Command Line User Interface, often referred to as the CLUI is an interactive command bar from which you can perform a variety of actions. There are three variations of the CLUI located across Replit- Account, Shortcuts, and Workspace.

CLUI, the Graphical CLI

Learn how to implement Google OAuth authentication in a Flask app on Replit, including user login and Google Sheets API integration.

Google Authentication in Python and Flask

Find answers to common questions about Replit, including account management, troubleshooting, billing support, and using key features.

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

Create a cat image generator

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.

Create a file converter with AI

Build an app that connects to Google Sheets using Python. Learn how to fetch and process spreadsheet data on Replit.

Create a Google Sheets integration

Build a fun Discord bot that tells jokes. Learn how to use the Discord API and deploy your bot on Replit.

Create a Discord bot

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

Create a Next.js app

Build and deploy a web application using Flask on Replit. Learn how to use autoscaling for reliable web hosting.

Create a Flask app

Build and deploy a high-performance API using FastAPI on Replit. Learn how to use autoscaling for reliable API hosting.

Create a FastAPI service

Build and deploy a modern static blog using Astro on Replit. Learn how to use static deployments for fast, reliable content delivery.

Create a static blog with Astro

Build a bot that scrapes HackerNews and sends updates to Slack. Learn how to use scheduled deployments and integrate with external services.

Create a HackerNews Slack bot

Build a Slack bot that summarizes channel activity using GPT-4. Learn how to integrate AI with Slack's API.

Create a Slack channel summarizer

Learn how to connect to your Replit database from your Replit App.

Add a SQL database

Connect your app to a SQL database

Replit's billing system helps you optimize your spending on the platform.

Billing

Learn how billing and credits work for Replit AI features including Agent and Assistant usage, checkpoints, and managing your spend.

Replit AI Billing

Summary of the Deployment pricing changes coming in spring 2025.

Deployment Repricing (Feb 2025)

Learn how Replit bills for deployments and databases, including outbound data transfer, compute units, requests, and PostgreSQL usage metrics.

Deployments and Database Billing

Set up usage alerts and budgets to monitor and control costs for usage-based billing services on Replit. Get notified when you reach spending thresholds.

Managing Your Spend

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

Licensing information

Learn about warnings, banned community access, and site bans in Replit.

Strike system FAQ

Learn about Replit's account inactivity policy, when accounts may be terminated, and how paid subscriptions affect account status.

Account Inactivity

Learn how to permanently delete your account and personal information from Replit using either the web browser or mobile app.

Deleting your data

We understand that your code, applications, and user-data hosted on Replit are very important, so we take seriously our responsibility to safeguard it. After all, we use Replit to build our business too!

Security

Replit offers different support options for all Replit users, members and free.

Support Policy

At Replit, we strive to create a fun and creative community that is also trusted and safe. To achieve this goal, we have implemented rules and policies that promote positive behavior and protect our users. In this document, you will find a summary of our key rules, tips on how to report any concerns, and information on where you can learn more.

Trust and Safety at Replit

Learn about Replit's resource limits, including CPU, RAM, storage, and network restrictions that apply to Replit Apps based on your plan.

Usage Quota & Limits

Learn about Replit's commitment to web accessibility, WCAG 2.1 compliance goals, current accessibility status, and how to provide feedback about accessibility features.

Replit web accessibility statement

Build and ship software faster with your team using Replit's collaborative development platform.

Replit Teams

Learn about Replit's security practices, data protection, and compliance standards

Information Security

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

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

Managing Seats

Learn how to cancel your organization subscription and understand what happens to your resources when you delete your organization.

Cancellation

Welcome! These docs contain docs, examples, and API references for the Replit Extensions platform.

Extension Developer Docs

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.

Create an Extension

Create your first Replit Extension

Replit provides a few templates to help you get started with your extension. You can find them in the "Create Replit App" menu, or fork one by clicking a link below.

Extension Templates

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/).

Key Concepts

Learn how to build Replit extensions using React, Extension Devtools, and API integrations. Get started with templates or manual installation.

Development

Learn how to use Replit's Extension Devtools to manage metadata, file handlers, and tools while developing your extension.

Extension Devtools

Learn how to build a full-stack extension by creating a separate backend API server to handle requests from your extension client on Replit.

Full-Stack

Learn how to install and initialize the Replit Extensions API client using script tags or npm packages for your project.

Manual Installation

Learn how to prepare and publish your Replit Extension to the store, including icon design, build configuration, and the review process.

Publish your Extension

Learn how to build Replit Extensions with step-by-step examples including a JSON editor, snippet manager, and JavaScript command tools.

Examples

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

JSON Editor

Learn how to build a snippet manager extension that lets developers store and organize code snippets directly within the Replit workspace.

Snippet Manager

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

JavaScript Commands

Complete reference documentation for all Replit extension APIs, including authentication, commands, filesystem access, and workspace integration.

API Reference

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

Manifest

Extension manifest reference

Learn how to authenticate users securely in your Replit extensions using the auth API module. Get and verify JWT tokens for user authentication.

Authentication API

auth API

Learn how to use background scripts to run persistent code in your Replit extension from startup until the workspace closes.

Background Script API

Register and manage custom commands for the Replit command bar and other extension points using the commands API module.

commands API

Access Replit's GraphQL API to retrieve user information, Replit App metadata, and other platform data through the Extensions API.

Data API

data API

Learn how to use the debug API module to log data, warnings, and errors to the Extension Devtools in Replit extensions.

Debug API

debug API

Access and manage editor preferences in Replit Apps using the editor API module. Get settings like font size, indentation, and code intelligence.

Editor API

editor API

Learn how to run shell commands in Replit Apps using the exec API module. Includes methods for spawning processes and executing commands.

Exec  API

exec API

Create, read, modify, and watch files and directories in your Replit App using the filesystem API methods and types.

Filesystem API

fs API

Learn how to initialize a Replit extension, establish a handshake with the Replit App, and manage event listeners using the init() method.

Initialization API

init API

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

Me API

me API

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

Billing

Security

Support and accessibility

Legal and Security

Reporting Abuse on Replit

Copyright claims and takedown requests

Licensing information

Strike system FAQ

Account Inactivity

Deleting your data

Security

Support Policy

Trust and Safety at Replit

Usage Quota & Limits

Replit web accessibility statement