Cosmic JS Blog Stay tuned for community news, company announcements and updates from the Cosmic JS team.

Extensions Feature Update


Extensions are a powerful component of Cosmic JS that allow you to create custom views in your Bucket Dashboard. We've recently made some updates to make using this feature even better.

New Extension edit view

Extension Edit View
You can now edit your Extension information such as Title, Sidenav icon, as well as add query parameters.

Query Parameters
Extensions are a great way to leverage powerful third party API services in your Cosmic JS Bucket. When you do connect to these services, however, you usually need some sort of API keys to access this content.

Until now, adding these keys to your Bucket was usually done in a makeshift way of adding a new Object Type such as "Analytics" and adding an Object to store your keys. This was an ok temporary solution, but definitely needed to change.

You can now add query parameters directly to your Extension in the Extension edit view which will be added to the Extension iframe query string.

Extension Starter
If you need an easy place to get started building your own Extensions, we now have an Extension Starter available for download. If you would like more information on what you can build with Extensions, check out the documentation page.

I hope you enjoy these updates to Cosmic JS Extensions to help you build amazing custom experiences in your Bucket Dashboard. I'm looking forward to seeing what you build!

If you have any questions, feel free to reach out to us on Twitter and in our Slack community channel.

Photo by Fausto García on Unsplash.

You may also like


It's now even easier to add metafields to your objects.  Available metafields include: plain text, plain textarea, html textarea, select dropdown, object select (for object connections), image / file and date.

Sign in and check out the available metafield options that make it so easy to add dynamic content to your websites and apps.


In this short tutorial I'll show you how easy it is to add a CMS to a simple browser app using the Cosmic JS API.   It will literally take you 2 minutes to build.  Our app will consist of just 3 files:

1. index.html
2. app.js
2. package.json

Let's get started shall we?  In your terminal of choice run the following commands:

mkdir easy-browser-example
cd easy-browser-example
npm install cosmicjs
npm install browserify -g

Now let's build our index.html file.  Run the following command in your terminal:

vim index.html

Add the following to our index.html file:

<!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="app.browser.js"></script>
</body>
</html>

We could just as easily use jQuery and Ajax to render our content, but for this example we will use the official Cosmic JS Node.js package. Now create a file called app.js:

vim app.js

And add the following to app.js:

// app.js
var Cosmic = require('cosmicjs')
const bucket = { slug: 'easy-browser-example' }
const object = { slug: 'home' }
Cosmic.getObject({ bucket }, object, (err, res) => { var object = res.object
  document.getElementById('title').innerHTML = object.title
  document.getElementById('content').innerHTML = object.content
  document.getElementById('metafields').innerHTML = '<pre>' + JSON.stringify(object.metafields, null, 2) + '</pre>'
})

Notice that in our app.js file we are returning content from the Cosmic JS API, and then attaching our content to the DOM elements at "title","content" and "metafields".

Next we'll add a package.json file that will allow us to add some simple scripts to "browserify" our app.js file:

vim package.json

Add the following to a new file titled package.json:

{
  "name": "easy-browser-example",
  "main": "app.js",
  "scripts": {
    "browserify": "browserify app.js -o app.browser.js"
  }
}

Now let's run our our scripts to bundle our code into the browser.  Run the following script which will bundle the new file to app.browser.js:

npm run browserify

Now view the index.html file in your browser and you will see that the content from our example bucket "easy-browser-example" can be seen and the metafields data is rendered to a string to show you what data is available.  Taking this a step further, you can see how powerful this can be if you add React or Angular into the mix.

I hope you enjoyed this short tutorial.  If you have not already, you can sign up for a Cosmic JS account, and begin playing with this example using content from your own bucket.  Thanks and happy building!


When building websites connected to a CMS, it is important that the content is structured as simply as possible for the end user to edit.  I call this user-first content development.   It benefits everyone – the content editor, the developer and the agency when the developer makes sure the content editor is empowered with the easiest and most intuitive way to manage content.  This seems obvious, but this oversight happens all too often and results in confusion and ultimately a bad experience which is bad for everyone  the developer, the content editor and the agency.

In this article I’m going to show you how to get the best of both worlds:  A website that is both dynamic, has content powered by the Cosmic JS API that is also a static website.  Our static website will be easily managed by a content editor using the Cosmic JS CMS and the developer will also be able to use Markdown files.

As a developer, getting a CMS set up for your content creators requires a certain level of empathy. It's your job to make a technology choice that allows them to work in a comfortable environment and only see what they need to get their job done.

Cosmic JS, an API-first cloud-based content management platform, and its user base continues to grow in Public Beta, having hit 500,000 API requests a mere 6 weeks into Public Beta Launch.