# @prairielearn/sketchresponse

> A configurable JavaScript front-end drawing tool with plugin components - adapted for use in PrairieLearn

Latest version **0.2.0** (published 2026-09-24) · LGPL-2.1 license · 0 weekly downloads

## Install

```sh
npm install @prairielearn/sketchresponse
pnpm add @prairielearn/sketchresponse
yarn add @prairielearn/sketchresponse
bun add @prairielearn/sketchresponse
```

## Health

**Score 60/100 (C)** — status: active.

Positive: no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2026-09-24 |
| First published | 2026-02-11 |
| Weekly downloads | 0 |
| License | LGPL-2.1 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 0 |
| Maintainers | nwalters512, mwest1066 |

## Links

- npm: https://www.npmjs.com/package/@prairielearn/sketchresponse
- Repository: https://github.com/PrairieLearn/sketchresponse
- Homepage: https://github.com/PrairieLearn/sketchresponse#readme
- Issues: https://github.com/PrairieLearn/sketchresponse/issues
- npm.io page: https://npm.io/package/@prairielearn/sketchresponse

## Dependencies (13)

- [sass](https://npm.io/package/sass.md) ^1.89.0
- [katex](https://npm.io/package/katex.md) ^0.16.9
- [pepjs](https://npm.io/package/pepjs.md) ^0.5.3
- [buffer](https://npm.io/package/buffer.md) ^6.0.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [fastclick](https://npm.io/package/fastclick.md) ^1.0.6
- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [deep-extend](https://npm.io/package/deep-extend.md) ^0.6.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^16.0.5
- [sweetalert2](https://npm.io/package/sweetalert2.md) ^11.22.0
- [jsondiffpatch](https://npm.io/package/jsondiffpatch.md) ^0.7.3
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1
- [stylelint-scss](https://npm.io/package/stylelint-scss.md) ^6.12.0

## Recent versions

- 0.2.0 (latest) — 2026-09-24
- 0.1.4 — 2026-05-05
- 0.1.3 — 2026-04-23
- 0.1.2 — 2026-04-23
- 0.1.1 — 2026-04-21
- 0.1.0 — 2026-04-18
- 0.0.6 — 2026-04-02
- 0.0.5 — 2026-04-01
- 0.0.3 — 2026-02-16
- 0.0.2 — 2026-02-11
- 0.0.1 — 2026-02-11

## README

# Sketch Tool

#### A configurable Javascript front-end drawing tool with plugin components.

This version of [SketchResponse](https://sketchresponse.github.io) has been updated to be compatible with more recent versions of its dependencies and WebPack. It has also been modified for compatibility with the [PrairieLearn](https://www.prairielearn.com) platform, for example by supporting more than one SketchResponse canvas on the same web page and adding support for new customizations.

Only the Sketch Tool itself has been updated, as all remaining contents of the repository (e.g., grading libraries) were re-written and replaced with PrairieLearn-specific grading mechanisms. These re-written graders are not stored in this repository, but will be published separately, as part of an open-source element for PrairieLearn.

### Prerequisites

You'll need to have [Node.js](http://nodejs.org) and npm (which is now packaged with Node) to be installed on your system.

### Installation

- Change to the _sketch_tool_ directory:

  ```sh
  $ cd sketchresponse/sketch_tool
  ```

- Install dependencies listed in _package.json_:

  ```sh
  $ npm ci
  ```

### Usage

- Change to the _sketch_tool_ directory:

  ```sh
  $ cd sketchresponse/sketch_tool
  ```

- To start the development server:

  ```sh
  $ npm run start --debug=allPlugins
  ```

  This will automatically open your default browser and load the tool with options listed in the `allPlugins` object located in [`debugConfigs.js`](https://github.com/SketchResponse/sketchresponse/blob/master/sketch_tool/html/debugConfigs.js).

  Options are:
  - _width, height:_ dimensions of the tool.
  - _xrange, yrange:_ dimension of the drawing canvas.
  - _xscale, yscale:_ linear or logarithmic scales. Only linear is supported for the moment.
  - _coordinates:_ cartesian or polar.
  - _plugins:_ modules that extend drawing functionality either automatically (for example axes and image) or are placed in the top toolbar (freeform, horizontal and vertical lines) and let the user draw the corresponding shape on the canvas.

  You can also load these additional configurations which show various features of the tool:
  - allPluginsLatex
  - initialState
  - axesParams
  - tagPosition
  - newPlugins
  - invalidConfig
  - pluginGroup

- To use [ESLint](https://eslint.org) on the JS code located in `sketch_tool/lib`:
  ```sh
  $ npm run lint:js
  ```
- To use [StyleLint](https://stylelint.io) on the SCSS (or CSS) code located in `sketch_tool/styles`:

  ```sh
  $ npm run lint:css
  ```

- To build the _sketchresponse/static/sketch_tool_dist_ directory:

  ```sh
  $ npm run build
  ```

  You can change the target browsers of the build by modifying the [BrowserList](https://github.com/browserslist/browserslist) entry in [`package.json`](https://github.com/SketchResponse/sketchresponse/blob/master/sketch_tool/package.json). Currently the target is set to the last 2 versions of every major browser excluding IE.

### Plugins

They are located in the following [`directory`](https://github.com/SketchResponse/sketchresponse/tree/master/sketch_tool/lib/plugins/).

- **axes:**
  Adds horizontal and vertical axes with major and minor ticks and their associated gridlines. _Params:_ xmajor (major x tick spacing, default value: 1), ymajor (major x tick spacing, default value: 1), xminor (minor x tick spacing, default value: 0.25), yminor (minor y tick spacing, default value: 0.25).

- **background:**
  Sets a backgound image for the drawing canvas.

- **freeform:**
  Adds a button to the toolbar that lets user draw a spline. _Params:_ label (label of button), color (color of drawn spline).

- **horizontal-line & vertical-line:**
  Adds a button to the toolbar that lets user draw a horizontal/vertical line. _Params:_ label (label of button), color (color of line), dashStyle (possible values: 'dashed', 'longdashed', 'dotted', 'dashdotted', 'solid' (default value)).

- **image:**
  Adds an image to the drawing canvas. _Params:_ scale (default value 1), align (possible values, 'top', 'left', 'bottom', 'right', '' (default value)), offset (array of x, y offsets (default value[0, 0])).

- **point:**
  Add a button to the toolbar that lets user draw a point. _Params:_ label (label of button), color (color of drawn point), size (radius of point in pixels).

### Main dev dependencies

NPM modules (see [`package.json`](https://github.com/SketchResponse/sketchresponse/blob/master/sketch_tool/package.json))

- [`Babel`](https://babeljs.io)
- [`ESLint`](https://eslint.org)
- [`node-sass`](https://www.npmjs.com/package/node-sass)
- [`StyleLint`](https://stylelint.io)
- [`Webpack`](https://webpack.js.org)

### License

Please refer to the [LICENSE file](https://github.com/SketchResponse/sketchresponse/blob/master/LICENSE) in the root of the SketchResponse repository.

---
_Source: https://npm.io/package/@prairielearn/sketchresponse · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._