Getting Started Get started quickly adding Cosmic-powered content to your websites and apps.

Speaking Cosmic

What is a Bucket?

A Bucket is the main piece in the Cosmic JS content structure. It's very flexible and can power the content for an entire website or a portion of a website. Since your Bucket content is delivered via an API endpoint, your Bucket can also power content for any application including iOS, Android, tvOS, Apple Watch, IOT, AR/VR or any other way that you would like to distribute your content.

What is an Object Type?

An Object Type is any collection of Objects that share a similar function. Pages, articles, projects, etc.

What is an Object?

An Object can be a page, a blog post, or anything you want it to be. Cosmic JS gives you the freedom to create and manage content openly and create your own data structure. Each Object allows for the creation of a title, slug, content and Metafields.

What are Metafields?

Metafields are very powerful pieces of custom data. Current available Metafield types include: text, textarea, HTML textarea, select dropown, image / file upload, date, single Object relationship, multiple Object relationship, radio buttons, check boxes, markdown, parent with nested children and repeater. Your created Metafields are transformed into key/values stored as Metadata in the API endpoints.

Current Metafield Options

A basic way to think of the structure is:

Bucket: Your website
--| Object Type: The blog posts on your website
--| Object: A blog post
----| Metafield: A picture on your blog post
----| Metafield: The author of your blog post

Quickstart

Get started building Cosmic-powered apps in seconds 🚀

We have Node.js, React, Vue, Gatsby and Serverless starter apps to help you get your project started quickly.

npm i -g cosmic-cli
cosmic init node-starter
cd node-starter
cosmic start

Examples

Cosmic JS has client libraries to help you easily manage content on your website or app. Below are a few examples of how these client libraries can be used to add dynamic content to your app without much custom coding.

Node.js Example

Install the Official Cosmic JS JavaScript Client on NPM.

npm i cosmicjs

Then get your content:

Browser Example

Use the Unpkg hosted browser file or add the cosmicjs.browser.min.js file from the Official Cosmic JS JavaScript Client on GitHub to your app. Here is a real working example application:

Cosmic CLI

Use the Cosmic CLI to communicate directly with your Cosmic JS account via the command line. Below are a few quick examples.

Install the CLI globally:

npm i -g cosmic-cli

View all available commands:

cosmic

Log in to your Cosmic JS account:

$ cosmic login
    ? Email: starman@gmail.com
    ? Password: [hidden]
  Authenticated

Connect to a Bucket:

cosmic use-bucket simple-react-blog

Get Objects from the connected Bucket:

$ cosmic get-objects --limit 1
  Success
  { objects: 
     [ { _id: '59df6dd5fd8d731b2100118d',
         bucket: '59df6dcbfd8d731b21001188',
         slug: 'jane-doe',
         title: 'Jane Doe',
         content: '

Something about Jane...

', metafields: [Array], type_slug: 'authors', created: '2017-10-12T13:27:49.663Z', created_at: '2017-10-12T13:27:49.663Z', status: 'published', metadata: [Object] } ], limit: 1 }

Go to the Cosmic CLI NPM module page to see more examples.

Python Example

Download the Cosmic JS Python Client on GitHub.

git clone https://github.com/cosmicjs/cosmicjs-python.git
cd cosmicjs-python
python setup.py install

Usage:

from pythoncosmicjs import Api
# Configure
api = Api(bucket='astral', read_key='read_key', write_key='write_key')
# Get all contents of bucket including objects and media
print(api.bucket())
# Get all objects
print(api.objects(limit=10, skip=5)) # limit, skip the default is None
# Get objects by type
print(api.object_type(type_slug='pages', limit=10, skip=5)) # limit, skip the default is None
# Get object
print(api.object(object_slug='object-slug')) # object_slug mandatory variable
# Get media
print(api.media(limit=10, skip=5)) # limit, skip the default is None
# Add object
print(api.add_object(title='object title', content='object content')) # title, content required variables
# Edit object
print(api.edit_object(object_slug='object-slug', title='change to the title', content='change to the content')) # title, content required variables
# Delete object
print(api.delete_object(object_slug='object-slug')) # the name of the object you want to delete
# Search object
print(api.search_object(object_type='', limit=1, skip=10, metafield_keys='bob', metafield_value='bob'))
PHP Example

Add the cosmicjs.php file from the Official Cosmic JS PHP Client on GitHub to your app.

git clone https://github.com/cosmicjs/cosmicjs-php

Then get your content:

// in your PHP file
  $config = new stdClass();
  $config->bucket_slug = "astral";
  include("cosmicjs.php");
  $objects = $cosmicjs->getObjects();
  var_dump($objects);
Simple Curl
curl https://api.cosmicjs.com/v1/astral?pretty=true

Documentation

Go to the documentation page to see more ways to add the power of Cosmic JS to your websites and applications.