MetaMask SDK Dev Guide
Tags: blockchain, react, reactnative, mobile
Published: 2023-03-22 08:13:18

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)](https://t.me/httpjunkie)

🧙‍♂️ [Ziad Saab - Consensys DevRel (MetaMask Snaps)](https://t.me/ZiadMTL)
👩 [Lauren Dutton - Consensys DevRel (Infura)](https://twitter.com/laurenmxv)
👩🏽 [Emily Lin - Consensys DevRel (Linea)](https://t.me/@pokemilymon)

🤌 [Mirko Garozo - MetaMask DevRel (General) / Ecosystem Guru](https://t.me/mirkogarozzo)
🧔🏻 [Francesco - Consensys DevRel (General) / Ecosystem Guru](https://t.me/@andreolf)

## Chat With Consensys DevRels 24/7

🚨 [Consensys Developer Chat](https://t.me/+uk7s-lkaWpYyNDIx)

## MetaMask SDK for Dapp Developers

For Dapp Developers: The [MetaMask JavaScript SDK](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript) 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](https://www.youtube.com/watch?v=M3yndTDvCPg).
⚙️ Source Code for Video: https://github.com/MetaMask/react-sdk-linea-workshop

{% youtube Y-njlhGmNMU %}

As well we have a minimal [examples directory within the JavaScript SDK repo](https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples) 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](https://github.com/MetaMask/metamask-sdk/tree/main/packages/examples)
- [MetaMask & Unity Demo Video](https://www.youtube.com/watch?v=fSt3eMTI7Zc)
- [Bringing Web3 to Games and Apps with the MetaMask SDK](https://www.youtube.com/watch?v=DPQXkC7q0EM)

The [MetaMask JavaScript SDK](https://www.npmjs.com/package/@metamask/sdk)
is an NPM package which can be used for:

- [React](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/react/)
- [Pure JavaScript](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/pure-js/)
- [React Native](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/react-native/) 
- [Electron](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/electron/)
- [Other web frameworks](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/other-web-frameworks/)
- [Node.js](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/nodejs/)

- [MetaMask JS SDK Options Reference](https://docs.metamask.io/wallet/reference/sdk-js-options/)

## All JavaScript NPM Packages and Demos

- [@metamask/sdk](https://www.npmjs.com/package/@metamask/sdk)
  - Official JS MetaMask SDK
  - Demo: [Workshop demo branch](https://github.com/MetaMask/react-sdk-linea-workshop/tree/main)
- [@metamask/sdk-react](https://www.npmjs.com/package/@metamask/sdk-react)
  - Library with react hooks (state management)
  - Demo: [SDK official example](https://github.com/MetaMask/metamask-sdk/tree/main/packages/sdk-react)
- [@metamask/sdk-react-ui](https://www.npmjs.com/package/@metamask/sdk-react-ui)
  - Integrate basic connect button UI into your Dapp
  - SDK React UI wraps [WAGMI Hooks](https://wagmi.sh/)
  - Demo: [SDK official example](https://github.com/MetaMask/react-sdk-linea-workshop/tree/add-react-ui-components)
  - Demo: [Workshop demo branch](https://github.com/MetaMask/react-sdk-linea-workshop/tree/add-react-ui-components)
- [@web3-onboard/metamask](https://www.npmjs.com/package/@web3-onboard/metamask)
  - Wallet module for connecting MetaMask Wallet SDK to web3-onboard
  - Demo: [Workshop demo branch](https://github.com/MetaMask/react-sdk-linea-workshop/tree/add-web3-onboard)

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

- [MetaMask Unity SDK](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/gaming/unity/)
- [MetaMask Unreal SDK](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/gaming/unreal-engine/) (coming soon)
- [MetaMask Native iOS SDK](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/mobile/ios/)
- [MetaMask Native Android SDK](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/mobile/android/)

## 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](https://metamask.io/developer) 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](https://consensys.net/developers/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](github.com/MetaMask/metamask-improvement-proposals)

Interview with Jacob.eth from HyperPlay & Game7
- [Unveiling: HyperPlay and Better Patterns For Web3 Gaming](https://www.youtube.com/watch?v=bGzW-ps-_vc)

### 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](https://docs.metamask.io/wallet/tutorials/react-dapp-local-state)
- [Create a React dapp with global state](https://docs.metamask.io/wallet/tutorials/react-dapp-global-state)
- [Integrate a Feedback Form into your Dapp](https://metamask.io/news/developers/integrate-a-feedback-form-into-your-dapp-collect-user-data-at-scale)

### Helpful Tools When Working With MetaMask

- [Build on Linea](linea.mirror.xyz)
- [Chainlist.org](https://chainlist.org/?testnets=true&search=linea)
- [eSerialize](https://eserialize.com/?input=hex&output=number)
- [MetaMask API Playground](https://docs.metamask.io/wallet/category/reference)
- [OneClickDapp](https://oneclickdapp.com/)

👊😉👍