Canvas Commons

Canvas Commons is two things:

• A TypeScript library that uses generators to program animations.
• An editor providing a real-time preview of said animations.

It's a specialized tool designed to create informative vector animations and synchronize them with voice-overs.

Aside from providing the preview, the editor allows you to edit certain aspects of the animation which could otherwise be tedious.

Using Canvas Commons

Check out our getting started guide to learn how to use Canvas Commons.

Developing Canvas Commons locally

The project is maintained as one monorepo containing the following packages:

Name	Description
2d	The default renderer for 2D motion graphics
core	All logic related to running and rendering animations.
create	A package for bootstrapping new projects.
docs	Our documentation website.
e2e	End-to-end tests.
editor	The user interface used for editing.
examples	Animation examples used in documentation.
ffmpeg	Vite plugin and exporter for FFmpeg-driven video rendering.
player	A custom element for displaying animations in a browser.
template	A template project included for developer's convenience.
vite-plugin	A plugin for Vite used for developing and bundling animations.

Node 20.19 or newer is required. After cloning the repo, run pnpm install in the root of the project to install all necessary dependencies. Then run pnpm run build to build all the packages.

Developing Editor

When developing the editor, run the following command:

pnpm run template:dev

It will start a vite server that watches the core, 2d, editor, and vite-plugin packages. The template package itself contains a simple canvas-commons project that can be used during development.

Developing Player

To develop the player, first build the template: pnpm run template:build. Then, start pnpm run player:dev.

Installing a local version of Canvas Commons in a project

It can be useful to install a local version of Canvas Commons in a standalone project. For example, when you want to use your own fork with some custom-made features to create your animations.

Let's assume the following project structure:

projects/
├── canvas-commons/ <- your local monorepo
└── my-project/ <- a bootstrapped project
    └── package.json

You can link the local packages from the monorepo by updating the package.json of your project. Simply replace the version with a file: followed by a relative path to the package you want to link:

  "dependencies": {
-   "@canvas-commons/core": "^0.2.0",
+   "@canvas-commons/core": "file:../canvas-commons/packages/core",
    // ...
  },

If you're linking the editor package, you'll also need to modify vite.config.ts to allow vite to load external files:

import {defineConfig} from 'vite';
import canvasCommons from '@canvas-commons/vite-plugin';

export default defineConfig({
  server: {
    fs: {
      // let it load external files
      strict: false,
    },
  },
  plugins: [canvasCommons()],
});

This is necessary because the editor styles are loaded using the /@fs/ prefix, and since the linked editor package is outside the project, vite needs permission to access it.

Then run pnpm install in to apply the changes and that's it.

You can use the same technique to test out any custom package you're working on.

Contributing

Read through our Contribution Guide to learn how you can help make Canvas Commons better.