RoamJS is becoming a part of SamePage! To check out the inter-tool network we're building, click here to learn more!



Table of Contents

In Block Components

Components are website elements provided by this extension that you could add anywhere in your graph and it will show up exactly on that page. You could think of a standard Roam button, which you could make with two pairs of enclosing curly braces {{like this}} as the simplest version of a component - this will produce a button on your website. There are several other components that this extension currently supports and plans to support in the future. Every custom component will be a Roam button prefixed with the words "static site" and a colon, followed by the name of the component, e.g. {{static site:component}}.

Daily Log

This component replaces the block with a daily stream of dates that reference a given page. If you place the component in a page called "Morning Pages", then on your website, that component will render as a log of all the references to "Morning Pages" made on daily notes pages. You could create the component with the following block text:

{{static site:daily log}}

Here's an example of the component living on a page called "Website_Changelog":


You could inject your own HTML into Roam and use that to render on your website. The component will take the first HTML code block nested beneath it and replace itself with the contents of that HTML block. Here's an example of a block hierarchy using this component:

  • {{static site:inject}}

    • <button>This is a custom HTML button!</button>
      <p>With some paragraph text.</p>