176 lines
9.7 KiB
Markdown
176 lines
9.7 KiB
Markdown
# Excalidraw without firebase
|
||
|
||
This is a fork from the [excalidraw project](https://github.com/excalidraw/excalidraw) with changes inspired and partly taken from [Kilian Decaderincourt](https://gitlab.com/kiliandeca/excalidraw-fork) to enable support for rooms without using firebase.<br />
|
||
|
||
## Setup with docker
|
||
|
||
Please copy the .env.development.default or .env.production.default file to .env (or with environment without default at the end) and change it according to your needs, see [react-scripts](https://create-react-app.dev/docs/adding-custom-environment-variables/).
|
||
|
||
### Development
|
||
|
||
```
|
||
docker-compose up -d
|
||
docker-compose exec excalidraw yarn install
|
||
docker-compose exec excalidraw yarn start
|
||
```
|
||
|
||
Hint: Collab mode requires a secure context (https). Localhost works as well, but not http over local network.
|
||
|
||
#### Commands
|
||
|
||
| Command | Description |
|
||
| ------------------ | --------------------------------- |
|
||
| `yarn` | Install the dependencies |
|
||
| `yarn start` | Run the project |
|
||
| `yarn fix` | Reformat all files with Prettier |
|
||
| `yarn test` | Run tests |
|
||
| `yarn test:update` | Update test snapshots |
|
||
| `yarn test:code` | Test for formatting with Prettier |
|
||
|
||
### Production
|
||
|
||
```
|
||
docker-compose -f docker-compose-prod.yml up -d
|
||
```
|
||
|
||
## Additional licence
|
||
|
||
The excalidraw [logo](https://thenounproject.com/icon/2357486/) in this repo – created by [Verry](https://thenounproject.com/verry.dsign.creative) – is licenced under [CC BY 3.0 Unported](https://creativecommons.org/licenses/by/3.0/).
|
||
|
||
<div align="center" style="display:flex;flex-direction:column;"}>
|
||
<a href="https://excalidraw.com">
|
||
<img width="540" src="./public/og-image-sm.png" alt="Excalidraw logo: Sketch handrawn like diagrams."/>
|
||
</a>
|
||
<h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br/>Collaborative and end-to-end encrypted.</h3>
|
||
<p>
|
||
<a href="https://twitter.com/excalidraw">
|
||
<img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
|
||
</a>
|
||
<a href="https://discord.gg/UexuTaE">
|
||
<img alt="Chat with us on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
|
||
</a>
|
||
</p>
|
||
</div>
|
||
|
||
<br />
|
||
<p align="center">
|
||
<a href="https://github.com/excalidraw/excalidraw/blob/master/LICENSE">
|
||
<img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg" />
|
||
</a>
|
||
<a href="https://www.npmjs.com/package/@excalidraw/excalidraw">
|
||
<img alt="npm downloads/month" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw" />
|
||
</a>
|
||
<a href="https://docs.excalidraw.com/docs/introduction/contributing">
|
||
<img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" />
|
||
</a>
|
||
<a href="https://discord.gg/UexuTaE">
|
||
<img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
|
||
</a>
|
||
<a href="https://twitter.com/excalidraw">
|
||
<img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
|
||
</a>
|
||
</p>
|
||
|
||
<div align="center">
|
||
<figure>
|
||
<a href="https://excalidraw.com" target="_blank" rel="noopener">
|
||
<img src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2Fproduct_showcase.png" alt="Product showcase" />
|
||
</a>
|
||
<figcaption>
|
||
<p align="center">
|
||
Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.
|
||
</p>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
## Features
|
||
|
||
The Excalidraw editor (npm package) supports:
|
||
|
||
- 💯 Free & open-source.
|
||
- 🎨 Infinite, canvas-based whiteboard.
|
||
- ✍️ Hand-drawn like style.
|
||
- 🌓 Dark mode.
|
||
- 🏗️ Customizable.
|
||
- 📷 Image support.
|
||
- 😀 Shape libraries support.
|
||
- 👅 Localization (i18n) support.
|
||
- 🖼️ Export to PNG, SVG & clipboard.
|
||
- 💾 Open format - export drawings as an `.excalidraw` json file.
|
||
- ⚒️ Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
|
||
- ➡️ Arrow-binding & labeled arrows.
|
||
- 🔙 Undo / Redo.
|
||
- 🔍 Zoom and panning support.
|
||
|
||
## Excalidraw.com
|
||
|
||
The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/excalidraw-app) is part of this repository as well, and the app features:
|
||
|
||
- 📡 PWA support (works offline).
|
||
- 🤼 Real-time collaboration.
|
||
- 🔒 End-to-end encryption.
|
||
- 💾 Local-first support (autosaves to the browser).
|
||
- 🔗 Shareable links (export to a readonly link you can share with others).
|
||
|
||
We'll be adding these features as drop-in plugins for the npm package in the future.
|
||
|
||
## Quick start
|
||
|
||
**Note:** following instructions are for installing the Excalidraw [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw) when integrating Excalidraw into your own app. To run the repository locally for development, please refer to our [Development Guide](https://docs.excalidraw.com/docs/introduction/development).
|
||
|
||
```
|
||
npm install react react-dom @excalidraw/excalidraw
|
||
```
|
||
|
||
or via yarn
|
||
|
||
```
|
||
yarn add react react-dom @excalidraw/excalidraw
|
||
```
|
||
|
||
Check out our [documentation](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation) for more details!
|
||
|
||
## Contributing
|
||
|
||
- Missing something or found a bug? [Report here](https://github.com/excalidraw/excalidraw/issues).
|
||
- Want to contribute? Check out our [contribution guide](https://docs.excalidraw.com/docs/introduction/contributing) or let us know on [Discord](https://discord.gg/UexuTaE).
|
||
- Want to help with translations? See the [translation guide](https://docs.excalidraw.com/docs/introduction/contributing#translating).
|
||
|
||
## Integrations
|
||
|
||
- [VScode extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor)
|
||
- [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw)
|
||
|
||
## Who's integrating Excalidraw
|
||
|
||
[Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) • [Meta](https://meta.com/) • [CodeSandbox](https://codesandbox.io/) • [Obsidian Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) • [Replit](https://replit.com/) • [Slite](https://slite.com/) • [Notion](https://notion.so/) • [HackerRank](https://www.hackerrank.com/) • and many others
|
||
|
||
## Sponsors & support
|
||
|
||
If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw) or use [Excalidraw+](https://plus.excalidraw.com/).
|
||
|
||
## Thank you for supporting Excalidraw
|
||
|
||
[<img src="https://opencollective.com/excalidraw/tiers/sponsors/0/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/0/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/1/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/1/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/2/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/2/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/3/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/3/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/4/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/4/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/5/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/5/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/6/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/6/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/7/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/7/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/8/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/8/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/9/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/9/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/10/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/10/website)
|
||
|
||
<a href="https://opencollective.com/excalidraw#category-CONTRIBUTE" target="_blank"><img src="https://opencollective.com/excalidraw/tiers/backers.svg?avatarHeight=32"/></a>
|
||
|
||
Last but not least, we're thankful to these companies for offering their services for free:
|
||
|
||
[](https://vercel.com) [](https://sentry.io) [](https://crowdin.com)
|
||
|
||
## Developers
|
||
|
||
You can integrate Excalidraw into your app by installing our [npm component](https://npmjs.com/package/@excalidraw/excalidraw).
|
||
|
||
Visit our documentation on [https://docs.excalidraw.com](https://docs.excalidraw.com).
|
||
|
||
## Who's integrating Excalidraw
|
||
|
||
[Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) • [Meta](https://meta.com/) • [CodeSandbox](https://codesandbox.io/) • [Obsidian Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) • [Replit](https://replit.com/) • [Slite](https://slite.com/) • [Notion](https://notion.so/) • [HackerRank](https://www.hackerrank.com/)
|
||
|
||
```
|
||
|
||
```
|