WhiteBoard plugin

[linonetwo]

What is Jeremy’s business model?

Something I would definitely pay for is a whiteboard app/layout. I have found Cecily which is something similar but development seems to have been discontinue a long time ago. I know of some new whiteboard apps such as Heptabase and Scrintal but these are proprietary. Another one is Kosmik which seems very promising and the developers are planning to open-source it. However, I don’t know if any of these are going to achieve the level of ‘‘interconnectedness’’ and customisability TW is capable …

Now you don’t need to pay for it

Demo site: TW Whiteboard — Demo of TiddlyWiki Whiteboard Plugin, based on Tldraw and React plugin.
Github: GitHub - tiddly-gittly/tiddlywiki-whiteboard: Tiny little drawing app in TW, using tldraw. Providing diagram widget and whiteboard view. (Give it a star)

Install: best from CPL TW5 CPL Wiki — TiddlyWiki5 Plugin Library for TiddlyWiki Chinese Communities , because it needs ReactJS plugin to run, use this library it will auto-install the dependency.

I’m going to work for toeverything/AFFiNE next month (and leaving ByteDance), and I’m going to use what I learn there to build plugins for TiddlyWiki, because I will still use TiddlyWiki for decades.

This whiteboard plugin mimic the “seamless view” of https://livedemo.affine.pro/ . Currently is purely a tldraw · GitHub widget, but I will add feature of writing wikitext in the whiteboard later. Just like what happened in GitHub - zsviczian/obsidian-excalidraw-plugin: A plugin to edit and view Excalidraw drawings in Obsidian .

---

You might also need to install its requirement, ReactJS plugin, better install from https://tw-cpl.netlify.app/ or from Release v0.4.6-fix · tiddly-gittly/tw-react · GitHub !

The ReactJS plugin in the whiteboard demosite is of dev mode, so size is much larger than the one in the above two websites.

[saqimtiaz]

The ability to import images and then mark them up is amazing.

Do you think it would be possible to import into the whiteboard an image that is saved in a tiddler?

@linonetwo

I’m going to work for toeverything/AFFiNE next month (and leaving ByteDance), and I’m going to use what I learn there to build plugins for TiddlyWiki, because I will still use TiddlyWiki for decades.

Congratulations and best of luck, and I love the sentiment about using what you learn to build what you can use for decades

[linonetwo]

Thanks.

About the imported images, currently they are stored in the assets field (default behavior of tldraw). This can be convenient, but surely make the image not reuseable.

I think one possible way to use image tiddler is do a transclusion of that tiddler, after I implement the wikitext feature in it.

[TiddlyDave]

@linonetwo

Now you don’t need to pay for it

Thanks @linonetwo your work is very much appreciated. This is already very useful as it is.

When I was looking at the whiteboard apps I’ve listed the main missing piece for me was creating dyamic whiteboards or containers in whiteboards based on metadata. If you would manage to do this I would definitely pay for it

[jeremyruston]

@linonetwo

I’m going to work for toeverything/AFFiNE next month (and leaving ByteDance), and I’m going to use what I learn there to build plugins for TiddlyWiki, because I will still use TiddlyWiki for decades.

That’s a very nice thing to hear, and congratulations on your new role, and best of luck.

The TLDraw plugin looks great, I’ll be looking forwards to further developments.

[Mohammad]

This is more than amazing! Thank you for sharing.

@linonetwo

I’m going to work for toeverything/AFFiNE next month (and leaving ByteDance), and I’m going to use what I learn there to build plugins for TiddlyWiki, because I will still use TiddlyWiki for decades.

Congratulations!

[linonetwo]

With some small improvements now (don’t forget to refresh the demo site to clear the browser cache):

1. plugin size is reduced, because some multiplayer features are temporarily removed
2. You can write wikitext in stickers!

Use this to create a sticker:

And double click to edit it, and click outside to complete the edit.

The wikitext inside of the sticker will be rendered, including transclusion, buttons and links!

[Springer]

This whiteboard works beautifully on the demo site. Yet installing the plugin on an otherwise blank tiddlyhost site (5.2.3) is giving me “undefined widget” errors.

https://minimalist-test-mode.tiddlyhost.com/

[linonetwo]

You might also need to install its requirement, ReactJS plugin, better install from https://tw-cpl.netlify.app/ or from Release v0.4.3 · tiddly-gittly/tw-react · GitHub !

The ReactJS plugin in the whiteboard demosite is of dev mode, so size is much larger than the one in the above two websites.

[Springer]

Yes, that was it. I had specifically looked for indications of a dependency when installing the whiteboard, but had not noticed anything. Thanks again for such a beautiful solution!

[linonetwo]

Sorry, I forget to add tw-react plugin as dependency in plugin.info … I will add it in next version, thanks for this report.

[Watt]

Thank you @linonetwo for this! A really great plugin.

I am still experimenting with it but here are some questions;

Is it possible to add more colour options to the colour picker? I would like my ‘stickies’ to be white with no border by default.

Is there a way to toggle the whiteboard edit toolbars on/off? A ‘read only’ mode?

Exporting a whiteboard as an image doesn’t render transclusions in a sticky. Maybe it’s not possible - just feedback.

These are all small questions, the plugin is amazing, thank you, and congratulations on your new job.

[linonetwo]

Style and font are TODOs, but maybe low priority if I got next gap month

I add a readonly=“yes” field to the widget, and make it readonly in View mode, and editable in Edit mode, in v0.3.0

[linonetwo]

SuperTag plugin, auto-generate a field editor on view template 's demo site heavily uses the whiteboard to demonstrate the ideas.

[ponponyaya]

Hello, I have a problem when I use TW Whiteboard.
I use it with TiddlyWiki v5.2.5.
And I use CPL to install it .
The problem is when I use text, I can’t resize the text. Like the following:

I don’t know what’s wrong with it?
This is my TiddlyWiki file, it only have 4 plugins.

Download my TiddlyWiki file here.

myPlugins.png

My TiddlyWiki File

I really want to use TW Whiteboard. Hope anyone can help me solve this problem. Thanks all.

[linonetwo]

Hi, thanks for report, seems the bug is caused by CSS. You can try install itonnote-plugin to start using it.

I will try figure out the real cause.

[linonetwo]

The cause is fontFamily, here is my setting that make it work

-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

compare to tiddlywiki default, seems some font name should add " " to them. This might be a bug in tldraw whiteboard system.

-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;

[ponponyaya]

@linonetwo

The cause is fontFamily, here is my setting that make it work

-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

It’s work! Thank you.

[JanJo]

Hi @linonetwo,
Is something broken in the demo? I can’t do any edits in the whiteboards and the edit-buttons do not respond.
It would be great to have a link working version for 5.27

[linonetwo]

I think it have some bug in Firefox, Chrome and Edge works fine. It is in the issue list, I will take time to figure out.