Nowadays remote work is prevalent, a good online whiteboard tool is crucial for team collaboration. However, most whiteboard apps on the market are either single-function or complicated to operate, making it difficult to meet the diverse needs of users. Especially when brainstorming, process design or product prototyping, we often encounter the following pain points:
- Mapping tools are not intuitive enough and are expensive to learn;
- Lack of collaboration features makes it difficult to communicate in real time;
- Unable to protect privacy and sensitive information is easily leaked;
- The interface is monotonous and lacks expressiveness and creative stimulation.
So, is there a whiteboard tool that combines ease of use, collaboration, security and creativity? Today we recommend a powerful open source project - Excalidraw.
Introduction to Excalidraw
Excalidraw is an open source virtual hand-drawn style whiteboard tool thatBuilding with React, which goes live in January 2020, is very young. It offers real-time collaboration and end-to-end encryption to make your remote collaboration more creative and secure.Excalidraw aims to provide a simple, intuitive and powerful drawing experience for developers and end users.
A good whiteboard tool should not only fulfill the basic drawing needs, but also provide users with an enjoyable creative experience. excalidraw has been designed around the following core concepts:
- Simple and intuitive: get started and use it, no need to learn complex operations.
- Hand-drawn style: unique visual effects to stimulate creative thinking.
- Real-time collaboration: Multiple simultaneous editors, ideas collide instantly.
- Privacy is paramount: end-to-end encryption protects the fruits of your creativity.
Since going open source in 2020, Excalidraw's Star count has skyrocketed, and Excalidraw has now earned over 77,000 stars on GitHub.
Background of Excalidraw
On a weekend in early 2020, Facebook engineer Vojtech Rinik noticed that/demo After removing some of the basic drawing functions, I had a brainstorm and decided to recreate a simple drawing tool.
In addition to being the author of Excalidraw, Vjeux is also the author of theCo-founder of React Native, PrettierHe is also the creator of CSS-IN-JS, Yoga, and React Conf.
Vojtech shared his progress on Twitter:
In just a few hours, he implemented basic drawing features, including ellipses, text input, and the ability to hold down the Shift key to draw perfect circles or squares. He then added custom fonts, selection and deletion features.
Originally named "Excalibur", a name suggested by renowned developer Ken Wheeler, Vojtech continued to refine the project, adding features such as moving elements, mousing out of windows, and canceling text input, and committed the code to GitHub.
Soon the project caught the attention of the developer community. People were attracted by the simplicity of the interface and the hand-drawn style and got involved in the development of the project. As the functionality improved and the community continued to contribute, Excalidraw evolved into the powerful tool we see today.
Features of Excalidraw
Excalidraw provides a rich set of features to fulfill a variety of drawing and collaboration needs. The core features are listed below:
Drawing experience
- Hand-drawn style: a unique visual effect to personalize your charts.
- Rich tools: rectangle, circle, arrow, free brush and many other drawing tools.
- Unlimited Canvas: draw freely without space limitations.
- Graphics Library: Provides a collection of commonly used graphics for quick insertion.
Collaboration Functions
- Real-time Multiplayer Collaboration: Multiplayer simultaneous editing for creative sparks.
- End-to-end encryption: protect your creativity and privacy.
- Share Links: Generate read-only links with one click for easy sharing.
Ease of use
- Offline support: PWA technology, supports offline use.
- Local Priority: Automatically save to your browser without fear of data loss.
- Export function: PNG, SVG and clipboard export are supported.
- Dark Color Mode: protects your eyes and is suitable for nighttime use.
Developer Friendly
- npm packages: provide React components for easy integration into your own applications.
- Open source and open: free to customize and extend functionality.
- Detailed Documentation: Provides comprehensive development documentation and examples.
Multi-language support
- Internationalization: Supports multiple language interfaces to meet the needs of global users.
Excalidraw vs. other whiteboard tools
In order to visualize the advantages of Excalidraw, we can compare it with other mainstream whiteboard tools on the market:
| characterization | Excalidraw | Miro | Whimsical | Figma |
|---|---|---|---|---|
| prices | free and open source | cover the costs | cover the costs | cover the costs |
| hand-painted style | ✅ | ❌ | ✅ | ❌ |
| Real-time collaboration | ✅ | ✅ | ✅ | ✅ |
| end-to-end encryption | ✅ | ❌ | ❌ | ❌ |
| Offline use | ✅ | ❌ | ❌ | ❌ |
| Open Source Customizable | ✅ | ❌ | ❌ | ❌ |
| learning curve | lower (one's head) | center | lower (one's head) | your (honorific) |
| Applicable Scenarios | common (use) | Professional teamwork | Rapid Prototyping | Professional Design |
While Miro is slightly better for professional team collaboration and Figma has the edge in design professionalism, Excalidraw stands out for its ease of use, privacy protection and open source friendliness. Especially for small teams and individual users, Excalidraw offers a perfect balance.
Installation and use of Excalidraw
Excalidraw is relatively easy to install and use, and offers a variety of ways to adapt it to different needs.
Integration into other tools
If you want to integrate Excalidraw into your own project, you can follow the steps below:
First, make sure your system is installed (version >= 12).
Then, install the Excalidraw package using npm:
npm install @excalidraw/excalidraw
Or use yarn:
yarn add @excalidraw/excalidraw
Use Excalidraw in your React components:
import { Excalidraw } from "@excalidraw/excalidraw";
function App() {
return (
<div style={{ height: "500px" }}>
<Excalidraw />
</div>
);
}
Private deployment
For those who wish to self-host Excalidraw, it can be deployed using Docker.
For those of you who don't have a technical background, you don't have to worry about installation.Sealos App StoreOne-click deployment application templates are provided, and deployment can be done with a single mouse click, which is very silky smooth.
If you want to deploy an Excalidraw quickly but don't want to get bogged down in a tedious installation and configuration processYou can try Sealos.
Open directlyExcalidraw Application Templates, and then click "Go to Sealos Deployment" in the upper right corner.
If this is your first time usingSealosIf you want to deploy a template, you need to register and log in to your Sealos public cloud account, and you will be redirected to the template's deployment page immediately after logging in.
Click "Deploy Application" in the upper right corner to start deployment. Once the deployment is complete, click "Details" of the application directly to enter the details page of the application.
Wait for the application status to change to running, then click on the external address to open the Excalidraw visualization.
In addition to this, there is another way to open it, by first refreshing the Sealos desktop (i.e., in the interface refreshes the browser), then you'll notice an additional icon on the Sealos desktop:
Clicking this icon directly opens the visualization interface of Excalidraw.
Isn't it a bit of déjà vu? Yes, it does.Windows shortcuts!
If a stand-alone operating system can do it, Sealos Cloud OS can do it too.
Basic use of Excalidraw
Let's take a look at the basic functions and tips for using Excalidraw.
Let's start with a hand-drawn look at Excalidraw:
In addition to this, you can also draw wireframes, step-by-step diagrams, various flowcharts, kanban diagrams, etc. for web pages.
Wireframes:
Various matches:
Various project mascots:
The best way to increase your drawing efficiency is to use shortcuts. We can see all the shortcuts in the shortcut help in the bottom right corner.
summarize
Overall, Excalidraw is an open source project full of potential that is redefining our collaborative whiteboard experience. Whether you're a developer, a designer, or a regular user, Excalidraw is worth a try. It will not only increase your productivity, but also inspire creativity and make remote collaboration more fun and efficient.