@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 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);
}


/* Content area responsive widths */
#content-area {
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 1280px) {
  #content-area {
    max-width: 65%;
  }
}
@media screen and (min-width: 1536px) {
  #content-area {
    max-width: 55%;
  }
}

@media screen and (min-width: 1920px) {
  #content-area {
    max-width: 45%;
  }
}

@media screen and (min-width: 2560px) {
  #content-area {
    max-width: 40%;
  }
}

@media screen and (min-width: 3840px) {
  #content-area {
    max-width: 35%;
  }
}

@media screen and (min-width: 5120px) {
  #content-area {
    max-width: 20%;
  }
}

/* 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;
}


// 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 Copy button with icon
    const mdButton = document.createElement('button');
    mdButton.id = 'copy-md-button';
    mdButton.className = 'copy-button flex items-center gap-2 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 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 absolute right-4 top-4 z-10';
    
    // Add mobile-specific styles
    const mobileStyle = document.createElement('style');
    mobileStyle.textContent = `
      @media (max-width: 768px) {
        #copy-md-button {
          position: absolute;
          right: 16px;
          top: 16px;
          z-index: 100;
          background-color: white;
          padding: 8px 12px;
          min-height: 44px;
          min-width: 44px;
          touch-action: manipulation;
          -webkit-tap-highlight-color: transparent;
        }
        .dark #copy-md-button {
          background-color: #1a1a1a;
        }
      }
    `;
    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);
    
    // Add click handlers
    mdButton.addEventListener('click', copyMarkdown);
    
    // Insert the button into the header
    try {
      isProcessingMutation = true;
      
      // Make header position relative to contain the absolute positioned button
      header.style.position = 'relative';
      header.appendChild(mdButton);
      
      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 how to create, manage, and customize themes in Replit. Change colors, syntax highlighting, and UI elements to make your coding environment your own.

Overview

Themes

Replit

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

Introduction

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

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

Configure a Replit App

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

Intro to 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.

Learn how to use Replit's native desktop application for a focused coding environment with enhanced features, custom shortcuts, and deep linking support.

Replit Desktop App

Learn how to code, collaborate, and deploy projects from your phone using the Replit mobile app. Access key features like real-time collaboration and instant deployment.

Replit Mobile App

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 essential keyboard shortcuts to boost productivity in Replit. Includes basic editing commands, navigation shortcuts, and how to use the command palette.

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

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

Replit AI

Learn how to use the Replit Agent, an AI-powered tool that helps you build software projects through natural language prompts and interactive assistance.

Replit Agent

Learn how to use Replit Assistant to improve code, fix errors, and build features. Includes setup, usage tips, and billing information for Basic and Advanced modes.

Replit Assistant

Replit AI is a code completion tool that provides suggestions based on the code in your current file. To use it, simply start coding and the suggestions will appear inline.

Complete Code

Replit's Replit AI Chat is an chat-based AI assistant that enables users to quickly get answers to their coding-related questions directly in the Workspace, without ever leaving the page.

Replit AI Chat

Replit AI can give you step-by-step natural language explanations of your code with Explain Code. This feature is especially useful when trying to understand other people's code or code you wrote in the past.

Explain Code

With Edit Code, Replit AI can refactor your code to run faster, translate it into another language, and make your code easier to read

Edit Code

Learn how to use Replit AI's Generate Code feature to create code from natural language prompts in your Replit App editor.

Generate Code

Learn how to deploy your Replit Apps and manage cloud storage and databases to build production-ready applications.

Cloud Services

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)

Find guides and documentation for advanced Replit features, including compute settings, authentication, hosting, and project management tools.

Additional Resources

This document will help you improve your Replit App's performance by changing its computing abilities. You can make these changes by adjusting vCPUs (think of them as the brain) and RAM (similar to memory).

Edit Compute specification  (Previously Boosts)

Learn about Replit's hosting options including Autoscale, Reserved VMs, and Static Hosting for deploying your web applications.

Hosting webpages

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.

Private Replit App

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!

Sharing Your Replit App

Learn how to add user authentication to your Flask web application using Replit App Auth. Follow this step-by-step guide to implement secure user login.

Authenticating users with Replit App Auth

Learn how to add user authentication to your Replit Apps using Replit App Auth, a simple solution that lets users sign in with their Replit accounts.

Replit App Auth 2.0

Replit offers virtual network computing (VNC) functionality. VNC is a mature virtual desktop protocol that allows your Replit App to stream a native desktop to your web browser. This protocol allows native applications (developed in Python, Java, C++, etc.) to open desktop windows as they would on any physical computer.

Streaming native graphics using VNC

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.

Embedding Replit App

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

Learn how to organize, search, and control privacy settings for your Replit Apps. Includes guidance on public vs private apps and starring favorites.

Managing your Replit App

Learn about Replit's outbound transfer limits, how to monitor usage, and what happens when you reach your limit. Includes guidance for managing data transfer.

Outbound Data Transfer Limits

Learn how to set up and run Ruby on Rails applications on Replit, including importing from GitHub, configuring hosts, and troubleshooting common issues.

Running Rails on Replit

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 about Replit's billing system, including AI usage, deployments, databases, and team plans. Manage costs and set usage alerts.

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 about Replit's policies on security, privacy, licensing, usage limits, and other legal matters to help you use the platform safely and effectively.

Legal and Security

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 how to manage billing, seats, and subscriptions for your Replit Team. Find guides for team billing structure, seat management, and cancellation.

Billing for Teams

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.

Getting Started

Replit Workspace

Replit AI

Cloud Services

Replit Core

Bounties

Additional Resources

FAQ

Themes

Creating your first theme

Managing installed themes

Syntax Highlighting

Theme Design

Themes Explore Page

Port from VSCode