Open-source developer toolkit

Build canvas editors.
Skip the plumbing.

Practical React + Fabric.js patterns for image editors, annotation tools, whiteboards, and every canvas app in between.

Try the live canvas See the code
  • React-first
  • TypeScript-ready
  • MIT licensed
Canvas.tsx Ready 
import { Canvas, Rect } from 'fabric'
import { useEffect, useRef } from 'react'

export function Editor() {
  const ref = useRef(null)

  useEffect(() => {
    const canvas = new Canvas(ref.current)
    canvas.add(new Rect({
      fill: '#5b5cf0',
      width: 120, height: 120
    }))

    return () => canvas.dispose()
  }, [])

  return <canvas ref={ref} />
}
Made for Image editors Annotation tools Whiteboards Template builders

Live example

The canvas is the product.
Everything else should get out of the way.

Select, move, scale, edit, and export. This demo runs entirely in your browser with Fabric.js.

Social card1200 × 630

Select any object to edit it

01

Patterns that survive production

Lifecycle, events, resize, state boundaries, serialization, and cleanup—without pretending Fabric.js is the DOM.

02

Examples you can actually run

Each guide starts from working code, not a disconnected API reference or a screenshot of the happy path.

03

An editor starter, when you need it

We are validating a commercial starter kit for teams that would rather ship features than rebuild undo and layers.

Quick start

Your first canvas
in ten minutes.

Start with Fabric.js directly. The open-source React integration is being updated for current React and Fabric.js versions.

Follow development on GitHub
npmpnpmyarn
npm install fabric
import { Canvas } from 'fabric'

const canvas = new Canvas('canvas', {
  width: 800,
  height: 600,
  backgroundColor: '#f7f7fb'
})

Building an editor?

Tell us what keeps
slowing you down.

Your use case will shape the open-source library and the upcoming Editor Starter Kit.

Share your use case