node package manager

cosmicjs

Cosmic JS Logo

This is the Official Cosmic JS JavaScript Client which allows you to easily create, read, update and delete content from your Cosmic JS Buckets. Includes cosmicjs.browser.min.js for easy integration in the browser.

Getting started

Go to https://cosmicjs.com, create an account and set up a Bucket.

Install

yarn add cosmicjs

Usage

Include and Config
import Cosmic from 'cosmicjs';
 
/* Configure
================================ */
const config = {
  bucket: {
    slug: 'your-bucket-slug',
    read_key: '', // add read_key if added to your Cosmic JS Bucket settings
    write_key: '' // add write_key if added to your Cosmic JS Bucket settings
  }
};
Get Bucket
Cosmic.getBucket(config, (error, response) => {
  // console.log(response);
});
Get Objects
Cosmic.getObjects(config, (error, response) => {
  // console.log(response);
});
Get Objects by Type
const params = {
  type_slug: 'posts',
  limit: 5,
  skip: 0,
  locale: 'en' // optional, if localization set on Objects
};
Cosmic.getObjectsByType(config, params, (error, response) => {
  // console.log(response);
});
Get Objects by Search
// Search by Object Metafield
const params = {
  type_slug: 'posts',
  metafield_key: 'author',
  metafield_object_slug: 'carson-gibbons',
  limit: 5,
  skip: 0,
  locale: 'en' // optional, if localization set on Objects
};
// Search by Metafield Value
const params = {
  type_slug: 'posts',
  metafield_key: 'headline',
  metafield_value: 'Hello World',
  limit: 5,
  skip: 0
};
// Search by Metafield Has Value
const params = {
  type_slug: 'posts',
  metafield_key: 'headline',
  metafield_has_value: 'World',
  limit: 5,
  skip: 0
};
Cosmic.getObjectsBySearch(config, params, (error, response) => {
  // console.log(response);
});
Get Object
const params = {
  slug: 'object-slug'
}
Cosmic.getObject(config, params, (error, response) => {
  // console.log(response);
});
Add Object
const params = {
  write_key: config.bucket.write_key,
  type_slug: 'pages',
  title: 'Test Title',
  content: 'Test Content'
};
Cosmic.addObject(config, params, (error, response) => {
  // console.log(response);
});
Edit Object
const params = {
  write_key: config.bucket.write_key,
  slug: 'test-title',
  type_slug: 'pages',
  title: 'New Title',
  content: 'New Content'
};
Cosmic.editObject(config, params, (error, response) => {
  // console.log(response);
});
Delete Object
const params = {
  write_key: config.bucket.write_key,
  slug: 'test-title'
};
Cosmic.deleteObject(config, params, (error, response) => {
  // console.log(response);
});
Get Media
Cosmic.getMedia(config, (error, response) => {
  // console.log(response);
});
 
/* Add Media
================================ */
const params = {
  media: FILE_DATA,
  folder: 'your-folder-slug'
}
Cosmic.addMedia(config, params, (error, response) => {
  // console.log(res)
})

Easy Browser Example

<!DOCTYPE html>
<html>
<head>
  <title>Cosmic JS Easy Browser Example</title>
</head>
<body>
<h1 id="title">If you see this, something isn't working...</h1>
<div id="content"></div>
<div id="metafields"></div>
<script src="cosmicjs.browser.min.js"></script>
<script>
var config = {
  bucket: {
    slug: 'your-bucket-slug'
  },
  object: {
    slug: 'home'
  }
};
Cosmic.getObject(config, config.object, (err, res) => {
  var object = res.object;
  document.getElementById('title').innerHTML = object.title;
  document.getElementById('content').innerHTML = object.content;
  var metafields = object.metafields;
  var items = '';
  metafields.forEach(function(metafield){
    items += '<h2>' + metafield.title + '</h2>';
    items += '<img width="300" src="' + metafield.url + '"/>';
    items += '<br><br>';
  });
  document.getElementById('metafields').innerHTML = items;
});
</script> 
</body>
</html>