MetaMask developer documentation

This is the new MetaMask developer documentation repository. It's built on Docusaurus, a static site generator purpose-built for technical documentation.

All documentation content is located in the wallet and snaps directories.

Contribution workflow

The MetaMask documentation contribution workflow involves proposing changes by creating branches and pull requests (PRs) on this repository. This facilitates open contributions, testing, and peer review.

To contribute changes:

1. Search for an existing issue to work on, or create a new issue describing the content issue you'd like to address. Make sure no one else is assigned to the issue, and assign yourself to it. If you don't have permission to assign yourself to it, leave a comment on the issue.

2. Clone this repository to your computer.

   git clone https://github.com/MetaMask/metamask-docs.git

3. Create and checkout a topic branch, naming it appropriately. We recommend including the issue number and a short description in the branch name (for example, 183-doc-cli-option), which is a reminder to fix only one issue in a PR.

   git checkout -b <ISSUE-NUM>-<ISSUE-DESC>

   Tip: You can use a Git client such as Fork instead of the command line.

4. Open this repository in a text editor of your choice (for example, VS Code) and make your changes. Refer to the style guide and Markdown guide when making documentation changes.

   Notes:

   • If you add a new documentation page, make sure to edit wallet-sidebar.js or snaps-sidebar.js to add the page to the sidebar.
   • If you delete or rename a documentation file, make sure to add a redirect to the redirect plugin in docusaurus.config.js.

5. Preview your changes locally to check that the changes render correctly.

6. Add and commit your changes, briefly describing your changes in the commit message. Push your changes to the remote origin.

   git add *
   git commit -m "<COMMIT-MESSAGE>"
   git push origin

7. On this repository on GitHub, you’ll see a banner prompting you to create a PR with your recent changes. Create a PR, describing your changes in detail. Link the issue that your PR fixes by adding fixes #<ISSUE-NUM> to the PR description.

8. Specific reviewers are automatically requested when you submit a PR. You can request additional reviewers in the right sidebar of your PR – for example, the original issue raiser. Make any required changes to your PR based on reviewer feedback, repeating steps 4–6.

9. After your PR is approved by two reviewers, all checks have passed, and your branch has no conflicts with the main branch, you can merge your PR. If you don't have merge access, a maintainer will merge your PR for you. You can delete the topic branch after your PR is merged.

Preview locally

As a prerequisite, make sure you have the following installed:

• Node.js version 16+
  • If you're using nvm (recommended), running nvm use automatically chooses the right Node.js version for you.
• Yarn version 3
  • Run yarn install to install dependencies and run any required post-install scripts.

Preview your changes locally by running yarn start in the documentation repository.

Note: If you make changes to the redirects, you can preview them by running yarn build && yarn serve.

Style guide

The MetaMask documentation follows the ConsenSys documentation style guide and the Microsoft Writing Style Guide. Refer to those guides for any questions on writing style.

Markdown guide

Docusaurus is powered by MDX, an extension to Markdown that allows you to use JavaScript in your documentation content. See the Docusaurus documentation on how to use its Markdown and MDX features.

Tip: Admonitions, tabs, and code blocks are frequently used in the MetaMask documentation.

The following sections describe features that aren't documented in the Docusaurus documentation.

Simplified tabs

The remark-docusaurus-tabs plugin allows you to add content in tabs using simplified syntax.

For example, add code blocks to tabs as follows:

<!--tabs-->

# HTML

```html
<!-- HTML code block -->
```

# JavaScript

```javascript
// JavaScript code block
```

# Markdown

- This is an example Markdown list.
- This is **bold** and *italicized* text.

<!--/tabs-->

Live code blocks

The remark-codesandbox plugin allows you to define a code block to be loaded live in a CodeSandbox iframe. This enhances the documentation by keeping the code blocks versioned and in the codebase, while using CodeSandbox to showcase any example with any dependency.

Define a live code block by adding a codesandbox key to the code block. For example:

```javascript codesandbox=vanilla
// JavaScript live code block
```

remark-codesandbox allows for simple code blocks where the content of the block replaces the CodeSandbox entry point, and more complex code blocks that can be loaded directly from the filesystem. See the remark-codesandbox documentation for more information.