Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/nordeck/matrix-neoboard

A collaborative whiteboard widget for Matrix
https://github.com/nordeck/matrix-neoboard

element hacktoberfest matrix matrix-widget-api nordeck whiteboard

Last synced: 2 months ago
JSON representation

A collaborative whiteboard widget for Matrix

Awesome Lists containing this project

README 

          
# NeoBoard



[![CI](https://github.com/nordeck/matrix-neoboard/actions/workflows/ci.yml/badge.svg)](https://github.com/nordeck/matrix-neoboard/actions/workflows/ci.yml)

[![Matrix](https://img.shields.io/matrix/nordeck%3Amatrix.org)](https://matrix.to/#/#nordeck:matrix.org)



A collaborative whiteboard widget for Element, based on [Matrix](https://matrix.org).

Use it to collaborate in real-time with your peers, by keeping full control of your data and keep it secure with end-to-end encryption.



  

    

      A screenshot of the NeoBoard showing the drawing board, a list of different slides, and the cursors of the collaborators Alicia and Jim.

    

  

  

    

      A whiteboard showing a Kanban board with three columns: to do, in progress, done.

    

    

      A whiteboard showing a board to moderate a lean coffee.

    

    

      A whiteboard showing a mindmap to collect ideas.

    

    

      A whitboard showing an empty SWOT analysis to collect strengths, weaknesses, opportunities, and threats.

    

  



All data is stored in the Matrix rooms. Learn more about the architecture in the [Model](./docs/model) or the [Architecture Decision Records](./docs/adrs).



## Usage



NeoBoard is a Matrix widget, which can be added to a chat room to extend the client feature set with a whiteboard.

Currently, [Element Web](https://app.element.io), version `1.11.8` or later, is the only known client that supports widgets.



> [!NOTE]

> Beyond that, NeoBoard supports real time collaboration between users sharing the same chat room, and therefore requires working WebRTC connections between all participants. Most servers including Matrix.org support this, but you can read more about it [here](#important-notes).



> [!IMPORTANT]

> NeoBoard stores its data in Matrix rooms. Depending on the amount of content on your whiteboard, it needs to send multiple hidden messages to save it. The amount of messages is larger than many servers allow. We therefore currently recommend you use NeoBoard with your own server and a [tweaked configuration](./docs/configuration.md#rate-limiting-settings).



### Demo



[Click here](https://nordeck.github.io/matrix-neoboard) and follow the instructions to see it in action and experience it yourself.

You need at least Moderator permissions (power level >50) in the room so it might be a good idea to test it in a new Matrix room at first.



This is only a demo deployment that is not suited for production use.

See the [Deployment](#deployment) section on how you can host the widget on your own.



> 💡 Import the [NeoBoard quick start pack](./docs/NeoBoard%20QuickStart%20Pack.nwb) for some demo content to get started right away.



## Development



Development on the widget happens at [GitHub](https://github.com/nordeck/matrix-neoboard).



### How to Contribute



Please take a look at our [Contribution Guidelines](https://github.com/nordeck/.github/blob/main/docs/CONTRIBUTING.md).

Check the following steps to develop for the widget:



### Requirements



You need to install Node.js (`>= 20.0.0`, prefer using an LTS version) and run

`yarn` to work on this package.

The minimal Element version to use this widget is `1.11.46`.

If you are using `MatrixRTC`, it is recommended to use Synapse with the minimal version `1.127.0`

that has delayed events support.



### Dependencies



After checkout, run `yarn install` to download the required dependencies



> [!WARNING]

> Do not use `npm install` when working with this package.



### Configuration



Rename the provided `.env.local.default` to `.env.local` and fill it with your configuration.

For a list of available options, see [Configuration](./docs/configuration.md).



### Running the Widget Locally



Follow the [instructions to run the widget locally](https://github.com/nordeck/matrix-widget-toolkit/tree/main/example-widget-mui#running-the-widget-locally).

Visit the widget url follow the further instructions: `http://localhost:5273/` or `https://localhost:5274/` .



### Running with a local version of the matrix-widget-toolkit



If changes inside matrix-widget-toolkit are required or for debugging purposes,

you can clone the repos next to each other and link the packages with `yarn link`:



```

ls

matrix-neoboard

matrix-widget-toolkit

```



Then yarn link the required matrix-widget-toolkit packages, for example:



```

cd matrix-widget-toolkit

yarn install

cd packages/api

yarn link

cd ../../../matrix-neoboard

yarn link @matrix-widget-toolkit/api

yarn install

```



### Available Scripts



In the project directory, you can run:



- `yarn dev`: Start the widget for development.

- `yarn dev:https`: Start the widget for development with a self-signed HTTPS certificate.

- `yarn build`: Build the production version of the widget.

- `yarn preview`: Preview a production build of the widget.

- `yarn preview:https`: Preview a production build of the widget with a self-signed HTTPS certificate.

- `yarn test`: Watch all files for changes and run tests.

- `yarn tsc`: Check TypeScript types for errors in the widget.

- `yarn lint`: Run eslint on the widget.

- `yarn prettier:write`: Run prettier on all files to format them.

- `yarn depcheck`: Check for missing or unused dependencies.

- `yarn deduplicate`: Deduplicate dependencies in the `yarn.lock` file.

- `yarn changeset`: Generate a changeset that provides a description of a

  change.

- `yarn translate`: Update translation files from code.

- `yarn generate-disclaimer`: Generates license disclaimer and include it in the build output.

- `yarn docker:build`: Builds a container from the output of `yarn build` and `yarn generate-disclaimer`.

- `yarn docker:run`: Runs the container and serves the widget at [http://localhost:3000](http://localhost:3000).

- `yarn clean`: Cleans builds and caches

- `yarn clean:build`: Cleans builds

- `yarn clean:cache`: Cleans caches



### Versioning



This package uses automated versioning.

Each change should be accompanied by a specification of the impact (`patch`, `minor`, or `major`) and a description of the change.

Use `yarn changeset` to generate a new changeset for a pull request.

Learn more in the [`.changeset` folder](./.changeset).



Once the change is merged to `main`, a “Version Packages” pull request will be created.

As soon as the project maintainers merged it, the package will be released and the container is published.



### Architecture Decision Records



We use [Architecture Decision Records (ADR)s](https://github.com/nordeck/matrix-widget-toolkit/blob/main/docs/adrs/adr001-use-adrs-to-document-decisions.md) to document decisions for our software.

You can find them at [`/docs/adrs`](./docs/adrs/).



## Deployment



Yon can run the widget using Docker:



```sh

docker run --rm -e REACT_APP_HOME_SERVER_URL=https://matrix-client.matrix.org -p 8080:8080 ghcr.io/nordeck/matrix-neoboard-widget:latest

```



Be sure, that you also read the security notes in the base image [@matrix-widget-toolkit/widget-server](https://github.com/nordeck/matrix-widget-toolkit/tree/main/containers/widget-server) docs.



The image supports customizing the nginx config by supplying additional config files.

For example, this allows running the image in an IPv4-only environment, as demonstrated at 



We also provide a [HELM chart](./charts/).



Install via OCI Registry:



```sh

helm install matrix-neoboard-widget oci://ghcr.io/nordeck/charts/matrix-neoboard-widget

```



### Important notes



**TURN server**



The real time collaboration features require you to configure TURN servers in your Homeserver.

While it might appear like NeoBoard still works without them, it will be missing some features and other features might start behaving unexpectedly.

Running in an environment without TURN is currently not supported.

The official matrix.org homeserver will work; see for example how to configure them for [Synapse](https://matrix-org.github.io/synapse/latest/turn-howto.html).



**Rate limiting settings**



For a good NeoBoard experience we highly recommend to tweak the rate limiting settings as described in the [configuration](./docs/configuration.md#rate-limiting-settings).

Otherwise users may get stuck in a state where they need to confirm to re-send messages before NeoBoard resumes to work normally after it ran into rate limiting.



## Supply Chain Security



To ensure transparency and security in our software supply chain, we provide comprehensive Software Bill of Materials (SBOM) reports for this project and signed container images.



### SBOM Reports



We provide SBOM reports within the widget container and as a release artifact.



- The generated SBOM report is available alongside the hosted widget assets, and can be found at `/sbom.spdx.json`, or via the filesystem at `/usr/share/nginx/html/sbom.spdx.json`

- Each GitHub release has a corresponding image SBOM scan report file attached as a release asset



### Signed Container Images



The container images releases are signed by [cosign](https://github.com/sigstore/cosign) using identity-based ("keyless") signing and transparency.

Execute the following command to verify the signature of a container image:



```sh

cosign verify \

--certificate-identity-regexp https://github.com/nordeck/matrix-neoboard/.github/workflows/publish-release.yml@refs/tags/v \

--certificate-oidc-issuer https://token.actions.githubusercontent.com \

ghcr.io/nordeck/matrix-neoboard-widget: | jq

```



Execute the following command to verify the signature of a chart container image (example for version: `@nordeck/helm-matrix-neoboard-widget-0.2.0`):



```sh

cosign verify \

--certificate-identity-regexp https://github.com/nordeck/matrix-neoboard-widget/.github/workflows/helm-release.yml@refs/tags/@nordeck/helm-matrix-neoboard-widget-0.2.0 \

--certificate-oidc-issuer https://token.actions.githubusercontent.com \

ghcr.io/nordeck/charts/matrix-neoboard-widget:0.2.0 | jq

```



## Matrix Room Upgrades



The widget room can be [upgraded](https://matrix.org/docs/communities/administration/#room-upgrades).

Before the upgrade, it is strongly recommended to download any whiteboard data by exporting it as NeoBoard file (.nwb).

After the upgrade, the NeoBoard widget needs to be configured in the new room and the .nwb file can be imported.



If you are using the widget as part of [NeoDateFix](https://github.com/nordeck/matrix-meetings) meetings, then

please refer to its [documentation](https://github.com/nordeck/matrix-meetings/blob/main/README.md#matrix-room-upgrades)

about room upgrades.



Matrix room version 12 is supported from NeoBoard version [2.3.1](https://github.com/nordeck/matrix-neoboard/releases/tag/%40nordeck%2Fmatrix-neoboard-widget%402.3.1).



## License



This project is licensed under [APACHE 2.0](./LICENSE).



The disclaimer for other OSS components can be accessed via the `/NOTICE.txt` endpoint.

The list of dependencies and their licenses are also available in a machine readable format at `/usr/share/nginx/html/licenses.json` in the container image.



## Sponsors





   dPhoenixSuite

       

   Dataport

       

   Nordeck




This project is part of the [dPhoenixSuite by Dataport](https://www.dphoenixsuite.de/).