DEVELOPER

Develop and publish your own Roam extensions directly to RoamJS!

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block and type three backticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

var existing = document.getElementById("roamjs-developer-main");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/developer/main.js";
  extension.id = "roamjs-developer-main";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Finally, click "Yes, I Know What I'm Doing".


Usage

The Developer extension on RoamJS helps other software developers publish and share extensions to other Roam users directly to RoamJS! This home page will guide you through the process of how to publish your extension to RoamJS.

1. Create your extension

To create a Roam extension, create a {{[[roam/js]]}} block and nest under it a JavaScript code block. All code you write there is immediately executed within the Roam environment!

Now because it's not practical to develop full fledged applications in Roam, it's common to copy and paste whatever code you would write into your code editor into a local .js file that you version control with git. RoamJS has a toolkit available in npm called RoamJS Scripts that you could install to help with this development workflow!

In fact, to start a new Roam extension from scratch the "RoamJS" way, you could run npm roamjs-scripts init --name example.

2. Install RoamJS Developer

Pick a graph that you want to serve as your personal hub to manage your extensions (this can be your personal graph!), and install the RoamJS Developer extension. Request a path on the main dashboard that matches the id of your extension. This path is the location on RoamJS that the extension will be available on, e.g. https://roamjs.com/example/main.js.

Resources

Most existing developer documentation lives at developer.roamjs.com. Stay tuned while we migrate that information to RoamJS here.


Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right.

If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

Other Extensions