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 2 months 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 (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-02-12T00:21:53.000Z (8 months ago)
• Last Synced: 2024-07-12T23:11:26.344Z (3 months ago)
• Topics: brainstorming, diagram-js, javascript, post-it, postit-js, sticky-notes
• Language: JavaScript
• Homepage: https://postit-js-demo.netlify.app/
• Size: 4.7 MB
• Stars: 83
• Watchers: 6
• Forks: 26
• Open Issues: 20
• 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

[![Netlify Status](https://api.netlify.com/api/v1/badges/72130b1d-f56b-473e-8f3b-50a5af916e64/deploy-status)](https://app.netlify.com/sites/postit-js-demo/deploys) ![Build Status](https://github.com/pinussilvestrus/postit-js/workflows/ci/badge.svg)

Create post-it brainstorming boards - built with [diagram-js](https://github.com/bpmn-io/diagram-js).

![Screencast](./docs/screencast.gif)

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).