Tables, diagrams and math

import { createEditorState, mountEditor } from "@openmarkdown-dev/editor";

const doc = `# Tables, diagrams and math

Click into a cell and type; Tab moves to the next one.

| Planet | Moons | Rings |
| :--- | ---: | :---: |
| Earth | 1 | no |
| Saturn | 274 | yes |

Inline math like $e^{i\\pi} + 1 = 0$, and a block:

$$
\\int_0^1 x^2\\,dx = \\frac{1}{3}
$$

\`\`\`mermaid
graph LR
  A[Markdown text] --> B[Editor]
  B --> C[Same text, saved]
\`\`\`
`;

// Mermaid and the math renderer load the first time the document needs them.
mountEditor(document.getElementById("editor")!, createEditorState({ doc }));

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>OpenMarkdown editor: tables, diagrams and math</title>
    <style>
      #editor { height: 460px; border: 1px solid #d9d6cf; border-radius: 8px; overflow: hidden; }
      #editor .cm-editor { height: 100%; }
    </style>
  </head>
  <body>
    <div id="editor"></div>
    <script type="module" src="./main.ts"></script>
  </body>
</html>

{
  "name": "openmarkdown-editor-example-tables-diagrams-math",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@openmarkdown-dev/editor": "0.1.0"
  },
  "devDependencies": {
    "typescript": "~5.8.3",
    "vite": "^7.0.4"
  }
}