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

Introducing Gatsby Preview for Cosmic JS


by Tony Spiro on November 26, 2019

This article was originally published on the Gatsby Blog.

We’re excited to announce the official release of Gatsby Preview for Cosmic JS. This new integration enables you to add powerful content preview functionality to your Cosmic JS Gatsby website.


Getting Started

  1. First go to the Gatsby Getting Started Page and follow the links for Cosmic JS.
  2. Select the Cosmic JS-powered Gatsby Blog
  3. You will then be asked for your GitHub and Cosmic JS authentication, so make sure you have both accounts set up (sign up for Cosmic JS here).
  4. After onboarding, go to any Post in your Cosmic JS Bucket and find the big, beautiful, purple button to preview your content. 


Cosmic JS Gatsby Preview Screenshot


What happens?

After clicking the “Open Preview” button, a new tab will open to instantly show you what the content looks like for this specific version on your Gatsby website. This simple one-click preview will greatly enhance your content team’s content-creation workflow.

Cosmic JS Gatsby Preview Screenshot


How did this integration happen?

The Cosmic JS / Gatsby Preview integration is the result of close collaboration between both teams to make the integration as easy as possible. Both sides had to refactor a bit of existing functionality to make it seamless. And the feedback that came from the collaboration effort actually helped to improve both products. We’re happy to say this powerful feature can be integrated in just a few clicks.


Why is this a big deal?

Both Gatsby and Cosmic JS believe deeply in providing developers the best development experience possible. But it’s not just about developers. Content creation team members are crucial to building great web products. And one of the most requested features for content creators is preview, but this has been a challenge for developer teams pushing for highly-optimized JAMStack websites built on Gatsby.

Gatsby Preview solves this problem by providing a simple button for content creators to experience an instant preview of content directly in the CMS dashboard. Gatsby preview with the Cosmic JS headless CMS, is a further extension to empower content creators to preview content quickly and easily, giving teams faster content marketing velocity.


What’s next?

We’re excited to continue to work closely with the Gatsby team to help create more value-added integrations between both services. It’s our goal to continue to provide the full spectrum of team members the best tools to be successful.

Our users have been very helpful with letting us know ways to improve the Cosmic JS + Gatsby stack combo. So if you have any suggestions on ways we can improve, please let us know in the Cosmic JS Slack channel or on our Twitter.


Happy building!

— Tony and the Cosmic Team

You may also like


After reading a very well done article on TechCrunch "Don't Dismiss Developers", a thought came to mind about our current developer technology ecosystem.  The most successful products don't try to build every bit of functionality in-house.  Instead, great companies find ways to build their technology upon a stack of specially designed services that offload complex tasks.  This is something that I call the "Modular Product Era".

Currently this is happening at the server level with cloud computing, file storage and database offloading to service companies like Amazon and Digital Ocean.  But there is also the application layer that is now being outsourced to different companies to leverage specially crafted and designed products that integrate easily into an application stack.  Much like in a community if you want the best bread, the best meat and the best cheese, you don't go to the supermarket and you obviously don't try to make all of these complex foods yourself, instead you go the local baker, butcher and cheese store.  And these specialized modules are becoming easier to incorporate into existing technology.

Ethan Kurzweil illustrates this, "For example, when you add your credit card to Uber by taking a picture of it, you’re actually using a cool piece of technology developed by card.io (now part of PayPal) to OCR the credit card number and expiration date and then after every ride, Uber makes an API call to Braintree Payments to process your transaction."

In this new Modular Product Era, we will continue to see companies becoming more specialized and providing a more focused service at a lower price point.  This is very exciting because this lowers the barrier to entry even further for growing technology startups.

Cosmic JS is being built with these principals in mind.  We want to build the best product for developers to easily integrate content management into any application.  We will do this through using a technology stack that leverages the Modular Product ecosystem.

A very interesting article was published to one of my favorite web dev blogs today. Where Content Management Systems Fit Into the Process goes into a discussion which I think is seldom in the limelight in the development community, what is the best process in connecting your site to a CMS?  The author Geoff Graham presents three options in building a dynamic, CMS-powered website:

Option 1: The CMS Comes First Method


Option 2: The All-At-Once Method


Option 3: The CMS Comes Last Method


Previously, when building sites using other CMS platforms I would prefer to use the "CMS Comes Last Method" because I would be able to work out a lot of bugs, change my mind and add new features in the static HTML/CSS build phase before pouring in the more time-consuming programming / CMS phase.  

But with Cosmic JS I can use any one of these methods and feel confident that I can easily make edits, change my mind and add new features to a CMS-powered website.  There's power and reassurance in flexibility and Cosmic JS offers the most flexible way to add content to your website.

Sign up to get a private beta invite to begin checking out how easy it is to add dynamic content to your website or app.

In this tutorial, we're going to create a small Twitter-like mobile app using React Native. With our app, users will be able to create accounts and log in, see a feed of all of the posts created by themselves and other users, and add their own posts to the feed. The data for all of our users and posts will be managed by Cosmic JS.

Building websites and applications with the Cosmic JS API is simple and intuitive for teams through role permissions.

What if I told you there is a faster, and more optimized way to bundle the language data for your small web-application? And what if, I also told you that you can use a remote Content Management System (CMS), that can manage your website’s content?


Imgix is an image processing service that gives you some serious power when it comes to handling images for your websites and apps.  Their dynamic image processing API lets you crop, scale, rotate, watermark, add style and more to your images by simply adding a query string to the image url.

I'm happy to say that Imgix processing is now available for all your images uploaded to Cosmic JS!  Just look for the additional property (imgix_url) in your bucket's API endpoints and you can begin using this powerful image processing service.


Here's an example:

Let's say you have a large image that looks great on desktop web:

https://cosmicjs.imgix.net/83bb7170-2162-11e6-b1c2-f159cf376757-cat2.jpg

And you need the same image in a different size to accommodate mobile devices with lower bandwidth.  With the power of Cosmic JS and Imgix all you need to do is add ?w=500 to the end of the imgix_url and you now have a 500 pixel wide image, perfect for mobile devices!

https://cosmicjs.imgix.net/83bb7170-2162-11e6-b1c2-f159cf376757-cat2.jpg?w=500

Imgix is normally a paid service, but we are giving it to you for free for all free and paid Cosmic JS plans.  

Log in or sign up for Cosmic JS to manage content for your websites and apps faster and easier, now with the dynamic power of Imgix!