Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to


ClerkJS is our foundational JavaScript library for building user management and authentication. It enables you to register, sign in, verify and manage users for your application using highly customizable flows.

While we typically recommend using one of our framework bindings (such as our React or Next.js bindings), having the ability to use the underlying ClerkJS package provides more freedom to use Clerk how you best see fit.


There are two ways you can include ClerkJS in your project. You can either import the ClerkJS npm module or load ClerkJS with a script tag.

You need to create a Clerk Application in your Clerk Dashboard before you can set up ClerkJS. For more information, check out our Set up your application guide.

Install ClerkJS as ES module

npm install @clerk/clerk-js
yarn add @clerk/clerk-js
pnpm add @clerk/clerk-js

Once you have installed the package, you will need to import the ClerkJS object constructor into your code and pass it your Frontend API as a parameter.

import Clerk from '@clerk/clerk-js'; const clerkFrontendApi = `pk_{{pub_key}}`; const clerk = new Clerk(clerkFrontendApi); await clerk.load({ // Set load options here... });

Install ClerkJS as script

ClerkJS can be loaded from a <script /> tag with the source from your Frontend API URL.

Add the following script to your site's <body> element:

<script> // Get this URL and Publishable Key from the Clerk Dashboard const clerkFrontendApi = 'pk_[publishable_key]'; const frontendApi = '[your-domain]'; const version = '@latest'; // Set to appropriate version // Creates asynchronous script const script = document.createElement('script'); script.setAttribute('data-clerk-frontend-api', frontendApi); script.setAttribute('data-clerk-publishable-key', clerkFrontendApi); script.async = true; script.src = `https://${frontendApi}/npm/@clerk/clerk-js${version}/dist/clerk.browser.js`; // Adds listener to initialize ClerkJS after it's loaded script.addEventListener('load', async function () { await window.Clerk.load({ // Set load options here... }); }); document.body.appendChild(script); </script>


Once you have access to the Clerk class, you're able to access and call a myriad of attributes and methods to control your program.

To utilize these methods and attributes, Clerk has a wide array of classes you'll access such as:

What did you think of this content?

Clerk © 2023