The new Cosmic dashboard is here!
Test drive it now →

How to Preview Content in Cosmic

Community Articles
Community Articles How to Preview Content in Cosmic

Cosmic is dedicated to helping blended teams of developers and content editors collaborate to build apps faster. Here is a brief tutorial on setting up Preview Links in your Cosmic Bucket. 

Preview Cosmic Content in 3 Steps 

It's easy to set up Preview links on your Object Types to allow your writers to easily preview changes to content in draft or published state.  To add preview buttons to your Objects, simply go to the Object Type you want to Preview and click Settings > Preview Link.

Settings > Preview Link

Add your Preview Link (dynamically add the object slug with the [object_slug] shortcode).  If you would like to view Draft status Objects, you will need to make sure your web app queries the endpoint with ?status=all.  View the API documentation for more information on how to access your Objects in draft status.

Preview Link Slug

Once your Preview Link is available, you can draft content and save it. Then Click the Preview button located at the top right in the Edit Object page.

Cosmic Preview Button

I hope that you've found this tutorial helpful. If you have questions or comments about Content Editor Features in the Cosmic system, I'd love to hear about them. 

carson@cosmicjs.com 

You may also like


This article shows you how to create a blazing fast Gatsby JS blog using Cosmic source plugin. Let’s get started.
In this tutorial, Cosmic co-founder Tony Spiro takes you on a tour of Cosmic Webhooks. Learn how webhooks work, see how to easily install integrations with Slack, auto-deploy websites to Netlify, and get an intro to Cosmic Functions.
In this walkthrough, I'm going to show you how I build a blog application in Go Lang. I'll also talk about styling it using Tailwind CSS and lastly, I'll show you how you can utilize GitHub Actions to deploy your Go-based applications to Heroku.
For simple shopping websites, going with full-fledged solutions like Shopify or Woocommerce can be a total overkill. In this tutorial, we're going to build an e-commerce website using Nuxt and Cosmic.
This is a quick example to show some of the powerful things you can do with the Cosmic NPM Module. This script will, add a Bucket to your Cosmic account, add an Object Type (Pages) and add a few Pages.
In this tutorial I'll be showing you how I built a Vue.js app with Authentication using Cosmic and AWS Lambda prior to deploying to Netlify. Let's get started.

Get started with Cosmic

Personal projects are free. Scale up as you grow.
Start building Talk to sales