Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering.
JavaScript HTML Makefile
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
test Add checks for null when render a document. Mar 27, 2017
LICENSE Update license. Feb 20, 2016


Build Status Gitter

What the cat is that?

Catberry was developed to help create "isomorphic/Universal" Web applications.

Long story short, isomorphic/universal applications are apps that use the same codebase on both the server and client environments to render what the client would see as a "Single Page Application".


Install Catberry CLI using following command:

npm install -g catberry-cli

Use Catberry CLI to create an empty project with Handlebars support like this:

catberry init empty-handlebars

Or an example application that works using GitHub API:

catberry init example

Also, you can get a list of all templates:

catberry init ?

Useful links

Why should I use that?



For more details please proceed to Catberry Documentation.

Typical Cat-component example

'use strict';

class CoolComponent {

	 * Creates a new instance of the "CoolComponent" component.
	 * @param {ServiceLocator} locator The service locator for resolving dependencies.
	constructor(locator) {
		// you can resolve any dependency from the locator.

	 * Gets data for the template.
	 * This method is optional.
	 * @returns {Promise<Object>|Object|null|undefined} Data for the template.
	render() {
		return this.$context.getStoreData();

	 * Returns event binding settings for the component.
	 * This method is optional.
	 * @returns {Promise<Object>|Object|null|undefined} Binding settings.
	bind() {
		return {
			// CSS selector
			'.clickable': () => window.alert('Ouch!');

	 * Cleans up everything that has NOT been set by .bind() method.
	 * This method is optional.
	 * @returns {Promise|undefined} Promise of nothing.
	unbind() {
		// nothing to do here we have used bind properly

module.exports = Some;

The component is used as a custom tag:

<cat-cool id="unique-value" cat-store="group/CoolStore"></cat-cool>

Typical Store example

'use strict';

class CoolStore {
	 * Creates a new instance of the "CoolStore" store.
	 * @param {ServiceLocator} locator The service locator for resolving dependencies.
	constructor(locator) {

		 * Current universal HTTP request for environment-independent requests.
		 * @type {UHR}
		 * @private
		this._uhr = locator.resolve('uhr');

		 * Current lifetime of data (in milliseconds) that is returned by this store.
		 * @type {number} Lifetime in milliseconds.
		this.$lifetime = 60000;

	 * Loads data from a remote source.
	 * @returns {Promise<Object>|Object|null|undefined} Loaded data.
	load() {
		// Here you can do any HTTP requests using this._uhr.
		// Please read details here

	 * Handles an action named "some-action" from any component or store.
	 * @returns {Promise<Object>|Object|null|undefined} Response to the component/store.
	handleSomeAction() {
		// Here you can call this.$context.changed() if you're sure'
		// that the remote data on the server has been changed.
		// You can additionally have many handle methods for other actions.

module.exports = Some;

Browser Support

While Catberry is capable of rendering pages for any browser on the server, due to the use of certain HTML5 features, like the History API, only partial support of old browsers is possible for the client-side JavaScript application.

The main goal of the Catberry Framework is to use the full power of new technologies and provide a user with the best possible experience.

In fact, a user gets an HTML page from the server only once and all the rest of the time the whole page is changing in a browser receiving only pure data from API service(s) used with the application.

Thanks to Catberry's progressive rendering engine, user receives a page from the server component by component as fast as each component renders its template not waiting for the whole page is built.

Catberry supports 2 last versions of modern browsers and IE 11. It depends on Babel babel-preset-env preset which config you can override putting a .babelrc file in your project.


There are a lot of ways to contribute into Catberry:

Denis Rechkunov