Quick Start

MiniKit-JS SDK

MiniKit-JS is our official SDK for creating mini apps that work with World App. It provides handy functions and types to make development a breeze.

Template Repository

If you want to create a brand new mini app, you can use our template repositories:

Otherwise, continue below with the installation instructions.

Installing MiniKit

MiniKit-JS is the core lib, framework agnostic,

MiniKit-React provides hooks that make it easy to interact with the MiniKit SDK.

npm install @worldcoin/minikit-js

Or use a CDN like jsdelivr, for inline HTML, make sure to fill in the version.

<script>
  import { MiniKit } from "https://cdn.jsdelivr.net/npm/@worldcoin/minikit-js@[version]/+esm"
</script>

Usage

Create a MiniKit Provider component that installs the SDK and makes it easy to access MiniKit inside your app

src/minikit-provider.tsx

'use client' // Required for Next.js

import { ReactNode, useEffect } from 'react'
import { MiniKit } from '@worldcoin/minikit-js'

export default function MiniKitProvider({ children }: { children: ReactNode }) {
	useEffect(() => {
		// Passing appId in the install is optional 
		// but allows you to access it later via `window.MiniKit.appId`
		MiniKit.install(appId?) 
	}, [])

	return <>{children}</>
}

Wrap your root with the MiniKitProvider component.

src/index.tsx

export default async function Root({
	children,
}: Readonly<{
	children: React.ReactNode
}>) {
	return (
		<html lang="en">
			<MiniKitProvider>
				<body className={inter.className}>{children}</body>
			</MiniKitProvider>
		</html>
	)
}

Check if MiniKit is installed and ready to use

MiniKit.isInstalled() will only return true if the app is opened and properly initialized inside the World App. This is useful to distinguish between a user opening your app in the browser or in the World App.

// ...
console.log(MiniKit.isInstalled())