Fabric.js
A JavaScript library for drawing, editing and exporting interactive objects on HTML canvas.
- Stars
- 31.5k
- Forks
- 3.6k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 days ago
- Type
- Library
What it is
Fabric.js is a JavaScript library that makes it easier to work with the HTML canvas element. It gives you ready-made shapes, text, images, filters, gradients and brushes, plus built-in mouse interactions such as move, scale, rotate and skew. It can also read and write SVG, JSON, PNG and JPG data, and it can run in Node.js with the node-canvas package.
- Build a browser-based drawing or whiteboard app with shapes, text and brushes
- Let users move, rotate and resize objects on a canvas
- Export a canvas to SVG, JSON, PNG or JPG
- Generate images on a Node.js server using the fabric/node entrypoint
Great for
- Web developers building interactive canvas editors or drawing tools
- Teams that need selectable, movable and resizable objects on a canvas without writing that logic from scratch
- Developers who want to load or export SVG and JSON canvas content
- Node.js developers who need to render canvas images on the server
Not ideal for
- People who only need a simple static chart or image; a lighter drawing API may be enough
- Projects that must support Internet Explorer 11 or legacy Edge, since the README marks both as unsupported
- Non-developers looking for a finished app; this is a library to build with
How to get it
- 1
Install with a package manager
You'll need: Node.js 20 or newer (for Node.js use) · A modern browser (for browser use)
Install for browser applications
npm install @fabricjs/browserInstall for Node.js applications
npm install @fabricjs/node - 2
Run it
- Install the package for your environment with npm.
- Add a canvas element to your HTML page, or create a canvas in Node.js.
- Import Canvas from @fabricjs/browser (or StaticCanvas from @fabricjs/node).
- Create a shape such as a Rect, add it to the canvas, and call renderAll if needed.
- 3
Get the most out of it
- Use the explicit @fabricjs/* entrypoints for new projects, as the README recommends.
- Keep fabric and all @fabricjs/* packages on matching versions to avoid duplicate runtimes.
- Add optional extension packages such as @fabricjs/aligning-guidelines for extra features.
- Check the README's templates folder (.codesandbox/templates) for ready-to-use starting points.
Downloads
Strengths
- Covers many built-in features: shapes, controls, animations, image filters, gradients, patterns and brushes
- Supports SVG and JSON import and export along with JPG and PNG output
- Typed and modular, with MIT license and a large community (about 31.5k stars)
Trade-offs
- Node.js use depends on node-canvas and jsdom, which the README notes can have their own limitations and bugs
- The package names have changed; the README recommends new packages (@fabricjs/browser, @fabricjs/node) while keeping the legacy fabric package, which can confuse newcomers
- Browser support is limited to recent versions as listed in the README table
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| fabric.js (this) | 31.5k | Library | intermediate | 4 days ago | Web developers building interactive canvas editors or drawing tools |
| pixijs | 48.6k | Library | intermediate | 6 days ago | Web developers building interactive 2D graphics or animations |
| excalidraw | 135k | App | beginner | 4 days ago | Teams sketching diagrams or wireframes together in a shared canvas |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.