DEV Community

Cover image for MetaMask SDK Dev Guide
Eric Bishard for MetaMask

Posted on • Updated on

MetaMask SDK Dev Guide

This document helps you to find all resources associated with the MetaMask SDK.

You can also contact our MetaMask SDK DevRel and other DevRel and community team leaders with the links below:

🧔‍♂️ Eric Bishard - Consensys DevRel (MetaMask SDK)

🧙‍♂️ Ziad Saab - Consensys DevRel (MetaMask Snaps)
👩 Lauren Dutton - Consensys DevRel (Infura)
👩🏽 Emily Lin - Consensys DevRel (Linea)

🤌 Mirko Garozo - MetaMask DevRel (General) / Ecosystem Guru
🧔🏻 Francesco - Consensys DevRel (General) / Ecosystem Guru

Chat With Consensys DevRels 24/7

🚨 Consensys Developer Chat

MetaMask SDK for Dapp Developers

For Dapp Developers: The MetaMask JavaScript SDK can be used with any web application, Electron desktop app or ReactNative project. At its most basic implementation, one must install the @metamask/sdk using npm and instantiate the SDK inside your project. This ensures that when eth_requestAccounts is called, the user can connect to MetaMask Mobile (or Extension within a web browser).

For React developers, in particular, we have several dedicated React packages that include the @metamask/sdk with Context and UI components.

💻 MetaMask SDK Workshop with ViteJS + React & TypeScript.
⚙️ Source Code for Video: https://github.com/MetaMask/react-sdk-linea-workshop

As well we have a minimal examples directory within the JavaScript SDK repo which can get you up to speed with Create React App, Electron, NextJS, NodeJS, Pure Javascript, ReactNative, and VueJS. These are cut-to-the-chase examples for all JavaScript project types.

Example Demos and Package Links

Want to see how to implement MetaMask SDK?

There are a few React repositories here with basic implementation:

The MetaMask JavaScript SDK
is an NPM package which can be used for:

All JavaScript NPM Packages and Demos

Not a JavaScript developer? Working on other platforms? Check out our other SDK packages for other platforms:

Why MetaMask SDK?

The MetaMask SDK is a library that provides a reliable, secure, and seamless connection from your dapps and web3 games and mobile apps to MetaMask Mobile.

The MetaMask SDK solves that by being a solution that works on every Javascript frontend/backend platform (Web, React, React Native, NodeJS), as well as mobile (native iOS & Android), Unity (mobile, desktop and WebGL) and we are expanding these supported platforms in the future as well a creating supporting component libraries.

Additional Resources

In addition to our MetaMask Developer Site here are some other topics you may be interested in

Hackathon Tips 🪄

Participating in a hackathon? Communicating your idea and its features as well as explaining what your project does and what products you are using and what bounties you are applying for in your project, a README is very important.

Get tips for hacking, strategy and information in general from our Ultimate Hackathon Survival Guide.

MetaMask API Improvement Proposals

Work directly with our API team to build the future of MetaMask, check out our MetaMask Improvement Proposals GitHub Repo

Interview with Jacob.eth from HyperPlay & Game7

MetaMask API Tutorials

If you are just getting started with MetaMask I suggest first going through our MetaMask API tutorials (which do not include the SDK) for building with React:

Helpful Tools When Working With MetaMask

👊😉👍

Top comments (1)

Collapse
 
labsterx profile image
LabsterX

Hi Eric,

Thanks for the great article! I was trying to use the MetaMask SDK with VueJS and found it quite difficult to get started. I found a number of error messages from metamask-sdk.js.

Could you please help taking a look at this code: github.com/labsterx/veutify-metama...

You can see the error messages after running it using "npm run dev". The code for using MetaMask SDK is in src/main.js.

I'd appreciate your help!

Thanks!