Virtual whiteboard for sketching hand-drawn like diagrams
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Go to 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>
10 months ago
.codesandbox chore: update required node version to 18 (#6837) 2 years ago
.github ci: add the workspace ignore check to install actions as dependency for auto release (#7593) 1 year ago
.husky build: temporarily disable pre-commit (#6132) 2 years ago
dev-docs fix: typo in doc api (#7466) 10 months ago
examples/excalidraw build: enable consistent type imports eslint rule (#7992) 10 months ago
excalidraw-app feat: add install-PWA to command palette (#7935) 10 months ago
firebase-project fix: update `storage.rules` (#5020) 3 years ago
packages feat: text wrapping (#7999) 10 months ago
public fix: host font assets from root (#7548) 1 year ago
scripts build: create ESM build for utils package 🥳 (#7500) 1 year ago
.dockerignore fix: docker build of Excalidraw app (#7430) 10 months ago
.editorconfig add editorconfig (#1198) 5 years ago
.env.development chore: change default port of collab server (#7641) 1 year ago
.env.production refactor: remove portal as it is no longer needed (#7623) 1 year ago
.eslintignore build: decouple package deps and introduce yarn workspaces (#7415) 1 year ago
.eslintrc.json build: enable consistent type imports eslint rule (#7992) 10 months ago
.gitattributes Add gitattributes (#2164) 5 years ago
.gitignore build: create ESM build for utils package 🥳 (#7500) 1 year ago
.lintstagedrc.js Keep errors, elements and comments consistent (#2340) 4 years ago
.npmrc feat: color picker redesign (#6216) 2 years ago
.nvmrc chore: update required node version to 18 (#6837) 2 years ago
.prettierignore Change target branch of coverage and pretty print (#1850) 5 years ago
.watchmanconfig Don't reset cache while zooming using a gesture (#1103) 5 years ago
CONTRIBUTING.md docs: migrating dev docs to docusaurus :) (#6073) 2 years ago
Dockerfile fix: docker build of Excalidraw app (#7430) 10 months ago
LICENSE
README.md docs: add steps for local development (#7449) 1 year ago
crowdin.yml build: decouple package deps and introduce yarn workspaces (#7415) 1 year ago
docker-compose.yml chore: Update action versions and docker build (#3065) 4 years ago
package.json build: specify `packageManager` field (#8010) 10 months ago
setupTests.ts feat: add system mode to the theme selector (#7853) 11 months ago
tsconfig.json docs: add next js with app router example (#7552) 1 year ago
vercel.json fix: host font assets from root (#7548) 1 year ago
vitest.config.mts chore: Add lcov coverage output to vitest (#7987) 10 months ago
yarn.lock chore: Bump vitest to 1.5.3 to support VSCode vitest Extension (#7968) 10 months ago

README.md

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