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

Product Update: View as Editor


by Tony Spiro on February 20, 2019

We're happy to release a new feature that helps you collaborate with your team members easier using Cosmic JS. Introducing View as Editor.

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.

With the new "View as Editor" toggle now available in your Bucket for the developer and admin roles (see gif below), you can preview the entire Bucket experience from the vantage point of your content creators hiding all developer features and settings.


So now when you add your content creators in the editor role, you can be sure that you are giving them an intuitive and easy-to-use editing experience.

I'd love to hear your thoughts on this and other ways to make it easier for teams of developers and content creators to collaborate. Join the conversation on Slack and reach out to us on Twitter.

Photo by Scott Webb on Unsplash.

You may also like



Cosmic JS Founders Tony Spiro and Carson Gibbons were featured on The Next Level Show, a Dallas-based business talk show that features Founders and CEOs. The founders discussed their historical pain points with installed content management systems, as well as their partnership, private beta updates, and the frontier of cloud-based CMS APIs that both speed up the development cycle and add to the bottom line. Stream the audio file or watch the interview here.

Rapid prototyping is the process of quickly building a scale model for display to a client or partner, knowing that the prototype can be changed at a moment's notice. For a builder this could be an actual model, for a product it could be a mold model, and for an agency or development shop it could be a number of things. Many agencies will build rapid prototypes not just to display creative, websites & apps for clients, but to win the business in the first place by demonstrating a certain level of commitment to and understanding of the product or service at hand. Rapid prototyping allows the development team to participate in a faster feedback loop to get the best possible product while allowing the client to participate in the process. The constraints are usually time, money & technology infrastructure in terms of how that rapid prototype can be reviewed, and where.

In this tutorial I’m going to show you how to build a user management app using Node.js and the Cosmic JS CMS API.

In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Raymond Camden, a Senior Software Engineer and Developer Advocate residing in Lafayette, Louisiana. Raymond has extensive experience in the technology space, having enjoyed stints at IBM, Adobe and AuthO prior to becoming a Senior Engineer for Developer Experience at American Express. Follow Raymond on Twitter, GitHub or LinkedIn, and enjoy the Q/A.

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!


With all the recent Gatsby fervor, we were delighted to get to sit down with Kyle Mathews, founder of Gatsby and a software engineer living in San Francisco. Follow Kyle on GitHub and Twitter, and enjoy the Q/A.