Installation

Prerequisites

Before installing Scalar, make sure you have:

Node.js 18 or later
A package manager (npm, yarn, or pnpm)
A database (PostgreSQL, MySQL, or SQLite)

Framework Installation

Create a new Next.js project

npx create-next-app@latest my-scalar-app
cd my-scalar-app

Install Scalar

npm install @scalar/core @scalar/ui @scalar/cli

Initialize Scalar

npx scalar init

Configure your database

Add your database configuration to .env.local:

.env.local

DATABASE_URL="postgresql://username:password@localhost:5432/mydb"
SCALAR_SECRET="your-secret-key"

Create a new Nuxt.js project

npx nuxi@latest init my-scalar-app
cd my-scalar-app

Install Scalar

npm install @scalar/nuxt @scalar/core

Add the Nuxt module

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@scalar/nuxt'],
  scalar: {
    // Configuration options
  }
})

Configure environment variables

.env

DATABASE_URL="postgresql://username:password@localhost:5432/mydb"
SCALAR_SECRET="your-secret-key"

Create a new SvelteKit project

npm create svelte@latest my-scalar-app
cd my-scalar-app
npm install

Install Scalar

npm install @scalar/sveltekit @scalar/core

Configure SvelteKit adapter

vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { scalar } from '@scalar/sveltekit';

export default {
  plugins: [sveltekit(), scalar()]
};

Set up environment variables

.env

DATABASE_URL="postgresql://username:password@localhost:5432/mydb"
SCALAR_SECRET="your-secret-key"

Create a new Astro project

npm create astro@latest my-scalar-app
cd my-scalar-app

Install Scalar

npm install @scalar/astro @scalar/core

Configure Astro integration

astro.config.mjs

import { defineConfig } from 'astro/config';
import scalar from '@scalar/astro';

export default defineConfig({
  integrations: [scalar()]
});

Add environment variables

.env

DATABASE_URL="postgresql://username:password@localhost:5432/mydb"
SCALAR_SECRET="your-secret-key"

Create a new React project

npx create-react-app my-scalar-app
cd my-scalar-app

Install Scalar

npm install @scalar/react @scalar/core

Set up Scalar provider

src/App.tsx

import { ScalarProvider } from '@scalar/react';

function App() {
  return (
    <ScalarProvider config={{ apiUrl: '/api' }}>
      {/* Your app components */}
    </ScalarProvider>
  );
}

Configure environment variables

.env

REACT_APP_DATABASE_URL="postgresql://username:password@localhost:5432/mydb"
REACT_APP_SCALAR_SECRET="your-secret-key"

Database Setup

Scalar supports PostgreSQL, MySQL, and SQLite. We recommend PostgreSQL for production applications.

PostgreSQL

# Install PostgreSQL (macOS)
brew install postgresql
brew services start postgresql

# Create a database
createdb my-scalar-db

MySQL

# Install MySQL (macOS)
brew install mysql
brew services start mysql

# Create a database
mysql -u root -p -e "CREATE DATABASE my_scalar_db;"

SQLite

For development, you can use SQLite which requires no additional setup:

.env

DATABASE_URL="file:./dev.db"

Verification

After installation, verify everything is working:

npx scalar generate
npx scalar migrate
npm run dev

Visit your application and you should see the Scalar admin interface at /admin.

Next Steps

Make sure to keep your SCALAR_SECRET environment variable secure and never commit it to version control.

On this page