Improve the starting text for the editor.

src/Editor.css

@@ -13,7 +13,7 @@
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
     "DejaVu Sans Mono", monospace;
   font-weight: normal;
-  font-size: 3rem;
+  font-size: 1.3rem;
   text-align: initial;
 }
 

src/Editor.tsx

@@ -4,7 +4,23 @@ import { Highlight } from "./highlight";
 import { buildShadow } from "./shadow";
 import OrgAst from "./OrgAst";
 
-function Editor({ defaultValue = "I have a text value." }) {
+const default_org_source: string = `Welcome to the Organic Wasm Demo!
+
+Type your Org [fn:1] source in this text box, and it will be parsed by Organic [fn:2] that has been compiled into wasm and embedded in this page. The resulting AST will be rendered to the right.
+
+In the AST on the right, you can:
+
+1. Click on an AST node to highlight the corresponding portion of the Org source on the left.
+2. Expand/Collapse the children, properties, and standard properties.
+
+* Footnotes
+
+[fn:1] https://orgmode.org/
+
+[fn:2] https://code.fizz.buzz/talexander/organic
+`;
+
+function Editor({ defaultValue = default_org_source }) {
   function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
     setValue(event.target.value);
   }

src/OrgAst.module.css

@@ -30,7 +30,7 @@
 }
 
 .OrgAstNodeType {
-  font-size: 1.5rem;
+  font-size: 1.3rem;
   font-weight: 700;
   background: #6ccff6;
   padding: 3px;
@@ -38,4 +38,5 @@
 
 .OrgAstChildren {
   padding: 5px 5px 5px 20px;
+  background: #eeeeee;
 }

src/index.tsx

@@ -1,13 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import init from "../../organic/target/wasm32-unknown-unknown/js/wasm";
 import App from "./App";
 
-init().then(() => {
+ReactDOM.render(
-  ReactDOM.render(
+  <>
-    <>
+    <App />
-      <App />
+  </>,
-    </>,
+  document.getElementById("root"),
-    document.getElementById("root"),
+);
-  );
-});