Skip to main content

Getting Started

Choose an option below to see framework specific guides on how to set up Palette.


Install Palette

npm install

Initialize Palette

Import palette before all other imports in your app's entrypoint file.

Get your client key at[your-username]/[your-project]/settings

// Import palette before all other imports
import { init, events, markers, network, vitals, profiler, paint } from "";

// Collect click, network, performance events, and profiles
plugins: [events(), network(), vitals(), markers(), profiler(), paint()],

// Start the profiler on the following events:
sampleInterval: 1,
maxBufferSize: 100_000,

// Your other imports...

Upload source maps

Configure your bundler to upload source maps during build time.

This step is required if you are using a framework or a bundler (like Next.js, Webpack, Vite, or Parcel).

npm install --save-dev
const { withPalette } = require("");

const withPalettePlugin = withPalette({
key: process.env.PALETTE_ASSET_KEY,

module.exports = withPalettePlugin({
// your next config...

Set asset key

In your CI, set an env variable named PALETTE_ASSET_KEY to your asset key. This is necessary since source maps are only uploaded in CI.

Get your asset key at[your-username]/[your-project]/settings.

npx vercel env add

Add headers

To enable profiling, you need to add the "Document-Policy": "js-profiling" to your server responses.

You can skip this step, this was handled by the withPalette util in step 3.