# Add a "Made with Replit" badge to your Webview Source: https://docs.replit.com/additional-resources/add-a-made-with-replit-badge-to-your-webview 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. You can add a "Made with Replit" badge in your public Replit App's webview. It will link back to your Replit App's cover page so that visitors can learn more about your creations. ## What is the Webview? The webview is the view of your Replit App that visitors to your Replit App see when they click "Open website." The webview appears full-screen in its own browser window, and has the following URL format: `https://{unique-token}.${clusterName}.replit.dev` (Or at your custom domain if you've set one up) Please refer to [these docs](/additional-resources/hosting-web-pages) to ensure that you are using the correct repl.co domain format. ## Adding the Badge The badge can be added to any Replit App with an index page serving HTML. Any website created with the official HTML template will have this badge added by default. 1. Go to your Replit App's file browser and find `index.html` 2. Add the following code before the closing `` tag: ```html ``` img-htmlcode ## Testing your Badge 1. Run your Replit App, then click "Open in a new tab" img-openintab 2. Your badge should appear in the lower right. This is what visitors to your page would see Badge Preview 3. Click your badge to get back to the Replit App's cover page ## Changing the Color Theme You can change the color of your badge by replacing `theme="blue"` with any color including dark, light, red, orange, yellow, lime, green, teal, blue, blurple, purple, magenta and pink. ```html ``` ## Changing the Position You can change the position of your badge by adding a position attribute with a value of `top-left`, `top-right`, `bottom-left`, or `bottom-right`. If the position isn't changing, check the console for more information - you may have specified an invalid position. ```html ``` ## Removing the Badge If the badge was already a part of your template and you would like to remove it, simply delete the script from `index.html`: ```html ``` ## Advanced: Custom Badges If the default configurations aren't enough for you, you can create your own custom badges with standard HTML and CSS. Badges are hosted on `https://replit.com/badge`, meaning you can embed an image to further style your badges with CSS. This also means you can embed badges in your GitHub repositories and other Markdown files! ```html Replit Badge ``` You can also supply additional options not available in the script. For example, you can set the caption (maximum limit of 30 characters) ``` https://replit.com/badge?caption=Amazing%20Badges ``` ![Amazing Replit badge](https://replit.com/badge?caption=Amazing%20Badges) or even switch the badge variant to something smaller. ``` https://replit.com/badge?caption=Amazing%20Badges&variant=small ``` ![Amazing small Replit badge](https://replit.com/badge?caption=Amazing%20Badges\&variant=small) ## Advanced: Embedding into Markdown You can share off your Replit flare by embedding a badge into your repository README. The following Markdown snippet combines a link and image, allowing you to redirect users directly to your Replit App. ``` [![Try with Replit Badge](https://replit.com/badge?caption=Try%20with%20Replit)](https:/.replit.com/) ``` Try clicking this: [![Try with Replit Badge](https://replit.com/badge?caption=Try%20with%20Replit)](https:/.replit.com/) Please let us know in the community what you think of this feature. Replit App on! # Authenticating users with Replit App Auth Source: https://docs.replit.com/additional-resources/authenticating-users-repl-auth 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. *This tutorial is an expansion of [this one](https://replit.com/talk/learn/Authenticating-users-with-Replit-Auth/23460) written by [Mat](https://replit.com/@mat1)* To help you authenticate users hassle-free, we have created Replit App Auth. This allows you to authenticate users without having to write your own authentication logic or work with databases. You can simply authenticate a user with their Replit account without the need to store secure passwords. It's also faster to set up than something like Google authentication. In this tutorial, we'll build a basic Flask web application where Replit users can be authenticated with Replit App Auth. To show that a user is authenticated, we will display some of their Replit account information back to them. The main components for this tutorial are: * [Python](https://www.python.org/doc/) for serverside code. * [Flask](https://flask.palletsprojects.com/en/1.1.x/) and [Jinja2](https://jinja.palletsprojects.com/) for rendering a basic web page where the user can authenticate. * [HTML](https://www.w3schools.com/html/html_intro.asp) for the web page layout. ## Setup You'll need a Replit account for this tutorial so if you haven't already, head over to the [signup page](https://replit.com/signup) to create an account. Create a new Python Replit App and give it a name. Creating a new Replit App ## Creating the Basic Flask App Let's build a basic Flask app that will render a simple HTML page where we will add the authentication button and display the user's account details later. In the `main.py` file, add the following code: ```python from flask import Flask, render_template, request app = Flask('app') @app.route('/') def home(): return render_template('index.html') app.run(host='0.0.0.0', port=8080) ``` Above, we have a basic Flask app that will render the `index.html` page which we will add next. By default, Flask will check for HTML pages to render within a directory called `templates`. Create a new folder in the root directory and name it `templates`. Now create a new file within the `templates` directory and name it `index.html`. Let's add some basic HTML to display `Hello, Replit!` on the landing page. Copy the following HTML to the `index.html` file: ```html Replit App Auth Hello, Replit! ``` That's it for the Flask app. Run the code and you should see the browser window display 'Hello, Replit!'. Hello Replit ## The Authentication Script To add authentication to our Flask app, add the following within the **body** of the `index.html` page: ```html
``` This script can be placed anywhere in the document **body** and will create an iframe within its parent element. Additionally, any JavaScript placed in the `authed` attribute will be executed when the user finishes authenticating. Currently, our app will just reload once the user authenticates. If we run our application now, we'll see a `Login with Replit` button. Login button If you click the button, an authorization window will pop up with **Let (your site url) know who you are?**, a profile summary and an `Authorize` button. Clicking the button doesn't do anything at this stage; we'll add some functionality next. Replit authentication window ## Retrieving Information from the Authenticated Account We can retrieve the user's data by requesting information from the Replit specific headers and extracting data from them. The headers we want for this tutorial are `X-Replit-User-Id`, `X-Replit-User-Name` and `X-Replit-User-Roles`. Let's get these from the header and pass them to our HTML template. In the `main.py` file change the `home()` function to look as follows: ```python @app.route('/') def hello_world(): return render_template( 'index.html', user_id=request.headers['X-Replit-User-Id'], user_name=request.headers['X-Replit-User-Name'], user_roles=request.headers['X-Replit-User-Roles'] ) ``` Above, we use `request` to get the Replit headers and place them into variables. Next we should update our `index.html` page to use the headers passed to it and display them back to the user if they are authenticated. Open the `index.html` file and replace the body with the following: ```html {% if user_id %}

Hello, {{ user_name }}!

Your user id is {{ user_id }}.

{% else %} Hello! Please log in.
{% endif %} ``` Above, we check if the user is already authenticated and display their account details. If not, they are asked to "Please log in". Run the application and you should see `Hello, ! Your user id is ` Hello user_name ## Warning Be aware that if you're going to use an accounts system, **PLEASE** do all the specific logic for checking users on the **BACK END**, *do not* do it with JavaScript in your HTML. ## Closing Notes If you followed along, you'll have your own Replit App to expand. If not, you can [fork our Replit App](https://replit.com/@ritza/replit-auth) or test it out below. ```

{`Note: Replace 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: ``` # Markdown Syntax Source: https://docs.replit.com/essentials/markdown Text, title, and styling in standard markdown ## Titles Best used for section headers. ```md ## Titles ``` ### Subtitles Best use to subsection headers. ```md ### Subtitles ``` Each **title** and **subtitle** creates an anchor and also shows up on the table of contents on the right. ## Text Formatting We support most markdown formatting. Simply add `**`, `_`, or `~` around text to format it. | Style | How to write it | Result | | ------------- | ----------------- | ----------------- | | Bold | `**bold**` | **bold** | | Italic | `_italic_` | *italic* | | Strikethrough | `~strikethrough~` | ~~strikethrough~~ | You can combine these. For example, write `**_bold and italic_**` to get ***bold and italic*** text. You need to use HTML to write superscript and subscript text. That is, add `` or `` around your text. | Text Size | How to write it | Result | | ----------- | ------------------------ | ---------------------- | | Superscript | `superscript` | superscript | | Subscript | `subscript` | subscript | ## Linking to Pages You can add a link by wrapping text in `[]()`. You would write `[link to google](https://google.com)` to [link to google](https://google.com). Links to pages in your docs need to be root-relative. Basically, you should include the entire folder path. For example, `[link to text](/writing-content/text)` links to the page "Text" in our components section. Relative links like `[link to text](../text)` will open slower because we cannot optimize them as easily. ## Blockquotes ### Singleline To create a blockquote, add a `>` in front of a paragraph. > Dorothy followed her through many of the beautiful rooms in her castle. ```md > Dorothy followed her through many of the beautiful rooms in her castle. ``` ### Multiline > Dorothy followed her through many of the beautiful rooms in her castle. > > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood. ```md > Dorothy followed her through many of the beautiful rooms in her castle. > > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood. ``` ### LaTeX Mintlify supports [LaTeX](https://www.latex-project.org) through the Latex component. 8 x (vk x H1 - H2) = (0,1) ```md 8 x (vk x H1 - H2) = (0,1) ``` # Navigation Source: https://docs.replit.com/essentials/navigation The navigation field in mint.json defines the pages that go in the navigation menu The navigation menu is the list of links on every website. You will likely update `mint.json` every time you add a new page. Pages do not show up automatically. ## Navigation syntax Our navigation syntax is recursive which means you can make nested navigation groups. You don't need to include `.mdx` in page names. ```json Regular Navigation "navigation": [ { "group": "Getting Started", "pages": ["quickstart"] } ] ``` ```json Nested Navigation "navigation": [ { "group": "Getting Started", "pages": [ "quickstart", { "group": "Nested Reference Pages", "pages": ["nested-reference-page"] } ] } ] ``` ## Folders Simply put your MDX files in folders and update the paths in `mint.json`. For example, to have a page at `https://yoursite.com/your-folder/your-page` you would make a folder called `your-folder` containing an MDX file called `your-page.mdx`. You cannot use `api` for the name of a folder unless you nest it inside another folder. Mintlify uses Next.js which reserves the top-level `api` folder for internal server calls. A folder name such as `api-reference` would be accepted. ```json Navigation With Folder "navigation": [ { "group": "Group Name", "pages": ["your-folder/your-page"] } ] ``` ## Hidden Pages MDX files not included in `mint.json` will not show up in the sidebar but are accessible through the search bar and by linking directly to them. # Reusable Snippets Source: https://docs.replit.com/essentials/reusable-snippets Reusable, custom snippets to keep content in sync One of the core principles of software development is DRY (Don't Repeat Yourself). This is a principle that apply to documentation as well. If you find yourself repeating the same content in multiple places, you should consider creating a custom snippet to keep your content in sync. ## Creating a custom snippet **Pre-condition**: You must create your snippet file in the `snippets` directory. Any page in the `snippets` directory will be treated as a snippet and will not be rendered into a standalone page. If you want to create a standalone page from the snippet, import the snippet into another file and call it as a component. ### Default export 1. Add content to your snippet file that you want to re-use across multiple locations. Optionally, you can add variables that can be filled in via props when you import the snippet. ```mdx snippets/my-snippet.mdx Hello world! This is my content I want to reuse across pages. My keyword of the day is {word}. ``` The content that you want to reuse must be inside the `snippets` directory in order for the import to work. 2. Import the snippet into your destination file. ```mdx destination-file.mdx --- title: My title description: My Description --- import MySnippet from '/snippets/path/to/my-snippet.mdx'; ## Header Lorem impsum dolor sit amet. ``` ### Reusable variables 1. Export a variable from your snippet file: ```mdx snippets/path/to/custom-variables.mdx export const myName = 'my name'; export const myObject = { fruit: 'strawberries' }; ``` 2. Import the snippet from your destination file and use the variable: ```mdx destination-file.mdx --- title: My title description: My Description --- import { myName, myObject } from '/snippets/path/to/custom-variables.mdx'; Hello, my name is {myName} and I like {myObject.fruit}. ``` ### Reusable components 1. Inside your snippet file, create a component that takes in props by exporting your component in the form of an arrow function. ```mdx snippets/custom-component.mdx export const MyComponent = ({ title }) => (

{title}

... snippet content ...

); ``` MDX does not compile inside the body of an arrow function. Stick to HTML syntax when you can or use a default export if you need to use MDX. 2. Import the snippet into your destination file and pass in the props ```mdx destination-file.mdx --- title: My title description: My Description --- import { MyComponent } from '/snippets/custom-component.mdx'; Lorem ipsum dolor sit amet. ``` # Global Settings Source: https://docs.replit.com/essentials/settings Mintlify gives you complete control over the look and feel of your documentation using the mint.json file Every Mintlify site needs a `mint.json` file with the core configuration settings. Learn more about the [properties](#properties) below. ## Properties Name of your project. Used for the global title. Example: `mintlify` An array of groups with all the pages within that group The name of the group. Example: `Settings` The relative paths to the markdown files that will serve as pages. Example: `["customization", "page"]` Path to logo image or object with path to "light" and "dark" mode logo images Path to the logo in light mode Path to the logo in dark mode Where clicking on the logo links you to Path to the favicon image Hex color codes for your global theme The primary color. Used for most often for highlighted content, section headers, accents, in light mode The primary color for dark mode. Used for most often for highlighted content, section headers, accents, in dark mode The primary color for important buttons The color of the background in both light and dark mode The hex color code of the background in light mode The hex color code of the background in dark mode Array of `name`s and `url`s of links you want to include in the topbar The name of the button. Example: `Contact us` The url once you click on the button. Example: `https://mintlify.com/docs` Link shows a button. GitHub shows the repo information at the url provided including the number of GitHub stars. If `link`: What the button links to. If `github`: Link to the repository to load GitHub information from. Text inside the button. Only required if `type` is a `link`. Array of version names. Only use this if you want to show different versions of docs with a dropdown in the navigation bar. An array of the anchors, includes the `icon`, `color`, and `url`. The [Font Awesome](https://fontawesome.com/search?q=heart) icon used to feature the anchor. Example: `comments` The name of the anchor label. Example: `Community` The start of the URL that marks what pages go in the anchor. Generally, this is the name of the folder you put your pages in. The hex color of the anchor icon background. Can also be a gradient if you pass an object with the properties `from` and `to` that are each a hex color. Used if you want to hide an anchor until the correct docs version is selected. Pass `true` if you want to hide the anchor until you directly link someone to docs inside it. One of: "brands", "duotone", "light", "sharp-solid", "solid", or "thin" Override the default configurations for the top-most anchor. The name of the top-most anchor Font Awesome icon. One of: "brands", "duotone", "light", "sharp-solid", "solid", or "thin" An array of navigational tabs. The name of the tab label. The start of the URL that marks what pages go in the tab. Generally, this is the name of the folder you put your pages in. Configuration for API settings. Learn more about API pages at [API Components](/api-playground/demo). The base url for all API endpoints. If `baseUrl` is an array, it will enable for multiple base url options that the user can toggle. The authentication strategy used for all API endpoints. The name of the authentication parameter used in the API playground. If method is `basic`, the format should be `[usernameName]:[passwordName]` The default value that's designed to be a prefix for the authentication input field. E.g. If an `inputPrefix` of `AuthKey` would inherit the default input result of the authentication field as `AuthKey`. Configurations for the API playground Whether the playground is showing, hidden, or only displaying the endpoint with no added user interactivity `simple` Learn more at the [playground guides](/api-playground/demo) Enabling this flag ensures that key ordering in OpenAPI pages matches the key ordering defined in the OpenAPI file. This behavior will soon be enabled by default, at which point this field will be deprecated. A string or an array of strings of URL(s) or relative path(s) pointing to your OpenAPI file. Examples: ```json Absolute "openapi": "https://example.com/openapi.json" ``` ```json Relative "openapi": "/openapi.json" ``` ```json Multiple "openapi": ["https://example.com/openapi1.json", "/openapi2.json", "/openapi3.json"] ``` An object of social media accounts where the key:property pair represents the social media platform and the account url. Example: ```json { "x": "https://x.com/mintlify", "website": "https://mintlify.com" } ``` One of the following values `website`, `facebook`, `x`, `discord`, `slack`, `github`, `linkedin`, `instagram`, `hacker-news` Example: `x` The URL to the social platform. Example: `https://x.com/mintlify` Configurations to enable feedback buttons Enables a button to allow users to suggest edits via pull requests Enables a button to allow users to raise an issue about the documentation Customize the dark mode toggle. Set if you always want to show light or dark mode for new users. When not set, we default to the same mode as the user's operating system. Set to true to hide the dark/light mode toggle. You can combine `isHidden` with `default` to force your docs to only use light or dark mode. For example: ```json Only Dark Mode "modeToggle": { "default": "dark", "isHidden": true } ``` ```json Only Light Mode "modeToggle": { "default": "light", "isHidden": true } ``` A background image to be displayed behind every page. See example with [Infisical](https://infisical.com/docs) and [FRPC](https://frpc.io). # 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 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 getAuthToken(): Promise ``` ### `auth.verifyAuthToken` Verifies a provided JWT token and returns the decoded token. ```ts verifyAuthToken(token: string): Promise<{ payload: any, protectedHeader: any }> ``` ### `auth.authenticate` Performs authentication and returns the user and installation information ```ts 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 { ... "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 import { commands } from '@replit/extensions'; ``` ## Methods ### `commands.add` Adds a command to the command system. ```ts add(__namedParameters: AddCommandArgs): void ``` ## Types ### ActionCommandArgs ```ts undefined ``` ### BaseCommandArgs ```ts undefined ``` ### CommandArgs ```ts ActionCommandArgs | ContextCommandArgs ``` ### CommandFnArgs ```ts undefined ``` ### CommandProxy ```ts | ``` ### CommandsFn ```ts (args: CommandFnArgs) => Promise ``` ### ContextCommandArgs ```ts undefined ``` ### CreateCommand ```ts (args: CommandFnArgs) => undefined ``` ### Run ```ts () => any ``` ### SerializableValue ```ts 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 import { data } from '@replit/extensions'; ``` ## Methods ### `data.currentUser` Fetches the current user via graphql ```ts currentUser(args: CurrentUserDataInclusion): Promise<{ user: CurrentUser }> ``` ### `data.userById` Fetches a user by their id via graphql ```ts userById(args: { id: number } & UserDataInclusion): Promise<{ user: User }> ``` ### `data.userByUsername` Fetches a user by their username via graphql ```ts userByUsername(args: { username: string } & UserDataInclusion): Promise<{ userByUsername: User }> ``` ### `data.currentRepl` Fetches the current Replit App via graphql ```ts currentRepl(args: ReplDataInclusion): Promise<{ repl: Repl }> ``` ### `data.replById` Fetches a Repl by its ID via graphql ```ts replById(args: { id: string } & ReplDataInclusion): Promise<{ repl: Repl }> ``` ### `data.replByUrl` Fetches a Repl by its URL via graphql ```ts 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 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 GraphResponse<{ user: CurrentUser; }> ``` ### GraphResponse\<`T`> A graphql response ```ts Promise ``` ### ReplQueryOutput A graphql response for the repl query ```ts GraphResponse<{ repl: Repl; }> ``` ### UserByUsernameQueryOutput A graphql response for the userByUsername query ```ts GraphResponse<{ userByUsername: User; }> ``` ### UserQueryOutput A graphql response for the user query ```ts 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 import { debug } from '@replit/extensions'; ``` ## Methods ### `debug.info` Logs information to the Extension Devtools ```ts info(message: string, data: Data): Promise ``` ### `debug.warn` Logs a warning to the extension devtools ```ts warn(message: string, data: Data): Promise ``` ### `debug.error` Logs an error message to the extension devtools ```ts error(message: string, data: Data): Promise ``` ### `debug.log` Logs information to the Extension Devtools ```ts 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 import { experimental } from '@replit/extensions'; const { editor } = experimental; ``` ## Methods ### `editor.getPreferences` Returns the current user's editor preferences. ```ts 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 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 spawn(options: SpawnOptions): SpawnOutput ``` ### `exec.exec` Executes a command in the shell, with given arguments and environment variables ```ts 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 (output: string) => void ``` ### SpawnOptions ```ts 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 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 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 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 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 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 deleteFile(path: string): Promise<{} | { error: string }> ``` ### `fs.deleteDir` Deletes the directory at the specified path. Required [permissions](./manifest#scopetype): `read`, `write-exec`. ```ts 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 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 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 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 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 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 Create = 'CREATE' Delete = 'DELETE' Modify = 'MODIFY' Move = 'MOVE' ``` ### FsNodeType A Filesystem node type ```ts Directory = 'DIRECTORY' File = 'FILE' ``` ### DisposerFunction A cleanup/disposer function (void) ```ts () => void ``` ### FsNodeArray ```ts Array ``` ### GetLatestContent Returns the latest content of a watched file as a string ```ts () => string ``` ### WatchDirOnChangeListener Fires when a directory's child nodes change ```ts (children: FsNodeArray) => void ``` ### WatchDirOnErrorListener Fires when watching a directory fails ```ts (err: Error, extraInfo: Record) => void ``` ### WatchDirOnMoveOrDeleteListener Fires when a watched directory is moved or deleted ```ts (event: DeleteEvent | MoveEvent) => void ``` ### WatchFileOnChangeListener Fires when a non-text file is changed ```ts (newContent: T) => void ``` ### WatchFileOnErrorListener Fires when watching a non-text file fails ```ts (error: string) => void ``` ### WatchFileOnMoveOrDeleteListener Fires when a non-text file is moved or deleted ```ts (moveOrDeleteEvent: MoveEvent | DeleteEvent) => void ``` ### WatchTextFileOnChangeListener Fires when a watched text file's text content is updated ```ts (changeEvent: TextFileOnChangeEvent) => void ``` ### WatchTextFileOnErrorListener Fires when watching a text file fails ```ts (error: string) => void ``` ### WatchTextFileOnMoveOrDeleteListener Fires when a watched text file is moved or deleted ```ts (moveOrDeleteEvent: MoveEvent | DeleteEvent) => void ``` ### WatchTextFileOnReadyListener Fires when a text file watcher is ready ```ts (readyEvent: TextFileReadyEvent) => void ``` ### WriteChange Writes a change to a watched file using the TextChange interface ```ts (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 import { init } from '@replit/extensions'; ``` ## Signature ```ts 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 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 | \| -------- | ------------------------- | --------------------------------------------- | \| 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 "read" | "write-exec" | "repldb:read" | "repldb:write" | "experimental-api" ``` ### BackgroundPage The path to a specified route that will run a background script. ``` { 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 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 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 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 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 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 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 showWarning(str: string, length: number): Promise ``` ### `messages.hideMessage` Hides a message by its IDs ```ts hideMessage(id: string): Promise ``` ### `messages.hideAllMessages` Hides all toast messages visible on the screens ```ts 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 import { replDb } from '@replit/extensions'; ``` ## Methods ### `replDb.set` Sets the value for a given key. Required [permissions](./manifest#scopetype): `repldb:read`, `repldb:write`. ```ts set(args: { key: string, value: any }): Promise ``` ### `replDb.get` Returns a value associated with the given key. Required [permissions](./manifest#scopetype): `repldb:read`. ```ts 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 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 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 import { session } from '@replit/extensions'; ``` ## Methods ### `session.onActiveFileChange` Sets up a listener to handle when the active file is changed ```ts onActiveFileChange(listener: OnActiveFileChangeListener): DisposerFunction ``` ### `session.getActiveFile` Returns the current file the user is focusing ```ts getActiveFile(): Promise ``` ## Types ### DisposerFunction A cleanup/disposer function (void) ```ts () => 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 (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 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 getCurrentTheme(): Promise ``` ### `themes.getCurrentThemeValues` Returns the current theme's global token values. ```ts getCurrentThemeValues(): Promise ``` ### `themes.onThemeChange` Fires the `callback` parameter function with the updated theme when the user's theme changes. ```ts onThemeChange(callback: OnThemeChangeListener): Promise ``` ### `themes.onThemeChangeValues` Fires the `callback` parameter function with the updated theme values when the user's theme changes. ```ts 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 Dark = 'dark' Light = 'light' ``` ### DisposerFunction A cleanup/disposer function (void) ```ts () => void ``` ### OnThemeChangeListener Fires with the new theme data when the current theme changes ```ts (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.