Skip to main content

Create your first Replit Extension

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 Repl​

To start building a Replit extension, you need to create an Extension Repl. This is a special Repl that contains all the configuration necessary to build, preview, and release your extension.


  1. Fork an Extension Template. Give it a name and click "Create Extension Repl"

  2. After creating the Repl, 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

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 Repl, similar to the Webview you're familiar with in other Repls.

note

Extension Repls do not support the regular webview. Read more in the FAQ

  1. Open Extension Devtools
  2. Click "Load Locally" This will run your Repl'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().
  • Javascript Extensions In Javascript Extensions, all APIs are available on the global replit object created by the init API

Features are added through the Devtools UI, which is available in the Extension 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.
  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. 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.)

Next steps​

Follow a tutorial

Learn how to build complex example extensions with a step-by-step tutorial.


Explore the API Reference

Learn about the APIs available to you as an extension developer.


Debug your extension

Learn to use extension dev tools to debug problems with your extension code.


Publish your extension

Learn how to publish your extension to the Replit Extensions Store.

Was this helpful?
Last updated on