Skip to main content

Getting Started

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

1

Install Palette

npm install @palette.dev/browser
2

Initialize Palette

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

Get your client key at https://palette.dev/[your-username]/[your-project]/settings

_app.js
// Import palette before all other imports
import { init, events, markers, network, vitals, profiler, paint } from "@palette.dev/browser";

init({
key: "YOUR_CLIENT_KEY",
// Collect click, network, performance events, and profiles
plugins: [events(), network(), vitals(), markers(), profiler(), paint()],
});

// Start the profiler on the following events:
profiler.on(
[
"paint.click",
"paint.keydown",
"paint.scroll",
"paint.mousemove",
"markers.measure",
"events.load",
"events.dcl",
],
{
sampleInterval: 1,
maxBufferSize: 100_000,
}
);

// Your other imports...
3

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 @palette.dev/webpack-plugin --save-dev
next.config.js
const { withPalette } = require("@palette.dev/webpack-plugin/next");

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 https://palette.dev/[your-username]/[your-project]/settings.

npx vercel env add
4

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.