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

Next.js

1. Create a new Next.js project

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

2. Install Scalar

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

3. Initialize Scalar

   npx scalar init

4. 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"

Nuxt.js

1. Create a new Nuxt.js project

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

2. Install Scalar

   npm install @scalar/nuxt @scalar/core

3. Add the Nuxt module

   nuxt.config.ts

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

4. Configure environment variables

   .env

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

SvelteKit

1. Create a new SvelteKit project

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

2. Install Scalar

   npm install @scalar/sveltekit @scalar/core

3. Configure SvelteKit adapter

   vite.config.js

   import { sveltekit } from '@sveltejs/kit/vite';
   import { scalar } from '@scalar/sveltekit';
   
   export default {
     plugins: [sveltekit(), scalar()],
   };

4. Set up environment variables

   .env

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

Astro

1. Create a new Astro project

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

2. Install Scalar

   npm install @scalar/astro @scalar/core

3. Configure Astro integration

   astro.config.mjs

   import { defineConfig } from 'astro/config';
   import scalar from '@scalar/astro';
   
   export default defineConfig({
     integrations: [scalar()],
   });

4. Add environment variables

   .env

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

React

1. Create a new React project

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

2. Install Scalar

   npm install @scalar/react @scalar/core

3. Set up Scalar provider

   src/App.tsx

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

4. Configure environment variables

   .env

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

Database Setup

Tip

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

• Configure your first content models
• Learn about the API
• Check out examples

Caution

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