1
0
mirror of https://github.com/excalidraw/excalidraw.git synced 2024-11-02 03:25:53 +01:00
Virtual whiteboard for sketching hand-drawn like diagrams
Go to file
Barnabás Molnár 6334bd832f
feat: editor redesign 🔥 (#5780)
* Placed eraser into shape switcher (top toolbar).
Redesigned top toolbar.

* Redesigned zoom and undo-redo buttons.

* Started redesigning left toolbar.

* Redesigned help dialog.

* Colour picker now somewhat in line with new design

* [WIP] Changed a bunch of icons.
TODO: organise new icons.

* [WIP] Organised a bunch of icons. Still some to do

* [WIP] Started working on hamburger menu.

* Fixed some bugs with hamburger menu.

* Menu and left toolbar positioning.

* Added some more items to hamburger menu.

* Changed some icons.

* Modal/dialog styling & bunch of fixes.

* Some more dialog improvements & fixes.

* Mobile menu changes.

* Menu can now be closed with outside click.

* Collab avatars and button changes.

* Icon sizing. Left toolbar positioning.

* Implemented welcome screen rendering logic.

* [WIP] Welcome screen content + design.

* Some more welcome screen content and design.

* Merge fixes.

* Tweaked icon set.

* Welcome screen darkmode fix.

* Content updates.

* Various small fixes & adjustments.
Moved language selection into menu.
Fixed some problematic icons.
Slightly moved encryption icon.

* Sidebar header redesign.

* Libraries content rendering logic + some styling.

* Somem more library sidebar styling.

* Publish library dialog styling.

* scroll-back-to-content btn styling

* ColorPicker positioning.

* Library button styling.

* ColorPicker positioning "fix".

* Misc adjustments.

* PenMode button changes.

* Trying to make mobile somewhat usable.

* Added a couple of icons.

* Added some shortcuts.

* Prevent welcome screen flickering.
Fix issue with welcome screen interactivity.
Don't show sidebar button when docked.

* Icon sizing on smaller screens.

* Sidebar styling changes.

* Alignment button... well... alignments.

* Fix inconsistent padding in left toolbar.

* HintViewer changes.

* Hamburger menu changes.

* Move encryption badge back to its original pos.

* Arrowhead changes.
Active state, colours + stronger shadow.

* Added new custom font.

* Fixed bug with library button not rendering.

* Fixed issue with lang selection colours.

* Add tooltips for undo, redo.

* Address some dark mode contrast issues.

* (Re)introduce counter for selectedItems in sidebar

* [WIP] Tweaked bounding box colour & padding.

* Dashed bounding box for remote clients.

* Some more bounding box tweaks.

* Removed docking animation for now...

* Address some RTL issues.

* Welcome screen responsiveness.

* use lighter selection color in dark mode & align naming

* use rounded corners for transform handles

* use lighter gray for welcomeScreen text in dark mode

* disable selection on dialog buttons

* change selection button icon

* fix library item width being flexible

* library: visually align spinner with first section heading

* lint

* fix scrollbar color in dark mode & make thinner

* adapt properties panel max-height

* add shrotcut label to save-to-current-file

* fix unrelated `useOutsideClick` firing for active modal

* add promo color to e+ menu item

* fix type

* lowered button size

* fix transform handles raidus not accounting for zoom

* attempt fix for excal logo on safari

* final fix for excal logo on safari

* fixing fhd resolution button sized

* remove TODO shortcut

* Collab related styling changes.
Expanding avatar list no longer offsets top toolbar.
Added active state & collaborator count badge for collab button.

* Tweaked collab button active colours.

* Added active style to collab btn in hamburger menu

* Remove unnecessary comment.

* Added back promo link for non (signed in) E+ users

* Go to E+ button added for signed in E+ users.

* Close menu & dropdown on modal close.

* tweak icons & fix rendering on smaller sizes [part one]

* align welcomeScreen icons with other UI

* switch icon resize mq to `device-width`

* disable welcomeScreen items `:hover` when selecting on canvas

* change selection box color and style

* reduce selection padding and fix group selection styling

* improve collab cursor styling

- make name borders round
- hide status when "active"
- remove black/gray colors

* add Twitter to hamburger menu

* align collab button

* add shortcut for image export dialog

* revert yarn.lock

* fix more tabler icons

* slightly better-looking penMode button

* change penMode button & tooltip

* revert hamburger menu icon

* align padding on lang picker & canvas bg

* updated robot txt to allow twitter bot and fb bot

* added new OG and tweaked the OG state

* add tooltip to collab button

* align style for scroll-to-content button

* fix pointer-events around toolbar

* fix decor arrow positioning and RTL

* fix welcomeScreen-item active state in dark mode

* change `load` button copy

* prevent shadow anim when opening a docked sidebar

* update E+ links ga params

* show redirect-to-eplus welcomeScreen subheading for signed-in users

* make more generic

* add ga for eplus redirect button

* change copy and icons for hamburger export buttons

* update snaps

* trim the username to account for trailing spaces

* tweaks around decor breakpoints

* fix linear element editor test

* remove .env change

* remove `it.only`

Co-authored-by: dwelle <luzar.david@gmail.com>
Co-authored-by: Maielo <maielo.mv@gmail.com>
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
2022-11-01 17:29:58 +01:00
.codesandbox chore: update CodeSandbox links and add a config (#5624) 2022-08-29 18:52:04 +05:30
.github fix: Fixing push to DockerHub (#5468) 2022-07-26 16:13:09 +05:30
.husky fix: husky not able to execute pre-commit on windows (#4370) 2021-12-09 15:15:54 +01:00
dev-docs refactor: rename docs to dev-docs (#5487) 2022-07-26 16:55:25 +05:30
firebase-project fix: update storage.rules (#5020) 2022-04-17 22:47:00 +02:00
public feat: editor redesign 🔥 (#5780) 2022-11-01 17:29:58 +01:00
scripts chore: Update translations from Crowdin (#5738) 2022-10-25 16:26:55 +05:30
src feat: editor redesign 🔥 (#5780) 2022-11-01 17:29:58 +01:00
.dockerignore chore: Update action versions and docker build (#3065) 2021-02-20 14:28:33 +00:00
.editorconfig add editorconfig (#1198) 2020-04-03 19:19:01 +02:00
.env.development feat: support debugging PWA in dev (#4853) 2022-07-02 17:59:03 +02:00
.env.production feat: go-to-excalidrawplus button (#5202) 2022-05-18 18:30:34 +02:00
.eslintignore feat: image support (#4011) 2021-10-21 22:05:48 +02:00
.eslintrc.json chore: Update Typescript to 4.4.4 (#4188) 2021-11-02 14:24:16 +02:00
.gitattributes Add gitattributes (#2164) 2020-09-15 21:59:00 +02:00
.gitignore fix: set the dimensions of bound text correctly (#5710) 2022-09-22 15:40:38 +05:30
.lintstagedrc.js Keep errors, elements and comments consistent (#2340) 2020-11-05 18:06:18 +01:00
.npmrc Add npmrc to have pinned deps (#727) 2020-02-07 13:59:23 +01:00
.nvmrc Chore: Update .nvmrc to match package.json engines definition (#3148) 2021-03-01 13:22:20 +01:00
.prettierignore Change target branch of coverage and pretty print (#1850) 2020-07-01 12:05:21 +03:00
.watchmanconfig Don't reset cache while zooming using a gesture (#1103) 2020-03-28 16:59:36 -07:00
CHANGELOG.md support embedding scene data to PNG/SVG (#2219) 2020-10-13 14:47:07 +02:00
CONTRIBUTING.md chore: fix npm to yarn in contributing.md and package.json (#3274) 2021-03-18 22:57:00 +05:30
crowdin.yml Locale 2020-03-19 20:38:52 +02:00
docker-compose.yml chore: Update action versions and docker build (#3065) 2021-02-20 14:28:33 +00:00
Dockerfile chore: Bump nginx version to newest (#3811) 2021-07-09 17:07:34 +02:00
LICENSE Add MIT License (#176) 2020-01-05 13:09:29 -08:00
package.json chore: fix yarn.lock file (#5803) 2022-10-31 13:44:08 +01:00
README.md chore: update CodeSandbox links and add a config (#5624) 2022-08-29 18:52:04 +05:30
tsconfig-types.json chore: bump typescript@4.5.2 (#4283) 2021-11-19 19:51:28 +01:00
tsconfig.json chore: bump typescript@4.5.2 (#4283) 2021-11-19 19:51:28 +01:00
vercel.json feat: redirect vscode.excalidraw.com to vscode marketplace (#5285) 2022-06-23 17:42:50 +02:00
yarn.lock chore: fix yarn.lock file (#5803) 2022-10-31 13:44:08 +01:00

Excalidraw logo: Sketch handrawn like diagrams.

Virtual whiteboard for sketching hand-drawn like diagrams.
Collaborative and end-to-end encrypted.

Follow Excalidraw on Twitter

Ask questions or hang out on our discord.gg/UexuTaE.

Try it now

Go to excalidraw.com to start sketching.

Read the latest news and updates on our blog. A good start is to see all the updates of One Year of Excalidraw.

Supporting Excalidraw

If you like the project, you can become a sponsor at Open Collective.

Last but not least, we're thankful to these companies for offering their services for free:

Vercel Sentry Crowdin

Who's integrating Excalidraw

Google CloudMetaCodeSandboxObsidian ExcalidrawReplitSliteNotionHackerRank

Documentation

Shortcuts

You can almost do anything with shortcuts. Click on the help icon on the bottom right corner to see them all.

Curved lines and arrows

Choose line or arrow and click click click instead of drag.

Charts

You can easily create charts by copy pasting data from Excel or just plain comma separated text.

Translating

To translate Excalidraw into other languages, please visit our Crowdin page. To add a new language, open an issue so we can get things set up on our end first.

Translations will be available on the app if they exceed a certain threshold of completion (currently 85%).

Create a collaboration session manually

In order to create a session manually, you just need to generate a link of this form:

https://excalidraw.com/#room=[0-9a-f]{20},[a-zA-Z0-9_-]{22}

Example

https://excalidraw.com/#room=91bd46ae3aa84dff9d20,pfLqgEoY1c2ioq8LmGwsFA

The first set of digits is the room. This is visible from the server thats going to dispatch messages to everyone that knows this number.

The second set of digits is the encryption key. The Excalidraw server doesnt know about it. This is what all the participants use to encrypt/decrypt the messages.

Note: Please ensure that the encryption key is 22 characters long.

Shape libraries

Find a growing list of libraries containing assets for your drawings at libraries.excalidraw.com.

Embedding Excalidraw in your App?

Try out @excalidraw/excalidraw. This package allows you to easily embed Excalidraw as a React component into your apps.

Development

Code Sandbox

Local Installation

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Requirements

Clone the repo

git clone https://github.com/excalidraw/excalidraw.git

Install the dependencies

yarn

Start the server

yarn start

Now you can open http://localhost:3000 and start coding in your favorite code editor.

Collaboration

For collaboration, you will need to set up collab server in local.

Commands

Install the dependencies
yarn
Run the project
yarn start
Reformat all files with Prettier
yarn fix
Run tests
yarn test
Update test snapshots
yarn test:update
Test for formatting with Prettier
yarn test:code

Docker Compose

You can use docker-compose to work on Excalidraw locally if you don't want to setup a Node.js env.

docker-compose up --build -d

Self-hosting

We publish a Docker image with the Excalidraw client at excalidraw/excalidraw. You can use it to self-host your own client under your own domain, on Kubernetes, AWS ECS, etc.

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.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Notable used tools

And the main source of inspiration for starting the project is the awesome Zwibbler app.