Roam Research Docs · Help & user documentation

roam/render

markdown version · view in Roam Research

Examples of How to use Roam/render using JSX (NOTE: only ES5 works)

{{video: https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Fhelp%2FoDD64HiDSz.mp4?alt=media&token=e91182a5-7720-4899-b0ca-b9b0fe2ffcb5}}
- https://grain.com/share/highlight/NkzVPjnoX3P8gavWAVq9g00DiABYGCE1gWZIU63J

{{roam/render:

function main() {
  return React.createElement('h1', {}, 'Hello from  Javascript')
}

}}

function main() {
  return React.createElement('h1', {}, 'Hello from  Javascript')
}

{{roam/render:

var HelloWorldButton = function () {
  var _useState = React.useState(false),
      showText = _useState[0],
      setShowText = _useState[1];

  var handleClick = function handleClick() {
    setShowText(!showText);
  };

  return React.createElement(
    "div",
    null,
    React.createElement(
      "button",
      { onClick: handleClick },
      "Click Me"
    ),
    showText && React.createElement(
      "p",
      null,
      "Hello World"
    )
  );
};

}} -- This one was generated by chatGPT- just specify that you can't use const, import statements, exports

var HelloWorldButton = function () {
  var _useState = React.useState(false),
      showText = _useState[0],
      setShowText = _useState[1];

  var handleClick = function handleClick() {
    setShowText(!showText);
  };

  return React.createElement(
    "div",
    null,
    React.createElement(
      "button",
      { onClick: handleClick },
      "Click Me"
    ),
    showText && React.createElement(
      "p",
      null,
      "Hello World"
    )
  );
};

{{roam/render:

function main() {
  return <button>Hello from JSX</button>
}

}}

function main() {
  return <button>Hello from JSX</button>
}

https://twitter.com/conaw/status/1440594757462335496?lang=ca

.--

Articles::
A closer look at roam/render by Zsolt Viczian
- {{iframe: https://www.zsolt.blog/2021/02/a-closer-look-at-roamrender.html}}

Examples::

Code:

(ns md.example
  (:require
   [reagent.core :as r]
   [roam.util :as u]))

(defn parsed-text []
  (u/parse "[[Pages]] ((uWcJicabj)) and [link](https://roamresearch.com)"))

Rendered:

{{roam/render:

(ns md.example
  (:require
   [reagent.core :as r]
   [roam.util :as u]))

(defn parsed-text []
  (u/parse "[[Pages]] ((uWcJicabj)) and [link](https://roamresearch.com)"))

}}