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.

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