KeystoneJS Admin UI App.
Last updated 3 months ago by lorenhaim .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install @koikorn/app-admin-ui 
SYNC missed versions from official npm registry.

Admin UI app

View changelog

A KeystoneJS app which provides an Admin UI for content management.


const { Keystone } = require('@koikorn/keystone');
const { GraphQLApp } = require('@koikorn/app-graphql');
const { AdminUIApp } = require('@koikorn/app-admin-ui');

const authStrategy = keystone.createAuthStrategy({...});

module.exports = {
  keystone: new Keystone(),
  apps: [
    new GraphQLApp(),
    new AdminUIApp({
      adminPath: '/admin',


Option Type Default Required Description
adminPath String /admin false The path of the Admin UI.
apiPath String /admin/api false The path of the API provided to the Admin UI.
graphiqlPath String /admin/api false The path of the graphiql app, an in-browser IDE for exploring GraphQL.
authStrategy Object null false See Authentication Guides
hooks String ./admin-ui/ false Path to customization hooks. See below for more information.
enableDefaultRoute Bool false false If enabled, the path of the Admin UI app will be set to /.
schemaName String public false
isAccessAllowed Function true false Controls which users have access to the Admin UI.
adminMeta Object {} false Provides additional adminMeta. Useful for Hooks and other customizations


Customization hooks allow you to modify various areas of the Admin UI to better suit your development needs. The index.js file at the given path should export a single config object containing your chosen hooks. All are optional.

If omitted, Keystone will look under ./admin-ui/ for a hooks config export.


new AdminUIApp({ hooks: require.resolve('./custom-hooks-path') });

The following hooks are available. Each is a function that takes no arguments.

export default {


The logo to display on the signin screen.

Should return a React component.

export default {
  logo: () => <MyAwesomeLogo />,


Allows grouping list pages in the sidebar or defining completely new pages.

Should return an array of objects, which may contain the following properties:

Name Type Description
label String The page name to display in the sidebar.
path String The page path.
component Function|Class A React component which will be used to render this page.
children Array An array of either Keystone list keys or objects with listKey and label properties.
export default {
  pages: () => [
    // Custom pages
      label: 'A new dashboard',
      path: '',
      component: Dashboard,
      label: 'About this project',
      path: 'about',
      component: About,
    // Ordering existing list pages
      label: 'Blog',
      children: [
        { listKey: 'Post' },
        { listKey: 'PostCategory', label: 'Categories' },
        { listKey: 'Comment' },
      label: 'People',
      children: ['User'],


This function takes the same arguments as a shorthand imperative boolean access control. It must return either true or false.

Important: If omitted, all users with accounts will be able to access the Admin UI. The example below would restrict access to users with the isAdmin permission.


new AdminUIApp({
  /*...config */
  isAccessAllowed: ({ authentication: { item: user, listKey: list } }) => !!user && !!user.isAdmin,

Current Tags

  • 5.12.0                                ...           latest (3 months ago)

2 Versions

  • 5.12.0                                ...           3 months ago
  • 7.0.5                                ...           3 months ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (80)
Dev Dependencies (0)
Dependents (1)

Copyright 2014 - 2017 © taobao.org |