DEV Community

Cover image for MetaMask SDK Dev Guide
Eric Bishard for MetaMask

Posted on β€’ Edited on

5 1

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

πŸ‘ŠπŸ˜‰πŸ‘

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

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!

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay