React Drawing Library

Overview

The React Drawing library provides a cross-browser solution for interactive vector graphics. This library is used by KendoReact to create the data visualizations offered through KendoReact Charts, and is responsible for the PDF library and exporting HTML and KendoReact components to images or SVG elements.

See React Drawing Library Overview demo

Drawing DOM Elements

The KendoReact Drawing library can convert part of or a whole existing page to drawing primitives, which can then be exported as a PDF, SVG or PNG format. This allows for any HTML portion of a React application, or the entire current view, to be exported to any of the supported formats.

See React Drawing Library Drawing DOM Elements demo

Basic Shapes

As a way to help build more complex visuals, the KendoReact Drawing library provides a set of basic shapes as a foundation. This includes rendering shapes like circles and rectangles, text, images, gradients, and custom elements you may want to include.

See demo

Exporting to PDF

The React Drawing library developers to export HTML content to PDF. This includes taking what is currently displayed on the page and exporting it, as well as customizing the exported view by embedding fonts, setting custom CSS, disabling hyperlinks and more.

See React Drawing Library Exporting to PDF demo

Exporting to Images

Just like with the PDF export, the KendoReact Drawing library enables any drawing to be exported as an image via the PNG file format.

See React Drawing Library Exporting to Images demo

Export to SVG

Along with PDF and Image export, the React Drawing library can export any drawing to a Scalable Vector Graphics (SVG) document.

See React Drawing Library Export to SVG demo