Build with the tools you know and love

We have SDKs and libraries for everything you need and we're constantly adding support for more.

Get started

View Live demo

Install our SDK in minutes!

Get an environment ID

Set up an account to get your environment ID.

Install the Dynamic NPM package

This takes a few seconds.

Set up your React snippet and customize

Once you set up your snippet, you can further customize things within your developer dashboard.

Try our live demo

npm i viem @dynamic-labs/sdk-react-core @dynamic-labs/ethereum

import {
DynamicContextProvider,
DynamicWidget,
} from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";

export default function App() {
return (
<DynamicContextProvider
settings={{
// Find your environment id at https://app.dynamic.xyz/dashboard/developer
environmentId: "REPLACE-WITH-YOUR-ENVIRONMENT-ID",
walletConnectors: [EthereumWalletConnectors],
}}
>
<DynamicWidget />
</DynamicContextProvider>
);
}

‍

npm i @dynamic-labs/viem-extension@alpha @dynamic-labs/client@alpha @dynamic-labs/react-native-extension@alpha @dynamic-labs/react-hooks@alpha react-native-webview expo-web-browser expo-linking expo-secure-store

import { createClient } from "@dynamic-labs/client";
import { ReactNativeExtension } from "@dynamic-labs/react-native-extension";
import { ViemExtension } from "@dynamic-labs/viem-extension";

export const dynamicClient = createClient({
// Find your environment id at https://app.dynamic.xyz/dashboard/developer
environmentId: "REPLACE-WITH-YOUR-ENVIRONMENT-ID", // Optional:
appLogoUrl: "https://demo.dynamic.xyz/favicon-32x32.png",
appName: "Dynamic Demo",
})
.extend(ReactNativeExtension())
.extend(ViemExtension());

export function App() {
return (
<>
<dynamicClient.reactNative.WebView /> <SafeAreaView>
<Text>Hello, world!</Text>
</SafeAreaView>
</>
);
}

‍

flutter pub add dynamic_sdk dynamic_sdk_web3dart

import 'package:dynamic_sdk/dynamic_sdk.dart';

void main() {
WidgetsFlutterBinding.ensureInitialized();
DynamicSDK.init(
props: ClientProps(
// Find your environment id at https://app.dynamic.xyz/dashboard/developer
environmentId: 'REPLACE-WITH-YOUR-ENVIRONMENT-ID', // Optional:
appLogoUrl: 'https://demo.dynamic.xyz/favicon-32x32.png',
appName: 'Dynamic Demo',
),
);
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Stack(
children: [
// Make sure the SDK is ready before using it
StreamBuilder<bool?>(
stream: DynamicSDK.instance.sdk.readyChanges,
builder: (context, snapshot) {
final sdkReady = snapshot.data ?? false;
return sdkReady
? const MyHomePage(title: 'Flutter Demo Home Page')
: const SizedBox.shrink();
},
),
// DynamicSDK widget must be available all the time
DynamicSDK.instance.dynamicWidget,
],
),
);
}
}