**Created**:: [[2022-03-26 Saturday]] **Link**:: https://youtu.be/8zoFWRIV1Ks **Duration**:: 5:06 ![Roam Excalidraw with support for Images, Sticky Notes, and Live-Collaboration](https://youtu.be/8zoFWRIV1Ks) # Summary In this video, the creator demonstrates how to integrate the latest version of Excalidraw into the Roam Research platform, enhancing the visual capabilities of users. The integration allows for features like image support, sticky notes, and live collaboration with others, making it a powerful tool for visual note-taking. Viewers are also guided through the functionalities and important details behind using Excalidraw in this context. # Key Takeaways - Excalidraw can now be integrated into Roam Research, allowing users to enhance their note-taking with visual elements. - The tool supports images, sticky notes with word wrapping, and live collaboration both within Roam and externally. - Users are advised to save important drawings locally, as Excalidraw stores them on its servers, and collaboration features include user naming and link sharing. # Content Hey, Romans! I have some exciting news for you today. I found a way to integrate the latest version of Excalidraw into Roam. This way, you get access to images, sticky notes with word wrapping, and even live collaboration mode with people inside Roam and also outside Roam. Let me show you how this works. [* ](https://youtu.be/8zoFWRIV1Ks?t=0) So, I created a smart block for this, and I call this smart block "Excalidraw." If I would be able to spell the smart block, then you would see that when I run the smart block, an instance of Excalidraw is inserted into your drawing. On this instance, you can simply paste images and draw; you can do whatever you want. It is an instance of Excalidraw with your drawing. You can see that I have these two instances here; I could have multiple, of course, on multiple pages. [* ](https://youtu.be/8zoFWRIV1Ks?t=26) Let me talk to you a bit about what's behind the scenes. First of all, this instance is really an iframe that is pointing to a secure collaboration room on the Excalidraw.com servers. What does that mean? First of all, it means that these rooms are really safe; they have a 128-bit strong AES encryption, and they store your data on the servers. That data includes the entire drawing plus the images, so everything you see here is on the server. That's why when I close this and open it, then you can see a loading screen. Every time you open up the drawing, this scene is loaded from the Excalidraw servers. [* ](https://youtu.be/8zoFWRIV1Ks?t=71) Now, if there's a drawing that is particularly important to you, then you should actually save it to disk and save that file for yourself as well. Currently, Excalidraw will store your drawings indefinitely, but they might change their policy, and altogether it's good practice to keep a safe copy of files that are important to you. [* ](https://youtu.be/8zoFWRIV1Ks?t=126) The second point I want to highlight is if you click this collaboration button, first of all, you can specify your own name, and when you're collaborating with others, this is helpful because then they see who's collaborating on the other side. But also, if you copy this link and share it with others, then they can collaborate with you on this drawing. Similarly, if you want to edit this drawing in full-screen mode, you can open up a new browser tab, paste this link, and the scene will load, allowing you to continue editing. Whatever you edit here will, in fact, come back and be present in your drawing in Excalidraw. [* ](https://youtu.be/8zoFWRIV1Ks?t=151) Now, there's one more thing I want to draw your attention to. Now you see that there are two collaborators, but really I've closed the window. So what's going on? Sometimes, this number jumps up to three depending on how you opened and closed windows in Roam. This doesn't mean that someone is hijacking your drawing and is there; it means that you probably need to go to another page like this. When you open the other page and come back, probably by that time, we'll have only a single collaborator, and it will clear up. So typically, don't panic when you see an increasing number there; those are most probably phantom participants. [* ](https://youtu.be/8zoFWRIV1Ks?t=196) Now, there are some limitations that come with this. One limitation is when you switch this to dark mode, and then you reopen the page again, it will open up in light mode. Unfortunately, right now with collaboration mode, your canvas color is not stored. So that is unfortunately a given that I'm not able to do anything about. Your stencil library will be the stencil library in your browser, so that will work as expected. [* ](https://youtu.be/8zoFWRIV1Ks?t=240) I've published the smart block in the Roam.js smart block store; hopefully, David will release it to the public in a couple of days. Until then, I'm going to include a link for you in the video description from where you can install this script and you can play with it in your own Roam graph. Enjoy drawing, enjoy Roam, and enjoy drawing in Excalidraw! Thank you. [* ](https://youtu.be/8zoFWRIV1Ks?t=286) # YouTube Details ## YouTube Description If you find this SmartBlock and/or my videos helpful, please say thanks by buying me a coffee: https://ko-fi.com/zsolt If you want to connect, you can reach me (@zsviczian) on Twitter. This solution uses resources (storage, hosting) paid by the excalidraw team. If you use excalidraw frequently, consider subscribing to their paid service: https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=banner&utm_campaign=launch Links: --------- The Excalidraw SmartBlock: https://roamresearch.com/#/app/Zsolt-Blog/page/MhScwzKQi My blog: https://zsolt.blog/ Excalidraw: https://excalidraw.com/ Roam: https://roamresearch.com/ ## YouTube Transcript [hey romans i have some exciting news for](https://youtu.be/8zoFWRIV1Ks?t=0) [you today i found a way to integrate the](https://youtu.be/8zoFWRIV1Ks?t=2) [latest version of xcali draw into rome](https://youtu.be/8zoFWRIV1Ks?t=5) [this way you get access to images you](https://youtu.be/8zoFWRIV1Ks?t=9) [get access to sticky notes with word](https://youtu.be/8zoFWRIV1Ks?t=11) [wrapping you even get access to live](https://youtu.be/8zoFWRIV1Ks?t=14) [collaboration mode with people inside](https://youtu.be/8zoFWRIV1Ks?t=16) [rome but also outside rome let me show](https://youtu.be/8zoFWRIV1Ks?t=19) [you how this works](https://youtu.be/8zoFWRIV1Ks?t=22) [so i created](https://youtu.be/8zoFWRIV1Ks?t=24) [a](https://youtu.be/8zoFWRIV1Ks?t=26) [smart block for this and i call this](https://youtu.be/8zoFWRIV1Ks?t=28) [smart block x collet draw](https://youtu.be/8zoFWRIV1Ks?t=31) [and if i would be able to spell the](https://youtu.be/8zoFWRIV1Ks?t=33) [smart block then you would see that when](https://youtu.be/8zoFWRIV1Ks?t=36) [i run the smart block then an instance](https://youtu.be/8zoFWRIV1Ks?t=38) [of xcode draw is inserted into your](https://youtu.be/8zoFWRIV1Ks?t=42) [drawing](https://youtu.be/8zoFWRIV1Ks?t=45) [and on this instance you can simply](https://youtu.be/8zoFWRIV1Ks?t=46) [paste](https://youtu.be/8zoFWRIV1Ks?t=49) [images](https://youtu.be/8zoFWRIV1Ks?t=49) [and you can](https://youtu.be/8zoFWRIV1Ks?t=51) [draw](https://youtu.be/8zoFWRIV1Ks?t=52) [you can do whatever you want it is an](https://youtu.be/8zoFWRIV1Ks?t=53) [instance of accolade draw with your](https://youtu.be/8zoFWRIV1Ks?t=56) [drawing and you can see that i have](https://youtu.be/8zoFWRIV1Ks?t=58) [these two instances here i could have](https://youtu.be/8zoFWRIV1Ks?t=60) [multiple of course on multiple pages](https://youtu.be/8zoFWRIV1Ks?t=62) [let me talk to you a bit about what's](https://youtu.be/8zoFWRIV1Ks?t=65) [behind the scenes so first of all this](https://youtu.be/8zoFWRIV1Ks?t=68) [instance is really an iframe that is](https://youtu.be/8zoFWRIV1Ks?t=71) [pointing to a secure collaboration room](https://youtu.be/8zoFWRIV1Ks?t=74) [on the xcollidraw.com servers so what](https://youtu.be/8zoFWRIV1Ks?t=78) [does that mean](https://youtu.be/8zoFWRIV1Ks?t=81) [first of all that means that these rooms](https://youtu.be/8zoFWRIV1Ks?t=82) [are really safe](https://youtu.be/8zoFWRIV1Ks?t=84) [they have a 128-bit](https://youtu.be/8zoFWRIV1Ks?t=86) [strong aes encryption and they store](https://youtu.be/8zoFWRIV1Ks?t=90) [your data on the servers that data](https://youtu.be/8zoFWRIV1Ks?t=94) [includes the entire drawing plus the](https://youtu.be/8zoFWRIV1Ks?t=97) [images so everything you see here are on](https://youtu.be/8zoFWRIV1Ks?t=100) [the server and that's why](https://youtu.be/8zoFWRIV1Ks?t=102) [when i close this and open it then you](https://youtu.be/8zoFWRIV1Ks?t=105) [can see loading scene so every time when](https://youtu.be/8zoFWRIV1Ks?t=108) [you open up the drawing this scene is](https://youtu.be/8zoFWRIV1Ks?t=111) [loaded from the excladra servers](https://youtu.be/8zoFWRIV1Ks?t=114) [now if there's a drawing that is](https://youtu.be/8zoFWRIV1Ks?t=117) [particularly important to you](https://youtu.be/8zoFWRIV1Ks?t=120) [then you should actually save it to disk](https://youtu.be/8zoFWRIV1Ks?t=122) [and save that file for yourself as well](https://youtu.be/8zoFWRIV1Ks?t=126) [currently xcalidro will store your](https://youtu.be/8zoFWRIV1Ks?t=130) [drawings indefinitely](https://youtu.be/8zoFWRIV1Ks?t=132) [but](https://youtu.be/8zoFWRIV1Ks?t=135) [they might change their policy and](https://youtu.be/8zoFWRIV1Ks?t=136) [altogether it's good practice to keep a](https://youtu.be/8zoFWRIV1Ks?t=138) [safe copy of files that are important to](https://youtu.be/8zoFWRIV1Ks?t=141) [you](https://youtu.be/8zoFWRIV1Ks?t=144) [the second point i want to highlight is](https://youtu.be/8zoFWRIV1Ks?t=146) [if you click this collaboration button](https://youtu.be/8zoFWRIV1Ks?t=148) [first of all you can](https://youtu.be/8zoFWRIV1Ks?t=151) [specify your own name](https://youtu.be/8zoFWRIV1Ks?t=152) [and when you're collaborating with](https://youtu.be/8zoFWRIV1Ks?t=154) [others this is helpful because then they](https://youtu.be/8zoFWRIV1Ks?t=156) [see who's collaborating on the other](https://youtu.be/8zoFWRIV1Ks?t=158) [side but also if you copy this link](https://youtu.be/8zoFWRIV1Ks?t=161) [and you share this link with others](https://youtu.be/8zoFWRIV1Ks?t=164) [then they can collaborate with you on](https://youtu.be/8zoFWRIV1Ks?t=167) [this drawing](https://youtu.be/8zoFWRIV1Ks?t=169) [similarly if you want to edit this](https://youtu.be/8zoFWRIV1Ks?t=171) [drawing in full screen mode then you can](https://youtu.be/8zoFWRIV1Ks?t=173) [open up a new browser tab](https://youtu.be/8zoFWRIV1Ks?t=176) [paste this link](https://youtu.be/8zoFWRIV1Ks?t=179) [the scene will load and you can continue](https://youtu.be/8zoFWRIV1Ks?t=181) [the editing here whatever you edit here](https://youtu.be/8zoFWRIV1Ks?t=184) [will](https://youtu.be/8zoFWRIV1Ks?t=188) [in fact](https://youtu.be/8zoFWRIV1Ks?t=189) [come back and be present in your drawing](https://youtu.be/8zoFWRIV1Ks?t=190) [in xcode draw](https://youtu.be/8zoFWRIV1Ks?t=193) [now there's one more thing i want to](https://youtu.be/8zoFWRIV1Ks?t=195) [draw your attention to now you see that](https://youtu.be/8zoFWRIV1Ks?t=196) [there are two collaborators but really](https://youtu.be/8zoFWRIV1Ks?t=198) [i've closed the window so what's going](https://youtu.be/8zoFWRIV1Ks?t=201) [on sometimes this number jumps up to](https://youtu.be/8zoFWRIV1Ks?t=203) [three depending on how you opened and](https://youtu.be/8zoFWRIV1Ks?t=206) [closed windows in rome this doesn't mean](https://youtu.be/8zoFWRIV1Ks?t=208) [that someone is hijacking your drawing](https://youtu.be/8zoFWRIV1Ks?t=211) [and is there it means that you probably](https://youtu.be/8zoFWRIV1Ks?t=213) [need to go to](https://youtu.be/8zoFWRIV1Ks?t=216) [another page](https://youtu.be/8zoFWRIV1Ks?t=218) [like this and when you open the other](https://youtu.be/8zoFWRIV1Ks?t=220) [page](https://youtu.be/8zoFWRIV1Ks?t=223) [and you come back probably by that time](https://youtu.be/8zoFWRIV1Ks?t=224) [we'll have only a single collaborator](https://youtu.be/8zoFWRIV1Ks?t=227) [and it will clear up so typically don't](https://youtu.be/8zoFWRIV1Ks?t=229) [panic when you see an increasing number](https://youtu.be/8zoFWRIV1Ks?t=232) [there those are most probably phantom](https://youtu.be/8zoFWRIV1Ks?t=234) [participants now there are some](https://youtu.be/8zoFWRIV1Ks?t=238) [limitations that come with this so one](https://youtu.be/8zoFWRIV1Ks?t=240) [limitation is when you switch this to](https://youtu.be/8zoFWRIV1Ks?t=243) [dark mode](https://youtu.be/8zoFWRIV1Ks?t=246) [and then you reopen the page again](https://youtu.be/8zoFWRIV1Ks?t=248) [it will open up in light mode](https://youtu.be/8zoFWRIV1Ks?t=251) [unfortunately right now with](https://youtu.be/8zoFWRIV1Ks?t=253) [collaboration mode](https://youtu.be/8zoFWRIV1Ks?t=255) [your canvas color is not stored so that](https://youtu.be/8zoFWRIV1Ks?t=257) [is unfortunately a given that i'm not](https://youtu.be/8zoFWRIV1Ks?t=260) [able to do anything about your stencil](https://youtu.be/8zoFWRIV1Ks?t=263) [library will be the stencil library in](https://youtu.be/8zoFWRIV1Ks?t=266) [your browser so](https://youtu.be/8zoFWRIV1Ks?t=269) [that will work as expected i've](https://youtu.be/8zoFWRIV1Ks?t=271) [published the smart block in](https://youtu.be/8zoFWRIV1Ks?t=274) [the rome.js](https://youtu.be/8zoFWRIV1Ks?t=277) [smart block store hopefully david will](https://youtu.be/8zoFWRIV1Ks?t=279) [release it to the public in a couple of](https://youtu.be/8zoFWRIV1Ks?t=283) [days](https://youtu.be/8zoFWRIV1Ks?t=285) [until then i'm going to include a link](https://youtu.be/8zoFWRIV1Ks?t=286) [for you in the video description from](https://youtu.be/8zoFWRIV1Ks?t=289) [where you can install](https://youtu.be/8zoFWRIV1Ks?t=292) [this script and you can play with it in](https://youtu.be/8zoFWRIV1Ks?t=293) [your own wrong graph](https://youtu.be/8zoFWRIV1Ks?t=296) [enjoy drawing enjoy rome](https://youtu.be/8zoFWRIV1Ks?t=299) [enjoy drawing the next color draw](https://youtu.be/8zoFWRIV1Ks?t=301) [thank you](https://youtu.be/8zoFWRIV1Ks?t=304)