Cosmic

Content API and developer toolkit

Composable

Powerful modeling

Extensive tooling

Fast setup

Secure

Scalable

Overview

👋 Welcome to the documentation site for the Cosmic headless CMS. In this site, find references to interact with the Cosmic API and available clients including methods to CREATE, READ, UPDATE, and DELETE content from your Buckets.

If you do not have a Cosmic account with a Bucket already set up, you will need to sign up and follow the steps to create a new Bucket. Create free account →

🚀

Cosmic provides a globally fast and secure content management system and API toolkit. Use our optimized CMS infrastructure to power content for your websites and apps. Focus on your app and business logic, not CMS infrastructure. Read customer stories to learn how modern development teams use Cosmic to rapidly scale their business goals.

Quick Start

Get started

You can get started from scratch, or start with a pre-built template. Follow the steps below to install and use Cosmic with the recommended way using the Cosmic NPM module.

Install

Install the Cosmic NPM module.


pnpm install cosmicjs
# OR
yarn add cosmicjs
# OR
npm install cosmicjs

Import

Import Cosmic into your app.


const Cosmic = require("cosmicjs");
const api = Cosmic();

Set API access keys

In your Cosmic admin dashboard go to Your Bucket > Settings > API Access and get your Bucket slug and read key then set the variables in your app to connect to your Bucket.


const bucket = api.bucket({
  slug: "YOUR_BUCKET_SLUG",
  read_key: "YOUR_BUCKET_READ_KEY",
});

Get content

Delivering content to your app is simple by using the getObjects method.

Get multiple Objects

Uses getObjects method within a query param. Additional options noted below.


const params = {
  query: { type: "products" }, // Object Type slug
  props: "title,slug,metadata", // response properties
  limit: 10, // number of Objects returned
};
const data = await bucket.getObjects(params);

Get single Object by slug

Uses the getObjects method and query param.


const params = {
  query: {
    type: "pages", // Object Type slug
    slug: "home", // Object slug
    locale: "en", // optional, if localization set on Objects
  },
  props: "title,slug,metadata",
};
const data = await bucket.getObjects(params);
const home = data[0]; // returns array

More to discover

This quick start guide covers the basic steps to get your Cosmic-powered app up and running. For a more in-depth guide on getting Cosmic data into your app, you can view these basic query examples.

Use Cases

What can you build with Cosmic? We provide the tools for content management and collaboration to power content for everything from simple websites, mobile apps, blogs, to full-featured portals with personalized content and configurations.

💡

The only limitation is your imagination.

See available app templates, extensions, and how-to articles by active members of our community for more ideas. And watch some videos below.

Explore Videos

Getting Started with Cosmic and Next.js (Part 1)

Build a Blog Using Nuxt.js + GraphQL + Cosmic

Check out more videos on the Cosmic YouTube channel.

Community

💬 Join the conversation on Slack

🐦 Follow us on Twitter

📃 Read community how-to articles

Support

Need dedicated support for your project?

✉️ Contact support

About This Site

This site uses the Nextra static site generator which uses Next.js and MDX. It includes dark mode 🌒, is hosted on Vercel ▲, and the codebase is available open source on GitHub. Contributions welcome!