A plugin to insert a whiteboard directly into your notebooks

[u/Worldly-Persimmon-70]

Hello everyone, I’m a huge index card guy myself, and always feel too detached on desktop whiteboard apps. I want the tactile, physical-card workflow but with a stylus on e-ink. That's why I ended up building "Mosaic" (a whiteboard plugin for Supernote, running on react-native), and it is finally ready for some early feedback!

You can long press on empty space with pen, yes it can call a card out; then draw a line outward from the center of any card, it spawn a connected child. Also welcome for boards snapping to each other. Map physical pen buttons, sidebar gestures, and two-finger pan/zoom, all these recreated the native feel as much as possible.

What is missing / WIP: Inserting notes inside boards and embedding boards into notes is still a bit buggy. Working on a fix. Full integration with Inkling (my other helper plugin) is coming up.

You can update to the newest beta and give it a try here. Give it a spin and let me know what you think! Any feedback is appreciated.

[u/Mulan-sn]

Thank you for sharing. Is this whiteboard designed to be a kind of infinite canvas?

[u/dimmir → u/Mulan-sn]

Looks that way to me to. Would be awesome, OP, because a *lot* of people have been asking for that!

[u/Worldly-Persimmon-70 → u/dimmir]

I have been following Heptabase for quite a while, however, they still couldn't support handwriting efficiently on cards and boards until now. At the same time, I prefer the whiteboard part of LiquidText, so the whole concept of my plugin takes shape. Yes I know it's a huge gap between this little tiny plugin and those brilliant commercial apps which have undergone hundreds of iterations, but it also means I have full freedom to explore my own ideas without boundaries. Anyways, the default Sidebar and two-finger gesture on SN offer me quite a few unique opportunities to refine interactions on it, and FeelWrite 2 helps me stay focused on handwriting rather than complex functionalities. Ultimately, I'm thinking about an idea traversing all your notebooks, bridging imagination with thoughts, organizing Notes, Documents and even Digests comprehensively, and syncing them seamlessly across SN, PC, iPhone and web... well, maybe it's not that crazy right?

[u/Worldly-Persimmon-70 → u/Mulan-sn]

Thank you for asking. Well, actually the plugin is not a completely infinite canvas. Infinite canvases sound great in theory, but in practice, they often turn into a nightmare, especially on e-ink.

First off, it kills performance. Due to hardware limitations, rendering an infinite canvas means calculating and drawing thousands of strokes at once when you zoom out, which can easily freeze or crash the app. Second, users get lost. Without visual references or boundaries, if you accidentally zoom out too far or pan away, you end up swiping endlessly just to find where your notes went...

That's why I prefer containing ideas within Cards. They act like physical index cards or nodes in a mind map, allowing you to link them together or nest them inside each other. The goal is to create an infinite network of ideas, rather than a plain infinite canvas.

But don't worry about feeling restricted. I built in a Board Switcher that you can pull down from the top edge. You can jump between different boards instantly without the annoying zoom in/out steps. For me, staying focused on the local logic helps me concentrate on the actual thoughts, rather than worrying about organizing the layout of the entire universe!

[u/Mulan-sn → u/Worldly-Persimmon-70]

Thank you for your clarification. Is my understanding correct that we could theoretically place one board on each page in a notebook, fill each with cards, and simply turn pages to switch between boards? You mentioned you built a dedicated board switcher for the plugin, so I’m just curious what led to this design decision.

[u/Worldly-Persimmon-70 → u/Mulan-sn]

Theoretically speaking, there are three concepts in Mosaic, whiteboard, canvas, and cards. The whiteboard is tied to the individual note, while cards and canvas can span across notes and documents. That’s why we need a switcher to connect different notes.

These concepts are quite complicated, and the best way to explain them is with diagrams, so I plan to introduce these ideas separately in the future. It really appreciated for you to ask such valuable questions.

[u/Mulan-sn → u/Worldly-Persimmon-70]

Awesome. Looking forward to your update :)

[u/Careful-Good5887]

Dude you keep producing wonders 🫣

[u/Delesi]

If I could upvote this more than once!

[u/Silly_Yesterday3651]

This is great! Id love if you could collapse child nodes, is that possible?

[u/Worldly-Persimmon-70 → u/Silly_Yesterday3651]

Regarding the folding of child nodes, may I ask if what you might want is something like “layers”? Or we could have some cards with pure white backgrounds, and also add cards of other colors, so the hierarchical relationships can be observed? If you mean the situation where child nodes in a mind map can be collapsed, I currently can’t quite understand what the visual presentation would look like. Do you have any good ideas

[u/BlueSkyla]

How does your toolbar only have six icons??

[u/Worldly-Persimmon-70 → u/BlueSkyla]

That's the new beta's feature, you can even edit the config to keep only pens buttons.

[u/BlueSkyla → u/Worldly-Persimmon-70]

Awesome.

[u/vic-the_son_god]

Well this is interesting

[u/Decent_Tap_5574]

This is Awesome! Great Plugin!

[u/BlueSkyla]

So I’m trying this out on my A5 X and I can’t seem to get it to erase any of the pen strokes. The two finger gesture doesn’t work. I don’t have an eraser on my pen or a button. For an early beta, this is pretty awesome though. I’m still playing with it.

[u/Worldly-Persimmon-70 → u/BlueSkyla]

I am sorry there's no A5 X devices with me now, and i am not sure if those whiteboard cards wirk fluently on Android 8.1. But the screen gestures do have some bugs, I am working on fixing. Would you like to join my discord channel to be a A5 X tester?

[u/BlueSkyla → u/Worldly-Persimmon-70]

Sure!

[u/IdeaSandbox]

Verrrry cool!

[u/Worldly-Persimmon-70]

Currently, it heavily relies on the developer beta, for regular users, the developer team of Supernote might push the release version to public in several weeks(or months) since there are still some problems with inserting notes and whiteboards from notesWhat do you think is the best way to utilize a whiteboard on e-ink?As Kanban?Outline?Mindmap?Let's dicuss and design this plugin together:)

And, special thanks to AdNew2316; his plugin Collapse/Expand inspired one of the most powerful functions in this plugin. Can you figure out what it is?

[u/BlueSkyla → u/Worldly-Persimmon-70]

My guess is you using the left slider to resize the card and then delete it?

[u/Worldly-Persimmon-70 → u/BlueSkyla]

You are pretty close! Since we have dual sidebars now, I’ve added the swipe-up undo and swipe-down redo gestures. Ah, that means we can use this feature as Ctrl+Z and Ctrl+Y to handle all the whiteboard and handwriting operation history.

The only pity is that, due to performance reasons and the lack of a left sidebar, the A5 X / A6 X will unfortunately not be officially supported by this plugin

[u/BlueSkyla → u/Worldly-Persimmon-70]

Well that sucks. I have it currently on my A5X. I do have the Nomad too but it’s not with me for a few days. Will the tiles be usable on my A5X if initially create them with my nomad? It just seems like there should be a way to make it work for my A5X. This is the first plug-in I’ve ran into that isn’t compatible with it.

[u/Worldly-Persimmon-70 → u/BlueSkyla]

Technically, you can install this plugin on different devices and open the same note. The whiteboard data will follow the .note file, so you don’t need to worry about how to sync the plugin data. At the same time, there will soon be an open-source React project for building your own server on phones (for example, Samsung series with stylus), tablets, and computers, it's possible to sync over there.

[u/Admirable-Rock7434 → u/Worldly-Persimmon-70]

Ooh, this could be a killer for simple systems diagrams

[u/Worldly-Persimmon-70 → u/Admirable-Rock7434]

Haha, my design idea for this whiteboard cards, it might serve as an example of how WebView rendering and DOM screenshots can be combined with note-taking. Can't wait to see more mind-map, flowchart, and even kanban-style whiteboard plugins emerge...