Cosmic Logo

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

Install a new Hono app

npm create hono@latest

Answer the prompts with the following answers:

  1. Target directory. cosmic-hono
  2. Which template do you want to use? bun
  3. Do you want to install project dependencies? yes
  4. Which package manager do you want to use? npm

Now run:

cd cosmic-hono

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.

Change the default src/index.ts to a JSX file src/index.tsx and add the following code

// src/index.tsx
import { Hono } from 'hono';
import { raw } from 'hono/html';
import { createBucketClient } from '@cosmicjs/sdk';
const cosmic = createBucketClient({
  bucketSlug: process.env.BUCKET_SLUG || '',
  readKey: process.env.BUCKET_READ_KEY || '',
});

const app = new Hono();
type PostType = {
  title: string,
  metadata: { image: { imgix_url: string }, content: string },
};

app.get('/', async (c) => {
  const { objects: posts } = await cosmic.objects
    .find({
      type: 'blog-posts',
    })
    .props('title,metadata.image,metadata.content');
  const html = posts?.map((post: PostType) => {
    return (
      <div>
        <div>{post.title}</div>
        <div>
          <img
            src={`${post.metadata.image.imgix_url}?w=500&auto=format,compression`}
            alt={`${post.title}`}
          />
        </div>
        <div>{raw(post.metadata.content)}</div>
      </div>
    );
  });
  return c.html(html);
});

export default app;

Change the default start script in package.json to accept the new file name

// package.json
"scripts": {
  "dev": "bun run --hot src/index.tsx"
}

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
BUCKET_SLUG=add_your_bucket_slug_here
BUCKET_READ_KEY=add_your_bucket_read_key_here

Start the app

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

npm run dev

FAQ

How much does Cosmic cost?

Project plans are Free ($0), Builder ($99/mo), Team ($299/mo), Business ($499/mo), Enterprise (custom pricing). Yearly billing saves 10%. Workspace plans are Small Workspace ($999/mo) and Large Workspace ($2,999/mo), and they start with a 30-day free trial. Allowances, add-on rates, and the rest of the pricing FAQ are plain text at https://www.cosmicjs.com/pricing.md.

Are API keys required, and is content private?

Each Bucket has a read key and a write key in Bucket Settings > API Access. GET requests use the read key. POST, PATCH, and DELETE use the write key as Authorization: Bearer. Do not put the write key in a browser bundle, a mobile app, or a NEXT_PUBLIC_ variable. SAML single sign-on is on Large Workspace and Enterprise. The audit log is append-only. Text versions: https://www.cosmicjs.com/security.md and https://www.cosmicjs.com/docs/dashboard/audit-log.md.

Can an agent create a Cosmic project without an existing account?

Yes. POST https://dapi.cosmicjs.com/v3/agents/sign-up provisions a free-tier project and bucket tied to a human email, with no existing Cosmic account. The human claims it with the emailed one-time code. The playbook is https://www.cosmicjs.com/docs/ai-onboarding.md.