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# ORyarn add cosmicjs# ORnpm 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 using the bucket.objects.find
method.
Get multiple Objects
Use the bucket.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 bucket.objects.find
method and set the slug
property to any Object slug.
const data = await bucket.objects.find({type: "pages", // Object Type slugslug: "home", // Object sluglocale: "en", // optional, if localization set on Objects}).props("title,slug,metadata"); // response properties
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!