The WYSIWYG mode extension allows users to edit blocks in it's readable, rendered state!


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-wysiwyg-mode");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/wysiwyg-mode.js";
  extension.id = "roamjs-wysiwyg-mode";
  extension.async = true;
  extension.type = "text/javascript";

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


The feature set of this extension is very limited and is still experimental. Use at your own risk. Currently, only the following stylings are supported:

  • Bolding (CTRL+b/CMD+b)
  • Italics (CTRL+i/CMD+i)

To edit a block in WYSIWYG (what you see is what you get) mode, hold on the ALT key while clicking on it. Now you should be able to edit the content just like how it will be when rendered!

While in a block, you could hit ALT+w to toggle the block to and from WYSIWYG mode.



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