Template for Roam Depot Clojure based roam/render Plugins Roam Research extension template

For Extension Developers

This template provides a modern structure for creating Roam Research render components bundled as extensions on the Roam Depot.

Getting Started

1. Update the component name in src/index.js:

   const componentName = 'Your Extension Name'; // Update this
   const version = 'v1';

2. Important: The componentName is used to auto-generate a unique window variable to prevent conflicts between extensions. For example:

   • 'My Extension' becomes window.myExtensionExtensionData
   • 'TODO Progress Bar' becomes window.todoProgressBarExtensionData

   This variable tracks whether your extension is currently running.

3. Update your component logic in src/component.cljs and styling in src/component.css

4. Build your extension:

   npm install
   npm run build

5. Test by loading the extension.js file into your Roam graph

Key Features

• Async/await patterns for reliable block creation
• Auto-update functionality - code blocks update when users upgrade versions
• Better error handling with comprehensive logging
• Settings panel with example toggle for strikethrough CSS
• Non-destructive unload - components persist after extension uninstall

File Structure

• src/index.js - Main entry point with onload/onunload hooks
• src/entry-helpers.js - Helper functions for block creation/updates
• src/component.cljs - Your ClojureScript render component
• src/component.css - Component styling
• src/strikethrough.css - Example of additional CSS module
• webpack.config.js - Webpack configuration

For End Users

Setup

First make sure that User code is enabled in your settings. This allows custom components in your graph.

Usage

Easiest way to insert the component is though Roam's native template menu. Simply type ;; and look for EXTENSION NAME HERE

Dev Testing

Load up the latest alpha commit using this URL https://8bitgentleman.github.io/