# rp-paint

> Doodling recorder and replayer for Liqvid

Latest version **0.10.0** (published 2022-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install rp-paint
pnpm add rp-paint
yarn add rp-paint
bun add rp-paint
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.10.0 |
| Published | 2022-02-01 |
| First published | 2021-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Yuri Sulyma |
| Maintainers | yuri |
| Keywords | liqvid, rp-recording |

## Links

- npm: https://www.npmjs.com/package/rp-paint
- Repository: https://github.com/ysulyma/rp-paint
- Homepage: https://github.com/ysulyma/rp-paint#readme
- Issues: https://github.com/ysulyma/rp-paint/issues
- npm.io page: https://npm.io/package/rp-paint

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.10.0 (latest) — 2022-02-01
- 0.9.0 — 2021-01-24
- 0.8.2 — 2021-01-24
- 0.8.1 — 2021-01-24
- 0.8.0 — 2021-01-24

## README

# rp-paint

Doodling recorder and replayer for [Liqvid](https://liqvidjs.org)/[rp-recording](https://github.com/ysulyma/rp-recording/).

Alpha version! Use at your own risk.

## Installation

    $ npm install rp-paint

## Usage

```tsx
import {Controls, Script, Player} from "liqvid";
import {RecordingControl} from "rp-recording";

import {PaintCanvas, PaintReplay} from "rp-paint";
import PaintRecorderPlugin from "rp-paint/recorder";

import {brushReplay} from "./recordings";

// controls
const controls = (<>
  {Player.defaultControlsLeft}

  <div className="rp-controls-right">
    <RecordingControl plugins={[PaintRecorderPlugin]}/>

    {Player.defaultControlsRight}
  </div>
</>);

/* ... */

<Player controls={controls} script={script}>
  {/* to record */}
  <PaintCanvas recorder={PaintRecorderPlugin.recorder}/>

  {/* to replay */}
  <PaintReplay replay={brushReplay} start={0}/>
</Player>
```

## Keyboard controls

<table>
  <tbody>
    <tr>
      <td><kbd>Alt+&darr;</kbd></td>
      <td>Down one layer</td>
    </tr>
    <tr>
      <td><kbd>Alt+&uarr;</kbd></td>
      <td>Up one layer</td>
    </tr>
    <tr>
      <td><kbd>Alt+[number]</kbd></td>
      <td>Select color by number</td>
    </tr>
    <tr>
      <td><kbd>Alt+C</kbd></td>
      <td>Clear layer</td>
    </tr>
    <tr>
      <td><kbd>Alt+D</kbd></td>
      <td>Draw tool</td>
    </tr>
    <tr>
      <td><kbd>Alt+E</kbd></td>
      <td>Eraser tool</td>
    </tr>
    <tr>
      <td><kbd>Alt+H</kbd></td>
      <td>Toggle paint canvas</td>
    </tr>
    <tr>
      <td><kbd>Alt+P</kbd></td>
      <td>Toggle settings</td>
    </tr>
  </tbody>
</table>

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