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.
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.
Fork an Extension Template. Give it a name and click "Create Extension Repl"
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 →
- Open Extension Devtools
- 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.
- 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.
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
replitobject returned by
replitobject created by the
Features are added through the Devtools UI, which is available in the Extension Devtools tab. Features are divided into three categories:
- 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.
- 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.)