@kyro-cms/core

v0.13.5

Published

3 days ago

Astro-native headless CMS with multi-database adapters, multi-protocol APIs, and multi-vendor support

0High
0Medium
0Low

danieldozie

cms astro headless trpc graphql rest websocket drizzle mongodb multitenant ecommerce admin

Kyro CMS

Astro-native headless CMS with multi-database adapters, multi-protocol APIs, and a built-in React admin dashboard.

What Kyro Gives You

Kyro turns a single TypeScript config (kyro.config.ts) into a full CMS backend for Astro:

Unified Multi-Protocol APIs: Auto-generated REST, GraphQL, tRPC, and WebSocket endpoints from the same collection schema.
Multi-Database Adapters: Instant local SQLite development plus production PostgreSQL (Drizzle) and MongoDB adapters.
Built-in Admin Dashboard: Auto-generated React UI with field builders, live preview, version history, media manager, auth, and RBAC.
End-to-End Type Safety: Schema types and validation powered by TypeScript and Zod.
Extensible Architecture: Custom plugins, lifecycle hooks, field components, and dashboard widgets.

Quick Start

1. Create a New Kyro Project

pnpm create @kyro-cms@latest my-project
# or
npm create @kyro-cms@latest my-project
# or
bun create @kyro-cms@latest my-project

cd my-project
pnpm install
pnpm dev

Open:

http://localhost:4321 — Public Astro site
http://localhost:4321/admin — CMS Admin Dashboard

2. Add Kyro to an Existing Astro Project

pnpm add @kyro-cms/core @kyro-cms/admin

// kyro.config.ts
import { defineKyroConfig, createLocalAdapter } from "@kyro-cms/core";

export default defineKyroConfig({
  adapter: createLocalAdapter({ path: "./data/kyro.db" }),
  collections: [
    {
      slug: "posts",
      label: "Posts",
      admin: {
        useAsTitle: "title",
        icon: "lucide:Newspaper",
        group: "Content",
        defaultColumns: ["title", "slug", "updatedAt"],
      },
      fields: [
        { name: "title", type: "text", required: true },
        {
          name: "slug",
          type: "text",
          required: true,
          admin: { position: "sidebar", autoGenerate: "title" },
        },
        { name: "content", type: "richtext" },
        {
          name: "published",
          type: "checkbox",
          defaultValue: false,
          admin: { position: "sidebar" },
        },
      ],
    },
  ],
});

Core Concepts

Database Adapters

Kyro uses a shared adapter layer so the same collection schema works across different databases without code changes:

SQLite (createLocalAdapter) — Zero-config instant local file database.
PostgreSQL (createDrizzleAdapter) — Production SQL powered by Drizzle ORM.
MongoDB (createMongoDBAdapter) — Flexible document store for scalable applications.

API Protocols

One schema definition automatically powers four API layers:

REST (/api/:collection) — Standard JSON CRUD endpoints.
GraphQL (/api/graphql) — Type-safe nested queries, mutations, and schema introspection.
tRPC (/api/trpc) — End-to-end type-safe RPC client without schema generation.
WebSocket (/api/ws) — Real-time live subscriptions and document presence.

Modular Packages

@kyro-cms/core: Core engine, database adapters, auth, and API handlers.
@kyro-cms/admin: Auto-generated admin dashboard with media manager, RBAC, and draft workflows.
@kyro-cms/astro: Astro integration, Content Layer loaders, and Astro Dev Toolbar widget.
@kyro-cms/connect: Universal, type-safe client SDK and CLI codegen.
@kyro-cms/ai: AI-powered content generation and admin assistance via Vercel AI SDK.

Collection Admin Configuration

Configure how collections look and behave inside the admin UI using the admin property:

export const foodMenuCollection: CollectionConfig = {
  slug: "food-menu",
  label: "Food Menu",
  admin: {
    group: "Restaurant Menu",          // Collapsible sidebar section name
    order: 1,                          // Sorting position inside the section
    icon: "lucide:Utensils",           // "lucide:<name>", "hero:<name>", or "hero-solid:<name>"
    useAsTitle: "name",                // Field to display as title in lists & relation dropdowns
    defaultColumns: ["name", "category", "price"], // Default table columns
    description: "Manage restaurant food items and pricing",
  },
  fields: [ /* ... */ ],
};

Field Admin Configuration

Customize individual fields in edit forms with the admin property:

{
  name: "items",
  type: "array",
  label: "Order Items",
  admin: {
    readOnly: true,
    display: "pills", // Displays items as compact inline pill capsules with count multipliers
  },
  fields: [
    { name: "name", type: "text", label: "Item Name" },
    { name: "quantity", type: "number", label: "Qty" },
    { name: "total", type: "number", label: "Total" },
  ],
}

API Examples

REST

GET    /api/posts
GET    /api/posts/:id
POST   /api/posts
PATCH  /api/posts/:id
DELETE /api/posts/:id

GraphQL

query {
  postsFind(where: {}, page: 1, limit: 10) {
    docs {
      id
      title
      slug
    }
    totalDocs
  }
}

Server-Side (Astro Pages & Endpoints)

Query the database directly with zero network overhead:

---
import { getKyro } from "@kyro-cms/astro";

const kyro = await getKyro();
const { docs: posts } = await kyro.find({ collection: "posts", limit: 10 });
---

<ul>
  {posts.map((post) => (
    <li>{post.title}</li>
  ))}
</ul>

Client SDK (`@kyro-cms/connect`)

Type-safe client for frontend frameworks (Next.js, Remix, SvelteKit, React):

pnpm add @kyro-cms/connect

import { createClient } from "@kyro-cms/connect";

const api = createClient({ url: "http://localhost:4321/api/trpc" });
const { docs: posts } = await api.posts.find({ limit: 10 });

Documentation

Comprehensive guides, API references, and architecture docs are available in the kyro-docs site:

Getting Started Guide — First-time setup & walkthrough
Configuration Reference — Full kyro.config.ts reference
Field Types Reference — All 25+ schema field types
Admin Customization — Layouts, plugins, and overrides