Today I show how easy it is to implement a customizable whiteboard with React in a very short time.

Whiteboard

A project called Excalidraw lets you implement and host a very powerful virtual whiteboard on every web place you want.

The NPM module @excalidraw/excalidraw provides React components that allow to integrate this whiteboard in a few steps into an own website project.

Create project

Run

npx create-react-app my-whiteboard --template typescript

in your terminal to start a Single Page Application in TypeScript.

Switch to my-whiteboard subfolder and then open src/App.tsx file and replace its content with this boilerplate code:

import React from 'react';

import { Excalidraw } from "@excalidraw/excalidraw";

import './App.css';

function App() {
  return (
    <>
      <div style={{ height: "100vh" }}>
        <Excalidraw
          theme='dark'
          autoFocus
        />
      </div>
    </>
  );
}

export default App;

Install dependencies

As already mentioned, we need to install @excalidraw/excalidraw NPM module before we can build anything as a static website:

npm install @excalidraw/excalidraw --save

Build the project

Run

npm run build

in your terminal.

The final output will be available in public/ subfolder, which is ready to be uploaded to your server.

Conclusion

Yep, that’s all! 😎

Have fun while trying it out and maybe it would be nice if you support this great project as well! 🎉