Jspreadsheet Shapes Extension

Insert floating SVG shapes into your Jspreadsheet spreadsheets — basic forms, block arrows, equation symbols, flowchart elements, connectors, and more. Each shape supports editable text, fill, border, and font colors.

Product page: https://jspreadsheet.com/products/shapes

Installation

npm install @jspreadsheet/shapes

Usage

Register the extension on your Jspreadsheet instance:

import jspreadsheet from 'jspreadsheet';
import shapes from '@jspreadsheet/shapes';
import '@jspreadsheet/shapes/dist/style.css';

jspreadsheet.setExtensions({ shapes });

const spreadsheet = jspreadsheet(element, {
    worksheets: [{
        data: [[]],
    }],
    toolbar: true,
});

Once registered, the Insert Shape button appears in the toolbar. Users can pick a shape from the gallery, then click and drag to place it on the worksheet. Double-click a placed shape to edit its text; the side panel exposes background, border, and font color controls.

Available shapes

Shapes are grouped into six categories in the picker:

• Lines — simple line, single/double arrow line, elbow connector, curved elbow connector, arrow and double-arrow variants of each.
• Rectangles — rectangle, rounded rectangle, single/double/opposite cut-corner rectangles, mixed rounded-corner rectangles.
• Basic Forms — ellipse, triangle, right triangle, parallelogram, trapezium, diamond, pentagon through decagon, cylinder, cube, bevel, donut, block shape, teardrop, smiley, heart, lightning bolt, sun, crescent moon, cloud, brackets, and more.
• Block Arrows — left/right/up/down arrows, double-headed and quad arrows, bent and U-turn arrows, curved arrows, striped and notched arrows, callouts, circular arrow.
• Equation Shapes — plus, minus, multiplication, division, equal, not equal.
• Flowchart — terminator, process variants, predefined task, internal storage, document, multitasking documents, manual input/operation, off-page connector, card, punched tape, swimming junction, OR/collate/sort/extract/merge, stored data, delay, sequential and direct access storage, display.

License

This extension requires a commercial license. See https://jspreadsheet.com for pricing and licensing details.

Links

• Jspreadsheet — https://jspreadsheet.com
• LemonadeJS — https://lemonadejs.com
• jSuites — https://jsuites.net