Overview

Introduction

Scalar CMS is a headless content management system designed for speed, clarity, and flexibility. It's built for modern development workflows, supporting static sites, dynamic apps, and everything in between.

Key features include:

Type-safe content models with automatic validation
GraphQL and REST APIs for flexible data access
Real-time collaborative editing for content teams
Multi-environment deployments and role-based permissions

Quick Example

Here's how easy it is to get started with Scalar:

lib/scalar.ts

import { createClient } from '@scalar/api-client';

export const scalar = createClient({
  projectId: process.env.SCALAR_PROJECT_ID,
  apiKey: process.env.SCALAR_API_KEY,
});

// Fetch content
export async function getBlogPosts() {
  return await scalar.content.findMany({
    model: 'blogPost',
    include: ['author', 'categories'],
  });
}

Core Components

Scalar CMS has several core parts:

Scalar Core

The data and API layer: models, validation, database handling, and schema generation. This is the foundation of your Scalar CMS setup, handling all the backend operations and data management.

Scalar Studio

A lightweight admin UI for managing content with live preview and model editing. The visual interface where content creators and editors can manage your content efficiently with real-time previews.

Scalar Models

Define fields, relationships, validation rules, and access settings. The heart of your content structure. This is where you define how your content is structured, what fields it contains, and how different content types relate to each other.

Scalar CLI

A command-line interface to scaffold content models, sync schema changes, run local servers, and deploy. Ideal for developers who prefer automation over Git-based workflows. The CLI provides powerful tools for managing your Scalar CMS setup programmatically.

import { scalar } from '@/lib/scalar';

export default async function BlogPage() {
  const posts = await scalar.content.findMany({
    model: 'blogPost',
    orderBy: { publishedAt: 'desc' }
  });

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

pages/blog.vue

<template>
  <div>
    <article v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.excerpt }}</p>
    </article>
  </div>
</template>

<script setup>
const { $scalar } = useNuxtApp();

const { data: posts } = await $scalar.content.findMany({
  model: 'blogPost',
  orderBy: { publishedAt: 'desc' }
});
</script>

src/routes/blog/+page.svelte

<script>
  export let data;
</script>

<div>
  {#each data.posts as post}
    <article>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
    </article>
  {/each}
</div>

src/routes/blog/+page.server.ts

import { scalar } from '$lib/scalar';

export async function load() {
  const posts = await scalar.content.findMany({
    model: 'blogPost',
    orderBy: { publishedAt: 'desc' }
  });
  
  return { posts };
}

src/pages/blog.astro

---
import { scalar } from '../lib/scalar';

const posts = await scalar.content.findMany({
  model: 'blogPost',
  orderBy: { publishedAt: 'desc' }
});
---

<div>
  {posts.map(post => (
    <article>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
    </article>
  ))}
</div>

components/BlogList.tsx

import { useEffect, useState } from 'react';
import { scalar } from '../lib/scalar';

export function BlogList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    scalar.content.findMany({
      model: 'blogPost',
      orderBy: { publishedAt: 'desc' }
    }).then(setPosts);
  }, []);

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Content Models

Define your content structure with TypeScript-like syntax:

models/blog-post.ts

export const BlogPost = {
  title: { type: 'string', required: true },
  slug: { type: 'slug', from: 'title' },
  excerpt: { type: 'text', maxLength: 200 },
  content: { type: 'richText' },
  author: { type: 'reference', to: 'Author' },
  categories: { type: 'reference', to: 'Category', many: true },
  publishedAt: { type: 'datetime' },
  featured: { type: 'boolean', default: false },
};

Creating Content

Use the API to create and manage content programmatically:

lib/content.ts

// Create a new blog post
export async function createBlogPost(data) {
  return await scalar.content.create({
    model: 'blogPost',
    data: {
      title: data.title,
      slug: data.slug,
      content: data.content,
      author: { connect: { id: data.authorId } },
      publishedAt: new Date(),
    },
  });
}

// Query with filters
export async function getFeaturedPosts() {
  return await scalar.content.findMany({
    model: 'blogPost',
    where: { featured: true },
    include: ['author'],
    take: 5,
  });
}

GraphQL API

Access your content using GraphQL:

queries/blog.graphql

query GetBlogPosts($limit: Int = 10) {
  blogPosts(limit: $limit, orderBy: { publishedAt: DESC }) {
    id
    title
    slug
    excerpt
    publishedAt
    author {
      name
      avatar
    }
    categories {
      name
      slug
    }
  }
}

Production Ready: Configure environment variables, database backups, and HTTPS before deploying.

Introduction

Quick Example

Core Components

Scalar Core

Scalar Studio

Scalar Models

Scalar CLI

Installation

Install Scalar CMS Run the installation command: ```bash npx

Configure Your Setup Follow the prompts to choose your database

Launch Your CMS Once installation completes, start your development

First-Time Setup

Framework Integration

Content Models

Creating Content

GraphQL API