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

Install a new Remix app

npx create-remix@latest cosmic-remix

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 Blog code

In the file app/routes/_index.tsx include the following:

// app/routes/_index.tsx
import type { MetaFunction } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

import { createBucketClient } from "@cosmicjs/sdk";
const cosmic = createBucketClient({
  bucketSlug: process.env.BUCKET_SLUG || "",
  readKey: process.env.BUCKET_READ_KEY || "",

export const meta: MetaFunction = () => {
  return [
    { title: "Cosmic Remix Blog" },
    { name: "description", content: "Welcome to Cosmic Remix!" },

export async function loader() {
  const { objects: posts } = await cosmic.objects
      type: "blog-posts",
  return json(posts);

export default function Index() {
  const posts = useLoaderData<typeof loader>();
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
        (post: {
          title: string;
          metadata: { image: { imgix_url: string }; content: string };
        }) => {
          return (
            <div key={post.title}>
                dangerouslySetInnerHTML={{ __html: post.metadata.content }}

Build and run

npx remix vite:build

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:5173, and see your blog posts.

npm run dev