Virtual whiteboard for sketching hand-drawn like diagrams
Find a file
Ryan Di 971b4d4ae6
feat: text wrapping (#7999)
* resize single elements from the side

* fix lint

* do not resize texts from the sides (for we want to wrap/unwrap)

* omit side handles for frames too

* upgrade types

* enable resizing from the sides for multiple elements as well

* fix lint

* maintain aspect ratio when elements are not of the same angle

* lint

* always resize proportionally for multiple elements

* increase side resizing padding

* code cleanup

* adaptive handles

* do not resize for linear elements with only two points

* prioritize point dragging over edge resizing

* lint

* allow free resizing for multiple elements at degree 0

* always resize from the sides

* reduce hit threshold

* make small multiple elements movable

* lint

* show side handles on touch screen and mobile devices

* differentiate touchscreens

* keep proportional with text in multi-element resizing

* update snapshot

* update multi elements resizing logic

* lint

* reduce side resizing padding

* bound texts do not scale in normal cases

* lint

* test sides for texts

* wrap text

* do not update text size when changing its alignment

* keep text wrapped/unwrapped when editing

* change wrapped size to auto size from context menu

* fix test

* lint

* increase min width for wrapped texts

* wrap wrapped text in container

* unwrap when binding text to container

* rename `wrapped` to `autoResize`

* fix lint

* revert: use `center` align when wrapping text in container

* update snaps

* fix lint

* simplify logic on autoResize

* lint and test

* snapshots

* remove unnecessary code

* snapshots

* fix: defaults not set correctly

* tests for wrapping texts when resized

* tests for text wrapping when edited

* fix autoResize refactor

* include autoResize flag check

* refactor

* feat: rename action label & change contextmenu position

* fix: update version on `autoResize` action

* fix infinite loop when editing text in a container

* simplify

* always maintain `width` if `!autoResize`

* maintain `x` if `!autoResize`

* maintain `y` pos after fontSize change if `!autoResize`

* refactor

* when editing, do not wrap text in textWysiwyg

* simplify text editor

* make test more readable

* comment

* rename action to match file name

* revert function signature change

* only update  in app

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
2024-05-15 21:04:53 +08:00
.codesandbox chore: update required node version to 18 (#6837) 2023-07-31 23:47:41 +02:00
.github ci: add the workspace ignore check to install actions as dependency for auto release (#7593) 2024-01-22 17:01:00 +05:30
.husky build: temporarily disable pre-commit (#6132) 2023-01-19 13:50:42 +01:00
dev-docs fix: typo in doc api (#7466) 2024-04-30 16:52:42 +00:00
examples/excalidraw build: enable consistent type imports eslint rule (#7992) 2024-05-08 14:21:50 +05:30
excalidraw-app feat: add install-PWA to command palette (#7935) 2024-05-08 22:02:28 +02:00
firebase-project fix: update storage.rules (#5020) 2022-04-17 22:47:00 +02:00
packages feat: text wrapping (#7999) 2024-05-15 21:04:53 +08:00
public fix: host font assets from root (#7548) 2024-01-11 21:29:29 +01:00
scripts build: create ESM build for utils package 🥳 (#7500) 2024-02-28 19:33:47 +05:30
.dockerignore fix: docker build of Excalidraw app (#7430) 2024-05-07 18:00:58 +05:30
.editorconfig add editorconfig (#1198) 2020-04-03 19:19:01 +02:00
.env.development chore: change default port of collab server (#7641) 2024-02-01 14:41:38 +01:00
.env.production refactor: remove portal as it is no longer needed (#7623) 2024-01-29 16:37:09 +01:00
.eslintignore build: decouple package deps and introduce yarn workspaces (#7415) 2023-12-12 11:32:51 +05:30
.eslintrc.json build: enable consistent type imports eslint rule (#7992) 2024-05-08 14:21:50 +05:30
.gitattributes Add gitattributes (#2164) 2020-09-15 21:59:00 +02:00
.gitignore build: create ESM build for utils package 🥳 (#7500) 2024-02-28 19:33:47 +05:30
.lintstagedrc.js Keep errors, elements and comments consistent (#2340) 2020-11-05 18:06:18 +01:00
.npmrc feat: color picker redesign (#6216) 2023-05-18 16:06:27 +02:00
.nvmrc chore: update required node version to 18 (#6837) 2023-07-31 23:47:41 +02: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
CONTRIBUTING.md docs: migrating dev docs to docusaurus :) (#6073) 2023-02-01 19:57:54 +05:30
crowdin.yml build: decouple package deps and introduce yarn workspaces (#7415) 2023-12-12 11:32:51 +05:30
docker-compose.yml chore: Update action versions and docker build (#3065) 2021-02-20 14:28:33 +00:00
Dockerfile fix: docker build of Excalidraw app (#7430) 2024-05-07 18:00:58 +05:30
LICENSE Add MIT License (#176) 2020-01-05 13:09:29 -08:00
package.json build: specify packageManager field (#8010) 2024-05-14 10:45:27 +02:00
README.md docs: add steps for local development (#7449) 2023-12-16 19:18:35 +01:00
setupTests.ts feat: add system mode to the theme selector (#7853) 2024-04-08 16:46:24 +02:00
tsconfig.json docs: add next js with app router example (#7552) 2024-01-24 17:07:54 +05:30
vercel.json fix: host font assets from root (#7548) 2024-01-11 21:29:29 +01:00
vitest.config.mts chore: Add lcov coverage output to vitest (#7987) 2024-05-06 17:35:23 +02:00
yarn.lock chore: Bump vitest to 1.5.3 to support VSCode vitest Extension (#7968) 2024-05-01 20:47:52 +02:00

Excalidraw

Excalidraw Editor | Blog | Documentation | Excalidraw+

An open source virtual hand-drawn style whiteboard.
Collaborative and end-to-end encrypted.


Excalidraw is released under the MIT license. npm downloads/month PRs welcome! Chat on Discord Follow Excalidraw on Twitter

Product showcase

Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.

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 is a minimal showcase of what you can build with Excalidraw. Its source code 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 when integrating Excalidraw into your own app. To run the repository locally for development, please refer to our Development Guide.

npm install react react-dom @excalidraw/excalidraw

or via yarn

yarn add react react-dom @excalidraw/excalidraw

Check out our documentation for more details!

Contributing

Integrations

Who's integrating Excalidraw

Google CloudMetaCodeSandboxObsidian ExcalidrawReplitSliteNotionHackerRank • and many others

Sponsors & support

If you like the project, you can become a sponsor at Open Collective or use Excalidraw+.

Thank you for supporting Excalidraw

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

Vercel Sentry Crowdin