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

Install RedwoodJS

yarn create redwood-app

Answer the prompts with the following answers:

  1. Where would you like to create your Redwood app? cosmic-redwood
  2. Select your preferred language. TypeScript
cd cosmic-redwood
yarn install

Start the app.

yarn rw dev

Create the Blog home page.

yarn redwood generate page home /

Go into the web/src folder.

cd web/src

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.

In the file web/src/pages/HomePage/HomePage.tsx add the following:

// web/src/pages/HomePage/HomePage.tsx
import { createBucketClient } from '@cosmicjs/sdk';

import { Metadata } from '@redwoodjs/web';

// app/page.tsx
const cosmic = createBucketClient({
  bucketSlug: process.env.REDWOOD_ENV_BUCKET_SLUG || '',
  readKey: process.env.REDWOOD_ENV_BUCKET_READ_KEY || '',

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

const HomePage = () => {
  return (
      <Metadata title="Blog" description="Blog home page" />
        (post: {
          title: string;
          metadata: { image: { imgix_url: string }; content: string };
        }) => {
          return (
            <div key={post.title}>
                dangerouslySetInnerHTML={{ __html: post.metadata.content }}

export default HomePage;

Add your Cosmic API keys

In the existing 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

Restart the app

Restart your app with the following command:

yarn rw dev