🌀 A CMS for APIs and Clouds. Build CMS ultra fast and effortless with GraphQL, Prisma, Firebase and Restful APIs. Based on React & Apollo GraphQL
Clone or download


npm version npm download CircleCI branch Twitter Follow Twitter URL

Community chat

  • English:
  • Chinese:

Join the community on Spectrum

Canner, a CMS for APIs and Clouds. Canner is a universal Content Management System (CMS) framework, which build CMS ultra fast and effortless with GraphQL, Prisma, Firebase and Restful APIs.

Canner flow



CMS features

Sources and API

Benefits and advantages

🌍 One Framework

Canner is flexible and agnostic, that you can learn once and create any form of CMS for many different databases.

⚑️ Ultra Fast

By defining a Canner schema in JSX, you can determine how the CMS stores data in your databases and the appearance of the CMS UI/UX.


πŸ’ͺ Effortless

With different connectors, you are able to create a CMS to interact with Firebase, MySQL, PostgreSQL, GraphQL with the same schema.

πŸ’Έ Lower cost

Since Canner schema is only a JSX (XML-like) language without any logistic code, in other words, you can maintain your code in a configuration file and easy to maintain using version controls.

πŸ™Œ Why create Canner?

Before we built Canner CMS framework, we've tried other CMS frameworks such as Wordpress, Drupal, etc. What we found was that getting simple functions to work was easy enough, but once you try to build and scale into your product or your service you ran into deeper issues...

  1. Humongous codebase: Each CMS framework is humongous and complex, if you want to use them you have to install a huge codebase into your system, and most of the time it'll affect and mess with all your existing code.

Canner's CMS is only a React component.

  1. Hardcoded and limited APIs: APIs should not be predefined and even hard coded into the codebase, which is critical for building advanced use cases and impossible to build into your system.

Canner doesn't predefine any API and data structure.

  1. Re-inventing the view layer seemed inefficient and limiting: Most CMS rolled their own views, instead of using existing technologies like React, so you have to learn a whole new system, in order to make some changes.

Canner natively allows you to use React components without any side-effect.

  1. CMSes are binded with frontend code: Many CMSes bind with frontend code, so there are many needless and complex conventional namings and settings in your codebase, you have to learn all the system before start designing your theme.

Canner is an agnostic CMS for any application, includes websites, mobile apps, IoTs, and even chatbots.

  1. Vendor lock-in: Many CMSes are locked into a specific database and service, it's impossible to switch existing cloud services or databases later.

Canner allows you to connect any database and host anywhere, we even allow you to use Canner in hybrid clouds.

  1. Building complex, nested CMS was impossible: Many CMS are design for simple use cases such as blog, ecommerce websites. As your service grow larger and complex, you'll run into several bottlenecks to grow your CMS that fits.

Canner uses schema to define your CMS, it could scale, and could be built into large applications and usages.

  1. Building CMS fit your APIs was impossible: Most CMS are not purely CMS, they are design for building templates in it's own structure and platform. So it's nearly impossible to build CMS that fit into your existing infrastructure.

Canner adapts to your APIs.

  1. Design CMS structure is like managing a huge code base: Maintaining your CMS structure is like mess with huge code base with lots of conventions that you must follows.

Canner is only a React component.

Of course not every CMS exhibits all these issues, but if you tried using another CMS you might have run into similar problems.

If that sounds familiar, you might like Canner. Which motivates us to solve these problems.

If you are interested in how we solve these problems see Our mission


πŸ”₯πŸ”₯ Only 3 commands to start πŸ”₯πŸ”₯

# 1. Download Canner CLI tool
➜ $ npm install --global @canner/cli

# 2. Initialize schema
➜ $ canner init:schema
# Answer the questions
# Initializing schema...
# ? What template do you want to create? (Use arrow keys)
#   None
# ❯ Blog
#   Company
#   E-commerce
# ? What data source do you want to use?
#   None
#   Firebase admin
#   Firebase client
# ❯ Prisma
βœ” Initialized

# 3. Serve your CMS with Livereload in local, while you update your schema the dev server will automatically reload open http://localhost:9090
➜ $ canner script:serve

Preview and demo

CMS preivew

CMS schema

Using Canner, You only need to upload a XML-like(JSX) syntax, to create any kind and form of applications. Our CMS has built CMS for websites, mobile apps, and even chatbot applications. Amazingly, you can build a blog CMS within 200 lines of code, as for basic E-commerce CMS within 300 lines of code using Canner and select connector to connect to data sources, such as Firebase, GraphQL, Restful API, Prisma.

Wonder why we use JSX? read here


More demo visit /examples folder & canner-demo and canner.io

πŸ‘‰πŸ‘‰ START USING CANNER: https://www.canner.io

Get started


Canner connect to firebase


Introducing Adaptive CMS Framework

Canner advocate a new CMS structure called Adaptive CMS that is a novel CMS structure that differs from traditional CMS and headless CMS. The biggest difference is that Adaptive CMS decouples the view and data layers and builds data interfaces to connect to single or multiple data sources.


Learn more Why Adaptive CMS?


Install all dependencies.

We are using yarn workspace to manage all repos, learn more about Yarn workspace

To install packages




footer banner