Programming language: JavaScript
License: MIT License
Tags: UI Components     Canvas    
Latest version: v0.5.1

react-sketch alternatives and similar libraries

Based on the "Canvas" category.
Alternatively, view react-sketch alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-sketch or a related project?

Add another 'Canvas' Library



GitHub release NPM release NPM downloads Build status

A Sketch tool for React based applications, backed-up by FabricJS

idea-image Please note that this module is still in development! Feel free to send me enhancements and ideas :)


npm install react-sketch --save

or with yarn

yarn add react-sketch

Source installation

In order to build from source, read the relevant instructions first.

Tested with node versions 6,7,8.


Import the relevant SketchField component and use it, you can find more on the examples folder of the project

import {SketchField, Tools} from 'react-sketch';

class SketchFieldDemo extends React.Component {
     render() {
        return (
            <SketchField width='1024px' 

Configuration Options

Option Type Default Description
tool Enumeration (string) pencil The tool to use, can be select, pencil, circle, rectangle, pan
lineColor String black The color of the line
lineWidth Number 1 The width of the line
fillColor String transparent The fill color (hex format) of the shape when applicable (e.g. circle)
backgroundColor String transparent The the background color of the sketch in hex or rgba
undoSteps Number 15 number of undo/redo steps to maintain
imageFormat String png image format when calling toDataURL, can be png or jpeg
width Number No Value(null) Set/control the canvas width, if left empty the sketch will scale to parent element
height Number 512 Set/control the canvas height, if left empty the sketch will take a reasonable default height
value JSON Property to utilize and handle the sketch data as controlled component
defaultValue JSON Default initial data, to load. If value is set then value will be loaded instead
widthCorrection Number 2 Specify some width correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style
heightCorrection Number 0 Specify some height correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style

Available tools

Tool Description
Pencil Free drawing pencil
Line Gives you the ability to draw lines
Rectangle Create rectangles
Circle Create circles
Rectangle Create Rectangles
Select Disables drawing and gives you the ability to modify existing elements in the canvas
Pan Disables drawing and gives you the ability to move the complete canvas at will, useful to adjust the canvas when zooming in or out (thank you wmaillard)


The project includes a webpack server for running the examples, just run:

git clone https://github.com/tbolis/react-sketch.git
yarn install
npm start

and navigate to http://localhost:23000

You can as well check the live showcase here: http://tbolis.github.io/showcase/react-sketch/


See https://github.com/tbolis/react-sketch/issues


See https://github.com/tbolis/react-sketch/blob/master/CHANGELOG.md


MIT, do remember to add a reference if you find it useful :)

*Note that all licence references and agreements mentioned in the react-sketch README section above are relevant to that project's source code only.