npm i @mechanic-design/engine-canvas


Mechanic is a framework to build assets built on web code.

by designsystemsinternational

2.0.0-beta.7 (see all)License:MITTypeScript:Not Found
npm i @mechanic-design/engine-canvas

Mechanic Logo

Mechanic is a powerful design toolchain that helps forward-looking organizations move away from a manual design workflow by automating their design operations. Built with love by your friends at Design Systems International.

CURRENT STATUS: v1.2.0 is out now! Try it and tell us what you think! v2.0.0-beta.7 is also out and we're testing it! Feel free to test it out too!

Get Started

To start using right away and create a new Mechanic project, run the following:

npm init mechanic@latest

This will build a new base Mechanic project, with one design function! Follow the CLI instructions to customize, install and start running.

Mechanic App Screenshot


Check the docs site.

Monorepo Content

The repo is managed via lerna.

create-mechanicMechanic project skeleton creator.
@mechanic-design/cliCommand-line tool to generate new Mechanic projects, design functions and build app.
@mechanic-design/coreCore Mechanic functionalities. Used by Mechanic's design tools and defines Mechanic class to be extended as Engines.
@mechanic-design/ui-componentsReact component library intended to be used as inputs for design function inputs.
@mechanic-design/engine-canvasEngine function that extends base Mechanic class, intended to render static assets or animations built using the HTML Canvas API.
@mechanic-design/engine-p5Engine function that extends base Mechanic class, intended to render static assets or animations built using p5.js.
@mechanic-design/engine-reactEngine function that extends base Mechanic class, intended to render static assets or animations built using React components that renders SVG.
@mechanic-design/engine-svgEngine function that extends base Mechanic class, indended to render static assets or animations built using through SVG strings.
@mechanic-design/utilsGeneral purpose CLI definitions to be used by other Mechanic packages.
@mechanic-design/dsi-logo-makerA design tool project made with Mechanic to build assets and animations that follows DSI's identity logo.


To get started, clone this repo.

Then run, npm run bootstrap. This will symlink all the dependencies together and run npm i inside each package. Running npm i inside a package folder will not work.

That should be enough to test certain individual package functionality, but to test mechanic projects with local package versions, we use yalc.

npm link falls short to reproduce package dependencies resolution as projects would by installing from the npm registry. yalc can locally publish packages as it would to the npm registry, to then use in local projects.

To do this, first install yalc globally. To publish all packages in the repo, run npm run publish:local. To publish an individual package, run yalc push from its directory or yalc push ./packages/[package]. Run any of these commands when you wish to update the published content.

Then in the project to test the package(s), before installing dependencies run yalc add [package] for all packages you wish to test. Then install normally with npm i.

For any other needs, check yalc's documentation.


Run npm run publish



GitHub Stars



3mos ago








11d ago
No alternatives found
No tutorials found
Add a tutorial