As with everything I get invested in I like to go in deep and see what it can really do. One of the easiest ways to start to mould Roam Research to your will and make it unique for your use case is to add in CSS or JS. These are two official supported ways that are easy to implement and can also be removes at your will.

Roam/css

You can easily change the look and feel of Roam by tweaking the CSS of the pages. This can go from a little light modding, to in-depth changes on how the layout looks.

To start create a page called roam/css and simply add in a code block that specifies css. There are a huge range of options available already created and shared on the help pages. I am currently using ‘Better Roam Research’ to add in dark mode.

Don’t forget to change the code block to specify css, it defaults to Clojure.

Roam/js

If you want to go further into Roam and really start building things that customise it to your usage then roam/js is the place to be. There are a huge number of scripts available that do everything from add more buttons, to change the way Roam works in the browser.

To add in this capability create a page call roam/js or just a block with this as its only contents. Nested under this write the following. {{[[roam/js]]}}, this will give you the following warning.

It is worth paying attention to this, and only run scripts you are familiar with as there are security and safety issues to bear in mind with javascript. If you are completely sure, click “Yes, I know what I am doing” once you have nested the script you wish to use underneath. You can stop the js from running at any point by clicking “stop this”.

This particular script I am running allows me to clear out empty Daily Notes pages and can be found here.