Awesome Open Source
Awesome Open Source


Server-side React render service.    Build Status Coverage Status Code Climate Commitizen friendly license

What is Tessellate?

Tessellate is a server-side React service that creates static HTML and a JavaScript bundle from abstract JSON definitions. It is meant to be used as a Fragment as part of the Mosaic stack for micro services in the frontend but can be used independently as well.

Package Description Version
tessellate-bundler Builds universal React bundles from JSON. npm version
tessellate-fragment Dynamic server-side React render service. npm version
tessellate-server Common service foundation for editor and bundler. npm version
tessellate-editor Experimental editor for composing reusable components. npm version
tessellate-viewer Experimental layout service for composing Mosaic fragments. npm version
tessellate-transform Experimental JSON transformation tool. npm version

Articles and videos about Tessellate

Tessellate v2

The next version of tessellate is under development in the next branch of this repository.

Dynamic fragments

A Mosaic Fragment is a web service that provides some partial HTML, CSS and JavaScript. Multiple Fragments can be composed into a complete web page by the Tailor layout service. Tessellate is an opinionated implementation of such a Fragment.

tessellate-fragment responds to incoming requests based on a customizable* logic and uses React to render precompiled JavaScript bundles into static HTML. tessellate-bundler compiles those bundles ahead of time based on an abstract JSON document and with the help of webpack. We call this a dynamic Fragment because the bundles can be updated independetly from the Fragment and because they are selected dynamically for each request.

Tessellate offers a simple yet powerful solution to integrate content providers into a Mosaic stack for micro services in the frontend. Instead of implementing specialized Fragments to render different parts of a website, you can simply transform all your content into precompiled JavaScript bundles that Tessellate knows how to render. Please read the architecture overview to learn more.

* subject to ongoing development


The Tessellate micro services can easily be installed as Node modules:

npm i --save tessellate-bundler tessellate-fragment


Each micro service reads configuration from environment variables, command line arguments or a file. See each subproject for details.


Tessellate requires Node.js >= 7.6 and uses Lerna for managing packages. Run the following commands in the root directory to get started:

npm install   # Install dependencies and initialize packages.
npm run dist  # Compile all packages.

We recommend using Atom text editor together with the Nuclide plugin and Flow for static type checking.

Here's how to install Nuclide (requires Atom) and Flow:

apm install nuclide
npm install -g flow-bin


For details on pull requests, commit messages and conditions for contributing please see


Go to for detailed documentation.



Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,089,895
Reactjs (166,672
Web (37,465
Bundle (32,336
Fragments (5,062
Server Side Rendering (4,134
Mosaic (834