Follow the steps below to get started with Cosmic to power content for your Astro application.

Install a new Astro app

npm create astro@latest

Answer the prompts

Answer the question: "How would you like to start your new project?" with Include sample files..

Install the Cosmic JavaScript SDK

Install the Cosmic JavaScript SDK in the location of the codebase.

npm i @cosmicjs/sdk

Add an Object type in the Cosmic dashboard

Log in to the Cosmic dashboard and create a new Blog Posts Object type in a new or existing Project with the following metafields:

  1. Image: Image type with key image
  2. Content: Rich text with key content

Blog model

Add content

Add a few blog posts to get some content ready to be delivered.

Add the following code to your src/pages/index.astro file

// src/pages/index.astro
import Layout from "../layouts/Layout.astro";
import { createBucketClient } from "@cosmicjs/sdk";
const cosmic = createBucketClient({
  bucketSlug: import.meta.env.BUCKET_SLUG || "",
  readKey: import.meta.env.BUCKET_READ_KEY || "",

const { objects: posts } = await cosmic.objects
    type: "blog-posts",

<Layout title="Welcome to Astro.">
        (post: {
          title: string;
          metadata: { image: { imgix_url: string }; content: string };
        }) => {
          return (
              <div set:html={post.metadata.content} />

    main {
      margin: auto;
      padding: 1rem;
      width: 800px;
      max-width: calc(100% - 2rem);
      color: white;
      font-size: 20px;
      line-height: 1.6;

Add your Cosmic API keys

In a new file titled .env add the following environment variables and make sure to switch out the values with your Cosmic API keys found in Project / API keys.

# .env

Start the app

Start your app with the following command, go to http://localhost:4321, and see your blog posts.

npm run dev