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
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:
- MetaMask JavaScript SDK Examples
- MetaMask & Unity Demo Video
- Bringing Web3 to Games and Apps with the MetaMask SDK
The MetaMask JavaScript SDK
is an NPM package which can be used for:
All JavaScript NPM Packages and Demos
-
@metamask/sdk
- Official JS MetaMask SDK
- Demo: Workshop demo branch
-
@metamask/sdk-react
- Library with react hooks (state management)
- Demo: SDK official example
-
@metamask/sdk-react-ui
- Integrate basic connect button UI into your Dapp
- SDK React UI wraps WAGMI Hooks
- Demo: SDK official example
- Demo: Workshop demo branch
-
@web3-onboard/metamask
- Wallet module for connecting MetaMask Wallet SDK to web3-onboard
- Demo: Workshop demo branch
Not a JavaScript developer? Working on other platforms? Check out our other SDK packages for other platforms:
- MetaMask Unity SDK
- MetaMask Unreal SDK (coming soon)
- MetaMask Native iOS SDK
- MetaMask Native Android SDK
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:
- Create a React dapp with local state
- Create a React dapp with global state
- Integrate a Feedback Form into your Dapp
Helpful Tools When Working With MetaMask
👊😉👍
Top comments (1)
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!