KeystoneJS Development for Custom Headless CMS

When domain logic doesn't fit into pre-built content types, KeystoneJS becomes the foundation. It's a code-first headless CMS where data schemas live in TypeScript, and the GraphQL API, admin panel, and Prisma schema are auto-generated. You don't waste time on CRUD wrappers: the system creates them, leaving you to focus on business logic. Within 7–10 days, you get a ready solution with custom fields, role-based access, and integration with any frontend—from Next.js to Angular. This approach reduces development cost and eliminates N+1 queries through a flexible API. Contact us to discuss your project.

Unlike admin-first CMS, KeystoneJS gives full control over data. You define relationships, hooks, computed fields—the system builds migrations via Prisma. We've used this approach in 10+ projects: from e-commerce stores with custom catalogs to corporate portals with multisite. According to our measurements, KeystoneJS accelerates backend creation by 1.5x compared to Strapi. Get a consultation from our engineer for a project estimate.

When to Choose KeystoneJS

KeystoneJS is suitable when:

• Full control over data schema and business logic is required
• The team is comfortable with Node.js and TypeScript
• Custom access logic, complex computed fields, and data-level hooks are needed
• GraphQL API is the primary interface for the frontend

It is not suitable if you need out-of-the-box hosting without DevOps or a rich UI for non-technical editors (then consider Strapi or Payload).

Why Choose KeystoneJS?

KeystoneJS outperforms traditional CMS due to its code-first approach. You are not limited by fixed structures: any relationships, computed fields, and hooks on create/update. GraphQL API provides the frontend with exactly the data it needs, without N+1 queries. According to the official documentation, KeystoneJS can reduce backend development time by 30–40% through auto-generation of CRUD operations.

How We Set Up Access and Roles

In KeystoneJS, access rights are defined at the operation (create/read/update/delete) and field levels via access in each list. We implement a role model: admin, editor, author, anonymous. Built-in session support via cookie or JWT.

// Example: only author can edit their post access: { operation: { query: allowAll, create: ({ session }) => !!session, update: ({ session, item }) => session?.data?.id === item.authorId, delete: ({ session }) => session?.data?.role === 'admin', }, }, 

Process

1. Discovery: define models, relationships, roles, integrations
2. Design: create TypeScript schema, configure storage (local/S3)
3. Implementation: write lists, hooks, access rules, customize Admin UI
4. Testing: GraphQL queries, unit tests, load testing
5. Deployment: Prisma migrations, Docker container, CI/CD

Configuration and Launch

// keystone.ts import { config } from '@keystone-6/core'; import { lists } from './schema'; import { withAuth, session } from './auth'; export default withAuth( config({ db: { provider: 'postgresql', url: process.env.DATABASE_URL!, enableLogging: true, idField: { kind: 'uuid' } }, lists, session, ui: { isAccessAllowed: (context) => !!context.session?.data }, server: { cors: { origin: [process.env.FRONTEND_URL!], credentials: true } }, }) ); 

Example Model: Post

// lists/Post.ts import { list } from '@keystone-6/core'; import { text, relationship, timestamp, select, image, document } from '@keystone-6/core/fields'; export const Post = list({ access: { operation: { query: () => true, create: ({ session }) => !!session, update: ({ session }) => !!session, delete: ({ session }) => session?.data?.role === 'admin', }, }, fields: { title: text({ validation: { isRequired: true } }), slug: text({ validation: { isRequired: true }, isIndexed: 'unique' }), status: select({ options: [ { label: 'Draft', value: 'draft' }, { label: 'Published', value: 'published' }, { label: 'Archived', value: 'archived' }, ], defaultValue: 'draft', }), content: document({ formatting: true, links: true }), author: relationship({ ref: 'Author.posts' }), featuredImage: image({ storage: 'local_images' }), }, }); 

GraphQL API and Frontend Integration

After running npx keystone dev, GraphQL Playground opens at http://localhost:3000/api/graphql. Example query:

query GetPosts { posts(where: { status: { equals: "published" } }, orderBy: { publishedAt: desc }) { id title slug author { name } } } 

In Next.js, use Apollo Client:

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'; export const client = new ApolloClient({ link: createHttpLink({ uri: process.env.KEYSTONE_API_URL }), cache: new InMemoryCache(), }); 

What's Included

• Data schema creation (lists, relationships, hooks)
• Access and role configuration
• Frontend integration (Next.js, Nuxt 3, Gatsby)
• Storage configuration (local, S3)
• Deployment and migrations
• API and admin UI documentation
• Editor team training
• 1-month post-launch support

How KeystoneJS Accelerates Development

In practice, the code-first approach allows us to reduce initial setup time by 2–3x compared to admin-first CMS. We get a ready admin panel and API immediately after describing the schema. For example, in one e-commerce project, we saved 4 days just on the design phase, bringing significant cost savings to the client.

Typical Site Development Timeline

For complex projects, 3–5 weeks. Get a consultation from our engineer for a project estimate.