Render the children.

src/OrgAst.module.css

@@ -8,19 +8,34 @@
 .OrgAstNode {
   border: 1px solid #000000;
   background: #ffffff;
-  padding: 5px;
   box-shadow: 3px 3px 4px #000000;
 
   > details {
-    margin-top: 5px;
+    border: 1px solid #000000;
+    margin: 5px 5px 5px 2px;
 
     > summary {
       cursor: pointer;
-      border: 1px solid #000000;
       padding: 5px 2px;
     }
   }
+
+  > details[open] {
+    > summary {
+      border-width: 0 0 1px 0;
+      border-style: dotted;
+      border-color: #000000;
+    }
+  }
 }
 
 .OrgAstNodeType {
+  font-size: 1.5rem;
+  font-weight: 700;
+  background: #6ccff6;
+  padding: 3px;
+}
+
+.OrgAstChildren {
+  padding: 5px 5px 5px 20px;
 }

src/OrgAst.module.css.d.ts

@@ -1,3 +1,4 @@
 export const OrgAst: string;
 export const OrgAstNode: string;
 export const OrgAstNodeType: string;
+export const OrgAstChildren: string;

src/OrgAst.tsx

@@ -3,7 +3,6 @@ import { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
 import styles from "./OrgAst.module.css";
 
 const OrgAst = (props: { addHighlight: Function; value: string }) => {
-  console.log(styles);
   const ast_tree = parse_org(props.value);
   console.log(JSON.stringify(ast_tree));
 
@@ -19,12 +18,10 @@ const OrgAst = (props: { addHighlight: Function; value: string }) => {
 };
 
 const OrgAstNode = (props: { node: any }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
-
   return (
     <div className={styles.OrgAstNode}>
       <div className={styles.OrgAstNodeType}>{props.node["ast-node"]}</div>
-      <details open={isOpen} >
+      <details>
         <summary>Standard Properties</summary>
         <dl>
           <dt>begin</dt>
@@ -40,12 +37,21 @@ const OrgAstNode = (props: { node: any }) => {
         </dl>
       </details>
       {Array.isArray(props.node.children) && props.node.children.length > 0 ? (
-        <details open={isOpen} >
+        <details open={true}>
           <summary>Children</summary>
+          <div className={styles.OrgAstChildren}>
+            <OrgAstNodeList node_list={props.node.children} />
+          </div>
         </details>
       ) : null}
     </div>
   );
 };
 
+const OrgAstNodeList = (props: { node_list: any[] }): React.JSX.Element[] => {
+  return props.node_list.map((node) => {
+    return <OrgAstNode node={node} />;
+  });
+};
+
 export default OrgAst;