# bpmn-js-copy-as-image

> A bpmn-js extension which allows to render selected elements as images

Latest version **0.4.1** (published 2026-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install bpmn-js-copy-as-image
pnpm add bpmn-js-copy-as-image
yarn add bpmn-js-copy-as-image
bun add bpmn-js-copy-as-image
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2026-02-17 |
| First published | 2022-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Maciej Barelkowski |
| Maintainers | bpmn-io-admin, nikku, barmac, philippfromme, maxtru, skaiir-camunda, vsgoulart, barinali, jarekdanielak, alekseymanetov, simon-steinruecken-camunda |
| Keywords | bpmn-js |

## Links

- npm: https://www.npmjs.com/package/bpmn-js-copy-as-image
- Repository: https://github.com/barmac/bpmn-js-copy-as-image
- Homepage: https://github.com/barmac/bpmn-js-copy-as-image#readme
- Issues: https://github.com/barmac/bpmn-js-copy-as-image/issues
- npm.io page: https://npm.io/package/bpmn-js-copy-as-image

## Dependencies (1)

- [@bpmn-io/svg-to-image](https://npm.io/package/@bpmn-io/svg-to-image.md) ^1.0.0

## Recent versions

- 0.4.1 (latest) — 2026-02-17
- 0.4.0 — 2026-02-17
- 0.3.0 — 2026-02-13
- 0.2.0 — 2026-02-11
- 0.1.0 — 2022-09-05

## README

# bpmn-js-copy-as-image

[![CI](https://github.com/barmac/bpmn-js-copy-as-image/actions/workflows/CI.yml/badge.svg)](https://github.com/barmac/bpmn-js-copy-as-image/actions/workflows/CI.yml)

This project extends your [bpmn-js](https://github.com/bpmn-io/bpmn-js) editor to copy the current canvas selection as an image, or generate a PNG/SVG from a list of eleemnts.

![pasted screenshot](./resources/screenshot.png)

## Features

* generate SVG or PNG from a selection of diagram elements
* copy to [system clipboard](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
  * triggered via `CtrlOrCmd + Shift + C` keyboard shortcut
  * triggered via `copySelectionAsImage` editor action

## Usage

Depending on you use-case, include different parts of this project into your favorite [BPMN editor](https://github.com/bpmn-io/bpmn-js).

### Basic

To enable the keyboard shortcut and/or register the editor action, import `CopyAsImageModule`:

```javascript
import BpmnModeler from 'bpmn-js/lib/Modeler';
import { CopyAsImageModule } from 'bpmn-js-copy-as-image';

const modeler = new BpmnModeler({
  container: '#container',
  additionalModules: [
    CopyAsImageModule
  ]
});

await modeler.importXML(/* ... */);
```

### Programmatic use

If you want the programmatic API, import `ElementsRendererModule`:

```javascript
import BpmnModeler from 'bpmn-js/lib/Modeler';
import { ElementsRendererModule } from 'bpmn-js-copy-as-image';

const modeler = new BpmnModeler({
  container: '#container',
  additionalModules: [
    ElementsRendererModule
  ]
});

await modeler.importXML(/* ... */);

const elementsRenderer = modeler.get('elementsRenderer');
const png = await elementsRenderer.renderAsPNG([ 'Task_1' ]);
```

## Build and Run

```
# install dependencies
npm install

# run project, executing all tasks
npm run all

# start demo, in browser
npm start
```

## Credits

The project was built on top of @nikku's [native copy and paste example](https://github.com/nikku/bpmn-js-native-copy-paste).

## License

MIT

---
_Source: https://npm.io/package/bpmn-js-copy-as-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._