Examples

Welcome to the XMTP examples page. Here, you'll find a variety of code examples, projects, and apps to help you get started with building your own applications using XMTP.

Quickstarts

A quickstart is a brief guide or repo aimed at helping XMTP developers to understand core build primitives from the network.

JavaScript

• Render Frames
  Learn how to render interoperable Frames in your messaging apps
• Subscribe
  Learn how to enable subscriptions using consent proofs
• Content Types
  Learn how to send and render different content types.
• Request inbox
  How to build consent, like Allowed/Requested tabs and Accept/Block buttons
• Floating Inbox
  Floating inbox quickstart app in JS. Use it to help you build your own app with XMTP.
• Progressive web app
  Quickstart app for building an app, which is a way to provide an app without requiring separate bundling or distribution
• JavaScript live example
  A Repl of a full flow for sending and streaming messages in JavaScript

React

• React hooks
  Floating Inbox Quickstart app built using React. Use it to help you build your own app with XMTP
• Content Types
  Learn how to send and render different content types.

React Native

• React Native
  Quickstart React Native app. Use it to help you build your own app with XMTP.
• Request inbox
  How to build consent, like Allowed/Requested tabs and Accept/Block buttons
• Group Chat
  React Native example app. Use it to help you build your own group chat with XMTP.

Example apps

Example apps are more comprehensive than quickstarts. They are fully functional applications built with XMTP that showcase a broader range of features and use-cases.

React

• React Playground app
  A tool to help you build your own app with XMTP, including reactions, replies, read receipts, and attachments
• Inbox Web
  XMTP official client, aiming to showcase effective and innovative ways of building with XMTP.

Kotlin

• Android
  Quickstart Android app in Kotlin

Swift

• iOS
  Quickstart iOS app in Swift

Dart

• Flutter
  Quickstart Flutter app in Dart

React Native

• Inbox Web
  XMTP official client, aiming to showcase effective and innovative ways of building with XMTP.
• React Native
  Quickstart Example SDK app. Learn react native with XMTP with this example inbox.

Wallet connectors

Wallet connectors are essential components in decentralized applications (dApps). They allow users to connect their cryptocurrency wallets to the dApp, enabling them to sign transactions and interact with the blockchain. Different wallet connectors support different wallets and XMTP works out of the box with most of them.

Wallet connectors

• Dynamic
  Quickstart app for building an app with a Dynamic wallet connector
• MetaMask
  Quickstart app for building an app with a MetaMask wallet connector
• Privy
  Quickstart app for building an app with a Privy wallet connector
• ThirdWeb
  Quickstart app for building an app with a Thirdweb wallet connector
• WalletConnect
  Quickstart app for building an app with a WalletConnect wallet connector
• RainbowKit
  Quickstart app for building with a RainbowKit and Viem wallet connector

Other integrations

These projects provide a robust foundation for building your own applications using XMTP. They are designed to demonstrate XMTP compatibility and include pre-configured setups for ease of use.

JavaScript

• Next.js
  Floating Inbox Quickstart app in Next.js. Use it to help you build your own app with XMTP.
• Vue.js
  A tutorial and quickstart app for building a chatbot in VueJS. Use them to help you build your own app with XMTP.
• Node.js
  Quickstart code for creating a new XMTP client, initiating a conversation, and sending a message in Node.js
• Firebase Functions
  Quickstart code for integrating an XMTP app with Firebase functions

React

• Next.js hooks
  Floating inbox quickstart app built using Next.js hooks. Use it to help you build your own app with XMTP.