Very basic org properties rendering.

src/OrgAst.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import styles from "./OrgAst.module.css";
+import { Fragment } from 'react';
 
 const OrgAst = (props: {
   setHighlight: Function;
@@ -70,6 +71,18 @@ const OrgAstNode = (props: {
           <dd>{props.node["standard-properties"]["post-blank"]}</dd>
         </dl>
       </details>
+      {!!Object.keys(props.node.properties).length ? (
+        <>
+          <details>
+            <summary>Properties</summary>
+            <OrgPropertiesList selectNode={props.selectNode}
+              parentUniqueId={props.uid}
+              selectedNode={props.selectedNode}
+              properties={props.node.properties}
+            />
+          </details>
+        </>
+      ) : null }
       {Array.isArray(props.node.children) && props.node.children.length > 0 ? (
         <details open={true}>
           <summary>Children</summary>
@@ -115,4 +128,25 @@ const OrgAstNodeList = (props: {
   });
 };
 
+const OrgPropertiesList = (props: {
+  selectNode: Function;
+  parentUniqueId: string;
+  selectedNode: string;
+  properties: Object;
+}): React.JSX.Element => {
+  const entries = Object.entries(props.properties).map(([key, value]) => {
+    return (
+      <Fragment key={key}>
+        <dt>{key}</dt>
+        <dd>{JSON.stringify(value)}</dd>
+      </Fragment>
+    );
+  });
+  return (
+    <dl>
+      {entries}
+    </dl>
+  );
+};
+
 export default OrgAst;