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.
- 30+ CMS components
- Support Layouts
- Support Queries
- Support Chart
- Support i18n
- Support Validation
- Support Condition
- Support Customization
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.
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...
- 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.
- 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.
- 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
Reactcomponents without any side-effect.
- 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.
- 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.
- 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.
- 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.
- 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
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
- Visit Canner official site to learn more: https://www.canner.io
- Canner documentation: https://www.canner.io/docs/start-quick-intro
🔥 🔥 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
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
- DEMO: CMS for Firebase with SSR supported (NextJS) https://github.com/Canner/canner-firebase-cms
- Firebase - realtime database: https://www.canner.io/docs/tutorial-connect-to-firebase
- Prisma: https://www.canner.io/docs/tutorial-connect-to-prisma
Canner connect to firebase
- live demo: https://fir-cms-15f83.firebaseapp.com/login
- repo: https://github.com/Canner/canner-firebase-cms
- Step by Step tutorial: https://www.canner.io/docs/start-quick-html5up
- Why Firebase CMS: https://www.canner.io/docs/why-firebase-cms
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