The official Javascript client for Cosmic JS. Use it to power content server-side, in the browser and in native apps.
JavaScript
Latest commit 9940daa Jan 19, 2017 @tonyspiro tonyspiro fix last indexBy
Permalink
Failed to load latest commit information.
.gitignore rm debug Jan 2, 2016
README.md Update README.md Dec 18, 2016
bower.json fix editObject post -> put Oct 28, 2016
cosmicjs.browser.min.js browserify Jan 18, 2017
index-browser.js cosmicjs.browser.min.js 🎉 Jan 2, 2016
index.js fix last indexBy Jan 19, 2017
package.json fix last indexBy Jan 19, 2017

README.md

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

npm install cosmicjs

Usage

/* Configure
================================ */
var config = {};
config.bucket = {
  slug: 'react-flux-cosmicjs',
  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
};
var Cosmic = require('cosmicjs');

/* Get bucket
================================ */
Cosmic.getBucket(config, function(error, response){
  // console.log(response);
});

/* Get objects
================================ */
Cosmic.getObjects(config, function(error, response){
  // console.log(response);
});

/* Get objects by type
================================ */
var params = {
  type_slug: 'posts',
  limit: 5,
  skip: 0
};
Cosmic.getObjectType(config, params, function(error, response){
  // console.log(response);
});

/* Get object
================================ */
var params = {
  slug: 'object-slug'
}
Cosmic.getObject(config, params, function(error, response){
  // console.log(response);
});

/* Get media
================================ */
Cosmic.getMedia(config, function(error, response){
  // console.log(response);
});

/* Add object
================================ */
var params = {
  write_key: config.bucket.write_key,
  type_slug: 'pages',
  title: 'Test Title',
  content: 'Test Content'
};
Cosmic.addObject(config, params, function(error, response){
  // console.log(response);
});

/* Edit object
================================ */
var params = {
  write_key: config.bucket.write_key,
  slug: 'test-title',
  type_slug: 'pages',
  title: 'New Title',
  content: 'New Content'
};
Cosmic.editObject(config, params, function(error, response){
  // console.log(response);
});

/* Delete object
================================ */
var params = {
  write_key: config.bucket.write_key,
  slug: 'test-title'
};
Cosmic.deleteObject(config, params, function(error, response){
  // console.log(response);
});

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: 'easy-browser-example'
  },
  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>