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

Install a new Vite app

npm create vite@latest

Answer the prompts with the following answers:

  1. Project name. cosmic-vite
  2. Select a framework. React
  3. Select a variant. TypeScript

Now run:

cd vite-project
npm install

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/App.tsx file

// src/App.tsx
import { useState, useEffect } from "react";
import { createBucketClient } from "@cosmicjs/sdk";
const cosmic = createBucketClient({
  bucketSlug: import.meta.env.VITE_BUCKET_SLUG || "",
  readKey: import.meta.env.VITE_BUCKET_READ_KEY || "",

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

type PostType = {
  title: string;
  metadata: { image: { imgix_url: string }; content: string };

function App() {
  const [posts, setPosts] = useState<PostType[]>([]);
  useEffect(() => {
    getPosts().then((data) => setPosts(data));
  }, []);
  return (
      {posts.length &&
        posts?.map((post: PostType) => {
          return (
            <div key={post.title}>
                dangerouslySetInnerHTML={{ __html: post.metadata.content }}

export default App;

Add your Cosmic API keys

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

# .env.local

Start the app

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

npm run dev