A schematic and diagram visualization library for fabric.js canvases, with advanced grid system for precise coordinate-based drawing.

fabric-schematics evolved from fabric-layers-core which was based on the excellent original work of IndoorJS by Mudin.

Base (EventEmitter2)
├── Map (+ ModesMixin)
│   ├── Grid
│   └── Point

This library focuses on providing schematic and diagram components, starting with an advanced coordinate grid system. Future versions will include connectors, markers, and measurement tools.

To explore the grid functionality, follow these steps:

1. Install Dependencies

   nvm i && yarn install

2. Build the Library

   nvm i && yarn build

3. Open the Demo

   • Open grid-demo.html directly in your browser
   • The demo includes:
     • Interactive grid with zoom/pan functionality
     • Coordinate display
     • Zoom level controls
     • Reset view button

4. Development Workflow

   • nvm i && yarn build:watch
   • Make changes to the source code
   • Refresh the browser to see changes

To publish a new version, run:

yarn test

yarn build

if no errors, run:

yarn release

git push --follow-tags origin main && npm publish

You will be prompted to enter a One-Time-Password (OTP) from your GitHub account.

PRs and issues are welcome!

1. Fork & git clone
2. yarn install
3. yarn dev – watch/build
4. Add tests in test/ and run yarn test

Please follow the Conventional Commits spec; CI will lint commit messages.

MIT © 2025 Allen Joslin (author of fabric-schematics)

MIT © 2022 Mudin (original author of IndoorJS)