Cosmic NPM module (dashboard v1)

IMPORTANT

This package connects to projects on the old Cosmic dashboard and API v2 only. To connect to projects on the new Cosmic dashboard and API v3 use the Cosmic JavaScript SDK.

Content management made simple, fast, and secure.

Cosmic is a headless CMS (content management system) that provides a web dashboard to create content and an API toolkit to deliver content to any website or application. Build nearly any type of content model using our admin dashboard then deliver your content powered by our reliable infrastructure and global CDN.

Save time and launch faster

Avoid the pain of building, configuring, and maintaining your own CMS infrastructure. Cosmic has all of the features you need out of the box optimized and ready. Plug into Cosmic, save time, and launch your content-powered apps faster.

Features include

🛠️  Powerful content modeling
🔍  Flexible queries
⚡  Customized API response
🌎  Localization
🎨  Image optimization
…and more! See more features →

Get started

Start by going to https://www.cosmicjs.com, create your free account and set up a project. You can get started from scratch, or start with a pre-built template. Then follow the steps below to use this NPM package.

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()

Connect

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 using the objects.find method.

Get multiple Objects

Use the objects.find method and set the type property to any Object Type slug. Additional options noted below.

const data = await bucket.objects.find({
  type: "products" // Object Type slug
})
.props("title,slug,metadata") // response properties
.limit(10) // number of Objects to be returned

Get single Object by slug

Use the objects.find method and set the slug property to any Object slug.

const data = await bucket.objects.find({
  type: "pages", // Object Type slug
  slug: "home", // Object slug
  locale: "en", // optional, if localization set on Objects
})
.props("title,slug,metadata") // response properties

More examples

For more in-depth guides on getting Cosmic data into your app, you can view these basic query examples. When you are ready to level up, check out advanced query examples.

Add content

The Cosmic API is fully CRUD (create, read, update, delete) capable, enabling user-generated content and file uploads. Check out the add Object and add media examples in the documentation.