2020-01-04 16:25:10 +01:00
< div align = "center" style = "display:flex;flex-direction:column;" >
2020-01-25 15:30:01 +01:00
< a href = "https://excalidraw.com" >
< img src = "./public/og-image.png" alt = "Excalidraw logo: Sketch handrawn like diagrams." / >
< / a >
2020-09-04 14:03:04 +02:00
< h3 > Virtual whiteboard for sketching hand-drawn like diagrams.< / h3 >
2020-03-06 15:20:02 +01:00
< 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 >
2020-08-21 01:36:18 +02:00
< a target = "_blank" href = "https://crowdin.com/project/excalidraw" >
2020-03-06 15:20:02 +01:00
< img src = "https://badges.crowdin.net/excalidraw/localized.svg" >
< / a >
2020-08-21 01:36:18 +02:00
< a target = "_blank" href = "https://hub.docker.com/r/excalidraw/excalidraw" >
2020-08-21 01:55:10 +02:00
< img src = "https://img.shields.io/docker/pulls/excalidraw/excalidraw" >
2020-08-21 01:36:18 +02:00
< / a >
2020-03-06 15:20:02 +01:00
< / p >
2020-01-04 16:25:10 +01:00
< / div >
2020-01-04 00:29:13 +01:00
## Try it now
2020-12-08 19:13:43 +01:00
Go to [excalidraw.com ](https://excalidraw.com ) to start sketching.
2020-01-04 00:29:13 +01:00
2020-04-05 15:24:23 +02:00
Read our [blog ](https://blog.excalidraw.com ) and follow the [guides ](https://howto.excalidraw.com ) to learn more about Excalidraw and how to use it effectively.
2020-12-08 19:13:43 +01:00
## Shape libraries
Find a growing list of libraries containing assets for your drawings at [libraries.excalidraw.com ](https://libraries.excalidraw.com ).
2020-01-05 18:54:54 +01:00
## Run the code
2020-01-04 00:29:13 +01:00
2020-01-04 03:19:58 +01:00
### Code Sandbox
2020-01-04 00:29:13 +01:00
2020-01-04 03:19:58 +01:00
- Go to https://codesandbox.io/s/github/excalidraw/excalidraw
2020-03-29 19:58:19 +02:00
- You may need to sign in with Github and reload the page
2020-01-04 03:19:58 +01:00
- You can start coding instantly, and even send PRs from there!
2020-01-04 00:29:13 +01:00
2020-01-04 03:19:58 +01:00
### Local Installation
2020-01-04 00:29:13 +01:00
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
2020-01-16 22:50:02 +01:00
#### Clone the repo
2020-01-04 00:29:13 +01:00
```bash
2020-01-04 03:19:58 +01:00
git clone https://github.com/excalidraw/excalidraw.git
2020-01-04 00:29:13 +01:00
```
2020-01-16 22:50:02 +01:00
#### Commands
2020-01-04 00:29:13 +01:00
2020-04-07 15:09:01 +02:00
| Command | Description |
| --------------------- | --------------------------------- |
| `npm install` | Install the dependencies |
| `npm start` | Run the project |
| `npm run fix` | Reformat all files with Prettier |
| `npm test` | Run tests |
| `npm run test:update` | Update test snapshots |
| `npm run test:code` | Test for formatting with Prettier |
2020-01-04 00:29:13 +01:00
2020-04-29 07:53:07 +02:00
#### Docker Compose
2020-06-18 11:46:24 +02:00
You can use docker-compose to work on excalidraw locally if you don't want to setup a Node.js env.
2020-04-29 07:53:07 +02:00
```sh
docker-compose up --build -d
```
2020-06-18 11:46:24 +02:00
## Self hosting
We publish a Docker image with the Excalidraw client at [excalidraw/excalidraw ](https://hub.docker.com/r/excalidraw/excalidraw ). You can use it to self host your own client under your own domain, on Kubernetes, AWS ECS, etc.
```sh
docker build -t excalidraw/excalidraw .
docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest
```
The Docker image is free of analytics and other tracking libraries.
**At the moment, self-hosting your own instance doesn't support sharing or collaboration features.**
We are working towards providing a full-fledged solution for self hosting your own Excalidraw.
2020-01-04 00:29:13 +01:00
## Contributing
2020-03-06 15:20:02 +01:00
Pull requests are welcome. For major changes, please [open an issue ](https://github.com/excalidraw/excalidraw/issues/new ) first to discuss what you would like to change.
2020-03-22 16:22:13 +01:00
## Translating
To translate Excalidraw into other languages, please visit [our Crowdin page ](https://crowdin.com/project/excalidraw ). To add a new language, [open an issue ](https://github.com/excalidraw/excalidraw/issues/new ) so we can get things set up on our end first.
2020-01-04 03:19:58 +01:00
2020-06-30 20:28:19 +02:00
Translations will be available on the app if they exceed a certain threshold of completion (currently 85%).
2020-01-04 03:19:58 +01:00
## Excalidraw is built using these awesome tools
2020-01-18 02:48:56 +01:00
- [React ](https://reactjs.org )
- [Rough.js ](https://roughjs.com )
2020-05-22 21:58:44 +02:00
- [TypeScript ](https://www.typescriptlang.org )
2020-05-02 16:01:41 +02:00
- [Vercel ](https://vercel.com )
2020-01-04 03:19:58 +01:00
2020-01-05 18:54:54 +01:00
And the main source of inspiration for starting the project is the awesome [Zwibbler ](https://zwibbler.com/demo/ ) app.
2020-01-18 02:04:21 +01:00
2020-03-22 16:22:13 +01:00
## Testimonials
< a href = "https://twitter.com/Lissy_Sykes/status/1213813117177729026" > < img width = "398" src = "https://user-images.githubusercontent.com/197597/71783813-dbf8a600-2fa0-11ea-9c0d-bb3cc45969e6.png" > < / a >
< a href = "https://twitter.com/dan_abramov/status/1213762494428262400" > < img width = "398" src = "https://user-images.githubusercontent.com/197597/71783990-4d395880-2fa3-11ea-9ad7-186138db5003.png" > < / a >
< a href = "https://twitter.com/kyehohenberger/status/1214288572037025792" > < img width = "423" src = "https://user-images.githubusercontent.com/197597/71851802-34f13880-308c-11ea-9416-191099e6349c.png" > < / a >
< a href = "https://twitter.com/lucasazzola/status/1215126440330416128" > < img width = "429" src = "https://user-images.githubusercontent.com/197597/72039003-48e99580-3258-11ea-8daa-85dd055f2a82.png" >
< a href = "https://twitter.com/jordwalke/status/1214858186789806080" > < img width = "434" src = "https://user-images.githubusercontent.com/197597/72036874-07a1b780-3251-11ea-99e8-6bafd93483a0.png" > < / a >
2020-01-18 02:04:21 +01:00
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute ](CONTRIBUTING.md )].
< a href = "https://github.com/excalidraw/excalidraw/graphs/contributors" > < img src = "https://opencollective.com/excalidraw/contributors.svg?width=890&button=false" / > < / a >
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute ](https://opencollective.com/excalidraw/contribute )]
#### Individuals
< a href = "https://opencollective.com/excalidraw" > < img src = "https://opencollective.com/excalidraw/individuals.svg?width=890" > < / a >
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute ](https://opencollective.com/excalidraw/contribute )]
< a href = "https://opencollective.com/excalidraw/organization/0/website" > < img src = "https://opencollective.com/excalidraw/organization/0/avatar.svg" > < / a >
< a href = "https://opencollective.com/excalidraw/organization/1/website" > < img src = "https://opencollective.com/excalidraw/organization/1/avatar.svg" > < / a >
< a href = "https://opencollective.com/excalidraw/organization/2/website" > < img src = "https://opencollective.com/excalidraw/organization/2/avatar.svg" > < / a >
< a href = "https://opencollective.com/excalidraw/organization/3/website" > < img src = "https://opencollective.com/excalidraw/organization/3/avatar.svg" > < / a >
< a href = "https://opencollective.com/excalidraw/organization/4/website" > < img src = "https://opencollective.com/excalidraw/organization/4/avatar.svg" > < / a >
< a href = "https://opencollective.com/excalidraw/organization/5/website" > < img src = "https://opencollective.com/excalidraw/organization/5/avatar.svg" > < / a >
< a href = "https://opencollective.com/excalidraw/organization/6/website" > < img src = "https://opencollective.com/excalidraw/organization/6/avatar.svg" > < / a >
< a href = "https://opencollective.com/excalidraw/organization/7/website" > < img src = "https://opencollective.com/excalidraw/organization/7/avatar.svg" > < / a >
< a href = "https://opencollective.com/excalidraw/organization/8/website" > < img src = "https://opencollective.com/excalidraw/organization/8/avatar.svg" > < / a >
< a href = "https://opencollective.com/excalidraw/organization/9/website" > < img src = "https://opencollective.com/excalidraw/organization/9/avatar.svg" > < / a >
