Mondrian

Mondrian is a canvas-based and framework-agnostic spreadsheet renderer, named after the eccentric Dutch painter Piet Mondrian. Like its namesake, Mondrian is very good at painting squares and grids. You may use it in-browser or against a server side canvas implementation such as Skia Canvas.

Installation

To use Mondrian as a project dependency, run:

npm install @grid-is/mondrian

Note

Mondrian is a private package. See our installation docs for information on how to get access.

Usage example

In this example we’ll open an Excel workbook, select the sheet named Sheet1, render it to a canvas, and save that as a PNG.

Mondrian can render a sheet from a pre-parsed workbook. The code you need changes slightly depending on whether you’re using our spreadsheet viewer (aka Cellatrix) or our fully-fledged spreadsheet engine (aka Apiary).

Viewer

First install several additional packages needed to run this example.

npm install @grid-is/cellatrix skia-canvas @borgar/xlsx-convert

Then save this as render.js and run it with node render.js.

import xlsxConvert from '@borgar/xlsx-convert';
import { Model } from "@grid-is/cellatrix";
import { Rect, Renderer } from "@grid-is/mondrian";
import { Canvas } from "skia-canvas";

// Set up a canvas and a viewport.
const canvasSize = new Rect(0, 0, 800, 600);
const canvas = new Canvas(canvasSize.width, canvasSize.height);

// Prepare a JSON spreadsheet for the renderer.
const jsf = await xlsxConvert('MyWorkbook.xlsx');
const model = Model.fromJSF(jsf);

// Prepare the renderer.
const renderer = new Renderer();
renderer.setWorkbook(model.getWorkbook());
renderer.setSheet("Sheet1");

// Adjust the renderer viewport.
const viewRect = renderer.refToRect(renderer.getFullSheetRef());
renderer.resize(canvas, canvasSize);

// Draw the sheet.
renderer.render(canvas, viewRect);

// Optionally, save the sheet as an image.
canvas.toFile("MyWorkbook.png", { density: 1 });

Engine

First install several additional packages needed to run this example.

npm install @grid-is/apiary skia-canvas @borgar/xlsx-convert

Then save this as render.js and run it with node render.js.

Note

With versions of Node earlier than v24.5.0 or v22.19.0, you’ll need to run this script with node --experimental-wasm-modules render.js.

import xlsxConvert from '@borgar/xlsx-convert';
import { Model } from "@grid-is/apiary";
import { Rect, Renderer } from "@grid-is/mondrian";
import { Canvas } from "skia-canvas";

// Make sure Apiary's WebAssembly-based formula parser is ready to use.
await Model.preconditions;

// Set up a canvas and a viewport.
const canvasSize = new Rect(0, 0, 800, 600);
const canvas = new Canvas(canvasSize.width, canvasSize.height);

// Prepare a JSON spreadsheet for the renderer.
const jsf = await xlsxConvert('MyWorkbook.xlsx');
const model = Model.fromJSF(jsf);

// Prepare the renderer.
const renderer = new Renderer();
renderer.setWorkbook(model.getWorkbook());
renderer.setSheet("Sheet1");

// Adjust the renderer viewport.
const viewRect = renderer.refToRect(renderer.getFullSheetRef());
renderer.resize(canvas, canvasSize);

// Draw the sheet.
renderer.render(canvas, viewRect);

// Optionally, save the sheet as an image.
canvas.toFile("MyWorkbook.png", { density: 1 });

Next steps

If you’re interested in reading more about Mondrian’s public API, start with the Renderer class.