https://github.com/pinussilvestrus/postit-js
Create post-it boards - built with diagram-js
https://github.com/pinussilvestrus/postit-js
brainstorming diagram-js javascript post-it postit-js sticky-notes
Last synced: about 1 year ago
JSON representation
Create post-it boards - built with diagram-js
- Host: GitHub
- URL: https://github.com/pinussilvestrus/postit-js
- Owner: pinussilvestrus
- License: mit
- Created: 2020-04-07T13:52:11.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2025-02-27T23:40:44.000Z (over 1 year ago)
- Last Synced: 2025-03-28T18:11:36.815Z (about 1 year ago)
- Topics: brainstorming, diagram-js, javascript, post-it, postit-js, sticky-notes
- Language: JavaScript
- Homepage: https://postit-js-demo.netlify.app/
- Size: 4.92 MB
- Stars: 86
- Watchers: 5
- Forks: 27
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bpmn-io - postit-js - Create Post-it boards on a canvas editor (Apps)
README
# postit-js
[](https://app.netlify.com/sites/postit-js-demo/deploys) 
Create post-it brainstorming boards - built with [diagram-js](https://github.com/bpmn-io/diagram-js).
Checkout the [**Demo**](https://postit-js-demo.netlify.app/) or the [**Experiments Page**](https://postit-js-experiments.netlify.app/) to get some inspiration.
## Features
* Create resizable Post-its on the Canvas (squared and circled) via
* Palette
* Double Click (latest element type will be respected)
* Change the color of Post-its
* Create simple Text Boxes on the Canvas
* Create grouping frame elements on the Canvas
* Add external image resources on the Canvas
## Installation
Install the package to include it into your web application
```sh
$ npm install postit-js-core --save
```
## Usage
To get started, create a [postit-js](https://github.com/pinussilvestrus/postit-js) instance
and render a post-it board into your web application
```javascript
import 'postit-js-core/assets/postit-js.css';
import PostItModeler from 'postit-js-core/lib/Modeler';
let xml; // my post-it xml
const modeler = new PostItModeler({
container: '#canvas',
keyboard: {
bindTo: window,
}
});
modeler.importXML(xml).then(function() {
console.log('board rendered');
}).catch(function(error) {
console.error('could not import postit board', err);
});
```
For using `postit-js` inside your web application you'll need a source code bundler, e.g. [webpack](https://webpack.js.org/). Checkout the [example](./example) for getting inspiration.
### Development Setup
Spin up the application for development, all strings attached:
```sh
$ npm install
$ cd example
$ npm install
$ npm run dev
```
## Extensions
Since [`diagram-js`](https://github.com/bpmn-io/diagram-js) and also this project is extendable by design, there exist a couple of great community maintained extensions
* [`drag-drop-images`](https://github.com/xanpj/postit-js-extensions#drag-drop-images) - Drag and drop image files on the board
* [`selection-organizer`](https://github.com/xanpj/postit-js-extensions#selection-organizer) - Organize and distribute groups of elements
* [`properties-panel`](https://github.com/xanpj/postit-js-extensions#properties-panel) - Properties panel for post-it elements
## License
MIT
Contains parts of ([bpmn-io](https://github.com/bpmn-io)) released under the [bpmn.io license](http://bpmn.io/license).