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

Building with the Content Editor in Mind


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 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 for the content editor.  When you build user-first, you are empowering everyone on your team to build the best possible product.

In this article I'm going to show you some basic ways to structure content for your websites that make content very easy to manage on the backend.   When you start with an easy-to-use CMS and structure your content intuitively, your content editor will be able to quickly and easily navigate through the CMS to edit content and will 
ultimately sing your praises.

Let's first look at a standard website layout.  For 99% of all websites you have the standard structure of Header, Main Content and Footer and it looks something like this:



When I look at the page layout above and consider how it will be managed in the CMS, I immediately translate this into two different object types: Global (items on all pages like the Header and Footer) and Page (Main Content).  In the Cosmic JS backend it will look something like this:



This is set up in a way that allows for easy communication with your content editor on how to edit the content on the pages of the website.  If they are looking to edit a page, they go into Pages. If they need to edit anything that is repeated across the entire website, they go into Globals.  For the developer, there's an easy way to scale Global items that will be reused across the site like logo, navigation, social links, etc.

Now let's say we want to add a hero image on the top of each page on the website.


Cosmic JS makes this really easy to do by using metafields.  To add a new metafield to all of our new and existing pages, we will go into our Object Type settings for our Pages and add an image metafield for hero.


Now each Page will have the image metafield hero available:


Let's say we also wanted to add the company's social links to Facebook, Twitter and LinkedIn.  This is really easy.  All we need to do is add a new Socials object in Globals and each social link will have its own text metafield.  It would look something like this:



As you can see, Cosmic JS makes it really easy to give your content editor the easiest and most intuitive content editing experience.  I hope you found these basic examples useful in getting started with user-first content development using Cosmic JS.  If you have any questions about how to further structure your content for easy handoff to content editors, please join our Slack channel, or reach out to us on Twitter.

You may also like


In this tutorial I'm going to show you how to create a simple blog using Node.js and Cosmic JS.  This is going to be the fastest and most light-weight blog you have ever created.  Let's get started.

We're releasing a couple new additions to our powerful Metafields feature.  Check them out...

There is a powerful trend happening in technology.  It is a shift from confined, installed systems into a more free, micro-services economy.  This can be seen in the consumer space from people choosing to stream music instead of downloading MP3s, choosing to Uber to work rather than drive their personal car and people choosing to order groceries to their door from Amazon instead of going to the grocery store.

In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Chris Schwab, a Front End Engineer residing in Boston who's currently helping lead the development charge at positivity-prone apparel brand Life is Good. Chris and his team at Life is Good have been using the Cosmic JS API to manage user-generated-content for their positivity campaigns (now in their second consecutive year). Follow Chris on LinkedIn or Twitter, and enjoy the Q/A.

In last week's article, Tony told us about the ingredients in The Cosmic Stack, why it is so powerful and what its benefits are. Now that we've seen what The Cosmic Stack looks like, let's look at how we can customize our use of it. 

From a high level, you have three basic ways to use The Cosmic Stack. You have flexibility to use just the CMS API, the CMS API and your own app hosted on the Cosmic app server, or the CMS API with a pre-built content-ready app hosted on the Cosmic App Server.

In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Jacob Knaack, a Web Developer and Technical Communicator residing in Seattle, Washington. Jacob is a Front End Developer at restack, a development studio that finely crafts websites and apps. Jacob is also a frequent contributor to the Cosmic Community, having recently built both the Progressive Apollo Blog as well as the Gatsby Documentation Website. Follow Jacob on LinkedIn and GitHub and enjoy the conversation.