[New Plugin] Excalidraw: Virtual Whiteboard

Showcase Plugins
1

Hello everyone,

Our new plugin is worth checking out.

68747470733a2f2f657863616c69647261772e6e7963332e63646e2e6469676974616c6f6365616e7370616365732e636f6d2f67697468756225324670726f647563745f73686f77636173652e706e67 (1)
68747470733a2f2f657863616c69647261772e6e7963332e63646e2e6469676974616c6f6365616e7370616365732e636f6d2f67697468756225324670726f647563745f73686f77636173652e706e67 (1)1660Ă—1161 198 KB

Virtual whiteboard for sketching hand-drawn like diagrams.

Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them. It is very handy to dump your thoughts many of which are sensitive: designs for new features not yet released, interview questions, org charts, etc.

:tulip: See Plugin in Sample Bubble Editor:

Your support requests are welcome. Do not hesitate to ask us for help.

*If you want to try the plugin: subscriptions are pro-rated so giving it a try is low-risk — subscribing to the plugin for a few days will cost you a matter of pennies

:tulip: Features:

:art: Infinite, canvas-based whiteboard.
:writing_hand: Hand-drawn like style.
:first_quarter_moon: Dark mode.
:building_construction: Customizable.
:grinning: Shape libraries support.
:tongue: Localization (i18n) support.
:floppy_disk: Open format - export drawings as an .excalidraw json file.
:hammer_and_pick: Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser…
:arrow_right: Arrow-binding & labeled arrows.
:back: Undo / Redo.
:mag: Zoom and panning support.

:tulip: This plugin has 2 element:

  • Excalidraw
  • Fig SVG (To make SVG codes behave just like the Image element)

:tulip: EXCALIDRAW ELEMETN EXPOSED STATES:

:key: value: text, in json format, saved in the database. This
value can be matched with the editor’s data to start the editor with the value from the database.

:key: svg html: text, the canvas area exported as svg. It is compatible with the Fig SVG element

:key: svg base64: image, can be used directly as a source in an Image element

:key: id: text, randomly generated ID of the editor on the page. This value is used in the “Upload As PNG” action. It is there in case there is more than one editor on the page.

:key: png url: gets the URL of the PNG file uploaded to the File Manager when the “Upload As PNG” action is executed.

:tulip: EXCALIDRAW ELEMENT ACTIONS:

:key: Upload AS PNG: This action is used to upload the current canvas as a .png file to the File Manager. After the upload is complete, the editor gets the “png url” value.

3 Likes
2

Hi. I’m very interested in this. Are we able to set the canvas size? Set dynamic images as the background? Save as a predefined size image? It has a file uploaded as well as image uploader. White type of files can be uploaded?

3

Are we able to set the canvas size?

Nope.

Set dynamic images as the background?

Nope.

Save as a predefined size image?

Yes. It’s possible but needs upgrade.

It has a file uploaded as well as image uploader. White type of files can be uploaded?

You can import all image files on canvas area. These images will upload to the File Manager.

However, it is not currently possible to export the canvas area containing the image as an image with the “Export as PNG” action. Browsers have such a restriction due to security measures.

4

Thanks for your response. That’s unfortunate because I saw a lot of potential.

5

I have the following issue with the (otherwise great!) plugin:

I’m building an onepage–app and when I load the page an open a whiteboard it works as expected but then I close the whiteboard and open another one nothing shows up, the excalidraw ui stays empty. What’s going on there?

6

Someone else recently asked a question about the same problem. Is it possible to share console error outputs about this problem?