diff --git a/fidlviz/README.md b/fidlviz/README.md
new file mode 100644
index 0000000..c0582aa
--- /dev/null
+++ b/fidlviz/README.md
@@ -0,0 +1,11 @@
+# fidlviz
+
+fidlviz is a tool for visualizing the FIDL wire format.
+
+It is entirely client-side, implemented in `index.html`, `style.css`, and `script.js`.
+
+Click the Help button in the app to learn how it works.
+
+## Known issues
+
+fidlviz has only been tested in Chrome. It requires `BigInt` support, so it does not work in Safari and other browsers that lack support.
diff --git a/fidlviz/favicon.ico b/fidlviz/favicon.ico
new file mode 100644
index 0000000..00b6c9f
--- /dev/null
+++ b/fidlviz/favicon.ico
Binary files differ
diff --git a/fidlviz/index.html b/fidlviz/index.html
new file mode 100644
index 0000000..7d3784c
--- /dev/null
+++ b/fidlviz/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>fidlviz</title>
+        <link rel="shortcut icon" href="favicon.ico">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <div class="controls-container">
+            <button id="HelpButton" type="button" class="controls-button">Help</button>
+            <button id="DebugButton" type="button" class="controls-button">Debug</button>
+            <button id="ResetButton" type="button" class="controls-button">Reset</button>
+            <button id="LayoutButton" type="button" class="controls-button">Layout</button>
+        </div>
+        <div id="HelpModal" class="modal-container" hidden>
+            <div id="HelpModalContent" class="modal-box">
+                <h2>Help</h2>
+                <p>Welcome to <b>fidlviz</b>, a web app for visualizing the FIDL wire format.</p>
+                <p>Here are some tips to help you get started:</p>
+                <ul>
+                    <li>The <b>input</b> editor is on the left. Enter your FIDL data structures there. If you forget the syntax, click the <b>Reset</b> button to get back the example.</li>
+                    <li>The <b>output</b> view is on the right. Initially, this shows bytes. By dragging the slider in the top-right, or using <kbd>Ctrl</kbd><kbd>[</kbd> and <kbd>Ctrl</kbd><kbd>]</kbd>, you can instead view intermediate stages where the input gets <b>lowered</b> to progressively simpler elements.</li>
+                    <li>To <b>highlight</b> something, just click on it. Highlighting input will cause the corresponding output to be highlighted too, and vice versa. Click inside curly braces to highlight all contained fields in different colors.</li>
+                    <li>Hover over underlined regions of the output to reveal explanatory <b>tooltips</b>. When viewing bytes, there are no underlines because everything has a tooltip.</li>
+                    <li>Click the <b>Layout</b> button to switch between the left/right editor layout and the top/bottom one (useful for long lines and narrow windows).</li>
+                    <li>The app <b>autosaves</b> everything to your browser’s local storage. You can always start fresh by clicking the <b>Reset</b> button.</li>
+                    <li>To <b>close</b> this help window, press <kbd>Esc</kbd> or <kbd>Enter</kbd>.</li>
+                </ul>
+                <p>Enjoy! If you find a bug, please report it to mkember@google.com.</p>
+                <hr>
+                <p><i>If you like <b>fidlviz</b>, you might also like <a href="https://fidlbolt-6jq5tlqt6q-uc.a.run.app/"><b>fidlbolt</b></a></i>.</p>
+            </div>
+        </div>
+        <div class="wrapper">
+            <div class="heading">
+                <h1><span class="heading-fidl">fidl</span><span class="heading-viz">viz</span></h1>
+            </div>
+            <div id="Container" class="container" hidden>
+                <div id="SplitContainer" class="split-container split-container--vertical">
+                    <div id="InputPart" class="split-item split-item--first">
+                        <div id="InputEditor" class="editor"></div>
+                    </div>
+                    <div id="Splitter" class="split-splitter split-splitter--vertical"></div>
+                    <div id="OutputPart" class="split-item split-item--second">
+                        <div class="part-header">
+                            <h2 id="OutputTitle" class="part-title">&nbsp;</h2>
+                            <input id="OutputSlider" class="slider"
+                            type="range" min="1" max="8"
+                            value="8" list="Tickmarks">
+                        </div>
+                        <div id="OutputEditor" class="editor"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="OutputTooltip" class="tooltip" hidden></div>
+        <datalist id="Tickmarks">
+            <option value="1"></option>
+            <option value="2"></option>
+            <option value="3"></option>
+            <option value="4"></option>
+            <option value="5"></option>
+            <option value="6"></option>
+            <option value="7"></option>
+            <option value="8"></option>
+        </datalist>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.8/ace.js"></script>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/fidlviz/script.js b/fidlviz/script.js
new file mode 100644
index 0000000..ccf93a1
--- /dev/null
+++ b/fidlviz/script.js
@@ -0,0 +1,2557 @@
+(function () {
+
+// Indent used for formatting output.
+const INDENT = "  ";
+
+// Table of ASCII character names used for tooltips on strings.
+const ASCII_NAMES = {
+  0:   "NUL (null)",
+  1:   "SOH (start of heading)",
+  2:   "STX (start of text)",
+  3:   "ETX (end of text)",
+  4:   "EOT (end of transmission)",
+  5:   "ENQ (enquiry)",
+  6:   "ACK (acknowledge)",
+  7:   "BEL (bell)",
+  8:   "BS (backspace)",
+  9:   "TAB (horizontal tab)",
+  10:  "LF (NL line feed, new line)",
+  11:  "VT (vertical tab)",
+  12:  "FF (NP form feed, new page)",
+  13:  "CR (carriage return)",
+  14:  "SO (shift out)",
+  15:  "SI (shift in)",
+  16:  "DLE (data link escape)",
+  17:  "DC1 (device control 1)",
+  18:  "DC2 (device control 2)",
+  19:  "DC3 (device control 3)",
+  20:  "DC4 (device control 4)",
+  21:  "NAK (negative acknowledge)",
+  22:  "SYN (synchronous idle)",
+  23:  "ETB (end of trans. block)",
+  24:  "CAN (cancel)",
+  25:  "EM (end of medium)",
+  26:  "SUB (substitute)",
+  27:  "ESC (escape)",
+  28:  "FS (file separator)",
+  29:  "GS (group separator)",
+  30:  "RS (record separator)",
+  31:  "US (unit separator)",
+  32:  "SPACE",
+  127: "DEL",
+};
+
+// =============================================================================
+// ===== TOKENIZING ============================================================
+// =============================================================================
+
+// Tokenizes user input.
+function tokenize(input) {
+  const tokens = [];
+  let currentToken = "";
+  let mode = "normal";
+  // True in "string" mode if the current character is escaped by a backslash.
+  let escape = false;
+  // Zero-based row and column of the current character. Col counts in bytes,
+  // so a multibyte character will advance col by > 1.
+  let row = 0, col = 0;
+  // {row, col} of the start of the current token.
+  let start = undefined;
+
+  // Pushes a character onto the current token.
+  function push(c) {
+    currentToken += c;
+  }
+
+  // Undoes the last push.
+  function unpush() {
+    currentToken = currentToken.substring(0, currentToken.length - 1);
+  }
+
+  // Emits the current token.
+  function emit() {
+    if (currentToken !== "") {
+      tokens.push({
+        text: currentToken,
+        // The row and col are 0-based. End row is inclusive, col exclusive.
+        start: {row: start.row, col: start.col},
+        end: {row, col},
+      });
+    }
+    start = undefined;
+    currentToken = "";
+  }
+
+  // Updates start to the current row and column, if not already set.
+  function setStart(c) {
+    if (c.trim() !== "" && start === undefined) {
+      start = {row, col};
+    }
+  }
+
+  // Increments row and col based on c.
+  function incPos(c) {
+    col += c.length;
+    if (c === "\n") {
+      row++;
+      col = 0;
+    }
+  }
+
+  for (const c of input) {
+    setStart(c);
+    if (mode === "normal") {
+      switch (c.trim()) {
+        case "#":
+          mode = "comment";
+          break;
+        case "\"":
+          emit();
+          setStart(c);
+          push(c);
+          mode = "string";
+          break;
+        case ":": case "{": case "}": case ",":
+          emit();
+          setStart(c);
+          push(c);
+          incPos(c);
+          emit();
+          continue;
+        case "":
+          emit();
+          break;
+        default:
+          push(c);
+          break;
+      }
+    } else if (mode === "string") {
+      if (c === "\n") {
+        if (escape) {
+          unpush();
+        } else {
+          push("\\n");
+        }
+      } else {
+        push(c);
+      }
+      switch (c) {
+        case "\\":
+          escape = !escape;
+          break;
+        case "\"":
+          if (!escape) {
+            incPos(c);
+            emit();
+            mode = "normal";
+            continue;
+          }
+          // fallthrough
+        default:
+          escape = false;
+          break;
+      }
+    } else if (mode === "comment") {
+      if (c === "\n") {
+        mode = "normal";
+      }
+    }
+
+    incPos(c);
+  }
+
+  emit();
+  if (mode === "string") {
+    throw {
+      token: tokens[tokens.length-1],
+      message: "unterminated string",
+    };
+  }
+  return tokens;
+}
+
+// =============================================================================
+// ===== PARSING ===============================================================
+// =============================================================================
+
+// Parses a list of tokens.
+function parse(tokens) {
+  let tokenIdx = 0;
+
+  // Store previous int and float tokens so that the next one can be inferred to
+  // have the same signedness and bit width.
+  let prevInt = null;
+  let prevFloat = null;
+
+  // Consumes a single token. If the argument is provided, checks that the token
+  // contains the given text and fails otherwise.
+  function consume(text) {
+    if (tokenIdx === tokens.length) {
+      throw {token: tokens[tokenIdx-1], message: "unexpected end of input"};
+    }
+    const t = tokens[tokenIdx++];
+    if (text !== undefined && t.text !== text) {
+      throw {token: t, message: `expected ${JSON.stringify(text)}`};
+    }
+    return t;
+  }
+
+  // Returns true if the first token contains the given text.
+  function peek(text) {
+    if (tokenIdx === tokens.length) {
+      throw {token: tokens[tokenIdx-1], message: "unexpected end of input"};
+    }
+    return tokens[tokenIdx].text === text;
+  }
+
+  // Returns true if v1 and v2 have compatible types.
+  function sameType(v1, v2) {
+    switch (v1.type) {
+      case "null":
+        return v1.type === v2.type || sameType(v2, v1);
+      case "bool":
+        return v1.type === v2.type;
+      case "string":
+      case "handle":
+        return v1.type === v2.type || (v2.type === "null" && v2.kind === v1.type);
+      case "int":
+      case "float":
+        return v1.type === v2.type && v1.width === v2.width;
+      case "struct":
+        return v1.type === v2.type
+          && v1.fields.every((f, i) => sameType(f, v2.fields[i]));
+      case "array":
+        return v1.type === v2.type && v1.fields.length === v2.fields.length
+          // Note: Only check first element even for array/vector since
+          // validate() checks that all elements are the same.
+          && sameType(v1.fields[0], v2.fields[0]);
+      case "bits":
+      case "enum":
+        return v1.type === v2.type && sameType(v1.fields[0], v2.fields[0]);
+      case "box":
+        return v1.type === v2.type || (v2.type === "null" && v2.kind === "struct");
+      case "vector":
+        return (v1.type === v2.type
+                && (v1.fields.length === 0 || v2.fields.length === 0
+                  || sameType(v1.fields[0], v2.fields[0])))
+          || (v2.type === "null" && v2.kind === v1.type);
+      case "table":
+        const map = {};
+        for (const entry of v1.fields) {
+          map[entry.ordinal] = entry.fields[0];
+        }
+        for (const entry of v2.fields) {
+          const field1 = map[entry.ordinal];
+          const field2 = entry.fields[0];
+          if (field1 !== undefined && !sameType(field1, field2)) {
+            return false;
+          }
+        }
+      case "union":
+        return v1.type === v2.type &&
+          (v1.fields.length === 0 || v2.fields.length === 0
+            || v1.fields[0].ordinal !== v2.fields[0].ordinal
+            || sameType(v1.fields[0], v2.fields[0]));
+      default:
+        throw Error(`unexpected type: ${v1.type}`);
+    }
+  }
+
+  // Validates a parsed FIDL value.
+  function validate(value) {
+    // Check number of fields.
+    switch (value.type) {
+      // Note: We COULD make bits{} mean 0, but we don't know the width. We
+      // could infer from the last int, but that means sometimes bits{} is
+      // allowed and sometimes not, which is confusing.
+      case "bits":
+      // Zero-length arrays are disallowed by fidlc.
+      case "array":
+        if (value.fields.length === 0) {
+          throw {
+            range: value.range,
+            message: `${value.type} must have at least 1 field; got `
+            + `${value.fields.length}`,
+          };
+        }
+        break;
+      case "box":
+      case "enum":
+      case "handle":
+      case "union":
+        if (value.fields.length !== 1) {
+          throw {
+            range: value.range,
+            message: `${value.type} must have 1 field; got `
+            + `${value.fields.length}`,
+          };
+        }
+        break;
+    }
+
+    // Check underlying types.
+    switch (value.type) {
+      case "enum":
+        if (value.fields[0].type !== "int") {
+          const field = value.fields[0];
+          throw {
+            range: field.range,
+            message: `${value.type} value must be an int, not ${field.type}`,
+          };
+        }
+        break;
+      case "bits":
+        if (value.fields[0].type !== "int" || value.fields[0].signed !== "u") {
+          const field = value.fields[0];
+          throw {
+            range: field.range,
+            message: `${value.type} value must be a uint, not ${field.type}`,
+          };
+        }
+        break;
+      case "handle":
+        if (value.fields[0].type !== "int" || value.fields[0].signed !== "u"
+            || value.fields[0].width !== 32) {
+          const field = value.fields[0];
+          throw {
+            range: field.range,
+            message: `${value.type} value must be an uint32, not ${field.type}`,
+          };
+        }
+        if (value.fields[0].value == 0) {
+          const field = value.fields[0];
+          throw {
+            range: field.range,
+            message: `${value.type} value must be nonzero; use "null handle" for null`,
+          };
+        }
+        break;
+      case "box":
+        if (value.fields[0].type !== "struct") {
+          throw {
+            range: value.fields[0].range,
+            message: `${value.fields[0].type} values cannot be boxed`,
+          };
+        }
+        break;
+    }
+
+    // Check type homogeneity.
+    switch (value.type) {
+      case "vector":
+      case "array":
+      case "bits":
+        if (value.fields.length > 0) {
+          for (let i = 1; i < value.fields.length; i++) {
+            if (value.fields[0].type !== value.fields[i].type) {
+              throw {
+                range: value.fields[i].range,
+                message: `${value.type} element 0 (${value.fields[0].type}) `
+                  + `and element ${i} (${value.fields[i].type}) have different `
+                  + `types`,
+              };
+            }
+            if (!sameType(value.fields[0], value.fields[i])) {
+              throw {
+                range: value.fields[i].range,
+                message: `${value.type} element 0 (${value.fields[0].type}) `
+                  + `and element ${i} (${value.fields[i].type}) have `
+                  + `structurally different types`,
+              };
+            }
+          }
+        }
+        break;
+    }
+
+    // Check children.
+    if (value.fields !== undefined) {
+      for (const field of value.fields) {
+        validate(field);
+      }
+    }
+  }
+
+  // Consumes and parses a FIDL value.
+  function parseValue() {
+    const t = consume();
+    const range = {first: t, last: t};
+    if (/^"/.test(t.text)) {
+      let value;
+      try {
+        value = JSON.parse(t.text);
+      } catch (ex) {
+        throw {token: t, message: "invalid string literal"};
+      }
+      return {type: "string", value, range};
+    }
+    if (/^-?(?:\d|\.)/.test(t.text)) {
+      return parseNumber(t);
+    }
+    switch (t.text) {
+      case "true":
+        return {type: "bool", value: true, range};
+      case "false":
+        return {type: "bool", value: false, range};
+      case "handle":
+      case "bits":
+      case "enum":
+      case "struct":
+      case "array":
+      case "vector":
+      case "box":
+        return parseAgg(t, false);
+      case "table":
+      case "union":
+        return parseAgg(t, true);
+      case "null": {
+        const t2 = consume();
+        switch (t2.text) {
+          case "handle": case "string": case "struct": case "union": case "vector":
+            return {type: "null", kind: t2.text, range: {first: t, last: t2}};
+          default:
+            throw {token: t2, message: "expected one of: handle, string, struct, union, vector"};
+        }
+      }
+    }
+    throw {token: t, message: "invalid syntax"};
+  }
+
+  // Parses an already-consumed number token t.
+  function parseNumber(t) {
+    const range = {first: t, last: t};
+    if (/\./.test(t.text) || (!/x/.test(t.text) && /[eEf]/.test(t.text))) {
+      const match = t.text.match(/(.*)f(32|64)$/);
+      let result;
+      if (match) {
+        result = {
+          type: "float",
+          width: parseInt(match[2]),
+          orig: match[1],
+          value: parseFloat(match[1]),
+          range,
+        };
+      } else if (prevFloat) {
+        result = {...prevFloat, orig: t.text, value: parseFloat(t.text), range};
+      } else {
+        throw {token: t, message: "float missing suffix (f32 or f64)"};
+      }
+      // Check both because parseFloat can ignore trailing garbage.
+      if (isNaN(result.orig) || isNaN(result.value)) {
+        throw {token: t, message: "invalid float"};
+      }
+      return prevFloat = result;
+    }
+    const match = t.text.match(/(.*)(u|i)(8|16|32|64)$/);
+    let result;
+    if (match) {
+      result = {
+        type: "int",
+        signed: match[2],
+        width: parseInt(match[3]),
+        orig: match[1],
+        range,
+      };
+    } else if (prevInt) {
+      result = {...prevInt, orig: t.text, range};
+    } else {
+      throw {token: t, message: "int missing suffix (u8, i8, u16, i16, etc.)"};
+    }
+    try {
+      result.value = BigInt(result.orig);
+    } catch (ex) {
+      throw {token: t, message: `invalid ${result.signed}int${result.width}`};
+    }
+    if (result.signed === "u") {
+      if (result.value < 0) {
+        throw {token: t, message: `uint${result.width} cannot be negative`}
+      }
+      if (result.value >= 2n ** BigInt(result.width)) {
+        throw {token: t, message: `uint${result.width} out of range`}
+      }
+    } else {
+      const limit = 2n ** BigInt(result.width - 1);
+      if (result.value < -limit || result.value >= limit) {
+        throw {token: t, message: `int${result.width} out of range`}
+      }
+    }
+    return prevInt = result;
+  }
+
+  // Parses an aggregate structure whose keyword token (struct, table, etc.) has
+  // already been consumed. If ordinals is true, parses ordinals before each
+  // field and stores "$entry" nodes in the fields.
+  function parseAgg(keyword, ordinals) {
+    consume("{");
+    const fields = [];
+    while (!peek("}")) {
+      if (ordinals) {
+        const t = consume();
+        const ordinal = parseInt(t.text, 10);
+        // Check isNaN on both because parseInt can ignore trailing garbage.
+        if (isNaN(t.text) || isNaN(ordinal)) {
+          throw {token: t, message: "expected an integer ordinal"};
+        }
+        if (ordinal <= 0) {
+          throw {token: t, message: "ordinals must be positive"};
+        }
+        consume(":");
+        const value = parseValue();
+        fields.push({
+          // $entry is a special parse tree node that stores the ordinal. We use
+          // dollar signs for special nodes that are not printed literally. In
+          // the case of $entry, format() prints it with the colon syntax.
+          type: "$entry",
+          ordinal,
+          fields: [value],
+          range: {first: t, last: value.range.last},
+        });
+      } else {
+        fields.push(parseValue());
+      }
+      if (!peek("}")) {
+        consume(",");
+      }
+    }
+    return {
+      type: keyword.text,
+      fields,
+      range: {first: keyword, last: consume("}")},
+    };
+  }
+
+  const value = parseValue();
+  if (tokenIdx !== tokens.length) {
+    throw {
+      range: {first: tokens[tokenIdx], last: tokens[tokens.length-1]},
+      message: "extraneous input",
+    };
+  }
+  validate(value);
+  return value;
+}
+
+// =============================================================================
+// ===== FORMATTING ============================================================
+// =============================================================================
+
+// Formats a parse tree back to the input syntax. Also mutates the nodes, adding
+// outputRange properties of the form {start: {row, col}, end: {row, col}}.
+function format(tree) {
+  let result = "";
+  // Zero-based row and column of the current position in result. Col counts in
+  // bytes, so a multibyte character will advance col by > 1.
+  let row = 0, col = 0;
+  // Keep track of secondary objects in order to number them in comments.
+  let secondaryObjectNumber = 1;
+
+  function push(text) {
+    result += text;
+    col += text.length;
+  }
+  function newline() {
+    result += "\n";
+    row++;
+    col = 0;
+  }
+  function commentHeader(msg, first /* = false */) {
+    if (!first) {
+      newline();
+      newline();
+    }
+    push(`# ${msg}`);
+    newline();
+  }
+
+  // Returns true if node should be displayed in a one liner between braces.
+  function isOneLiner(node) {
+    switch (node.type) {
+      case "bool":
+      case "$pointer":
+        return true;
+      case "string":
+        return node.value.length < 50;
+      case "int":
+      case "float":
+        return node.orig.length < 50;
+      case "$entry":
+        return isOneLiner(node.fields[0]);
+      case "struct":
+        return isPointerAndOut(node);
+      default:
+        return false;
+    }
+  }
+
+  // Returns true if node is a {$pointer, $out} struct lowered from a box.
+  function isPointerAndOut(node) {
+    return node.type === "struct" && node.fields.length === 2
+      && node.fields[0].type === "$pointer"
+      && node.fields[1].type === "$out";
+  }
+
+  // Returns true if the tree has any out-of-line blocks.
+  function hasOutOfLine(node) {
+    return node.type === "$out" || (node.fields && node.fields.some(hasOutOfLine));
+  }
+
+  // Helper function that keeps track of the current indentation level.
+  function helper(node, indent, topLevelObject) {
+    const start = {row, col};
+    // The thunks in this function work the same as in formatBytes(). They might
+    // be easier to understand in that function because it is shorter.
+    const thunks = [];
+
+    switch (node.type) {
+      case "null":
+        push(`null ${node.kind}`);
+        break;
+      case "$pointer":
+        push(node.value);
+        break;
+      case "bool":
+      case "string":
+        push(JSON.stringify(node.value));
+        break;
+      case "int":
+        push(node.orig + node.signed + node.width);
+        break;
+      case "float":
+        push(node.orig + "f" + node.width);
+        break;
+      case "$entry":
+        push(node.ordinal + ": ");
+        helper(node.fields[0], indent);
+        break;
+      case "handle":
+      case "bits":
+      case "struct":
+      case "array":
+      case "vector":
+      case "enum":
+      case "envelope":
+      case "box":
+      case "table":
+      case "union": {
+        if (node.fields.length === 0) {
+          push(node.type + " {}");
+        } else if (node.fields.length === 1 && isOneLiner(node.fields[0])) {
+          push(node.type + " { ");
+          thunks.push(helper(node.fields[0], 0, /* topLevelObject = */ false));
+          push(" }");
+        } else if (isPointerAndOut(node)) {
+          // Handle this specially because we don't want to wrap the "present"
+          // in a struct. We just want to emit "present" and add the out-of-line
+          // thunk to be emitting later.
+          const pointer = node.fields[0];
+          const out = node.fields[1];
+          helper(pointer, indent, topLevelObject);
+          thunks.push(helper(out, indent, topLevelObject));
+        } else {
+          push(node.type + " {");
+          newline();
+          for (const field of node.fields) {
+            push(INDENT.repeat(indent + 1));
+            thunks.push(helper(field, indent + 1, /* topLevelObject = */ false));
+            push(",");
+            newline();
+          }
+          push(INDENT.repeat(indent) + "}");
+        }
+        break;
+      }
+      case "$out":
+        // Don't emit anything yet. Return a thunk that will emit the
+        // out-of-line object after the inline portion is done.
+        return function() {
+          commentHeader(`Secondary object ${secondaryObjectNumber}`);
+          secondaryObjectNumber++;
+          helper(node.fields[0], 0, /* topLevelObject = */ true);
+          const ranges = node.fields[0].outputRanges;
+          node.outputRanges = ranges;
+          return ranges;
+        };
+      default:
+        throw Error(`unexpected type: ${node.type}`);
+    }
+    // outputRanges is a list to allow for multiple noncontiguous regions.
+    // This is used for bytes (inline and out-of-line). For format(), there
+    // is always only 1 output range per node.
+    node.outputRanges = [{start, end: {row, col}}];
+
+    const flushOutOfLine = () => {
+      let combined = [];
+      for (thunk of thunks) {
+        const ranges = thunk();
+        if (ranges !== undefined) {
+          node.outputRanges.push(...ranges);
+          combined.push(...ranges);
+        }
+      }
+      return combined;
+    };
+    if (topLevelObject) {
+      flushOutOfLine();
+      return function() {}
+    }
+    return flushOutOfLine;
+  }
+
+  if (hasOutOfLine(tree)) {
+    commentHeader("Primary object", /* first = */ true);
+  }
+  helper(tree, 0, /* topLevelObject = */ true);
+  return result;
+}
+
+// Format the bytes tree as hex bytes.
+function formatBytes(tree) {
+  let result = "";
+  let row = 0, col = 0, byteIndex = 0;
+  const rowLengths = [];
+
+  function emitByte(byte) {
+    result += byte.toString(16).padStart(2, "0");
+    col += 2;
+    // NOTE: Keep this (8) in sync with output editor gutter renderer, which
+    // replaces line numbers with offsets 0, 8, 16, etc.
+    if (byteIndex % 8 == 7) {
+      result += "\n";
+      rowLengths.push(col);
+      col = 0;
+      row++;
+    } else {
+      result += " ";
+      col++;
+    }
+    byteIndex++;
+  }
+
+  // Get the position just before pos, to avoid including whitespace in ranges.
+  function justBefore({row, col}) {
+    if (col > 0) {
+      return {row, col: col - 1};
+    }
+    return {row: row - 1, col: rowLengths[row - 1]};
+  }
+
+  // Get the position just after pos, to avoid including whitespace in ranges.
+  function justAfter({row, col}) {
+    if (col < rowLengths[row]) {
+      return {row, col: col + 1};
+    }
+    return {row: row + 1, col: 0};
+  }
+
+  // Executes f on all padding nodes below node in DFS order.
+  function foreachInlinePadding(node, f) {
+    switch (node.type) {
+      case "bytes":
+        if (node.padding) {
+          f(node);
+        }
+        break;
+      case "inline":
+        for (const field of node.fields) {
+          foreachInlinePadding(field, f);
+        }
+        break;
+    }
+  }
+
+  function helper(node, topLevelObject) {
+    const start = {row, col};
+    switch (node.type) {
+      case "bytes":
+        node.bytes.forEach(emitByte);
+        node.outputRanges = [{start, end: justBefore({row, col})}];
+        return function() {}
+      case "inline":
+        const thunks = node.fields.map(f => helper(f, false));
+        node.outputRanges = [{start, end: justBefore({row, col})}];
+        // Remove padding regions from the node's ouput ranges, so that we never
+        // highlight padding.
+        foreachInlinePadding(node, paddingNode => {
+          const lastRange = node.outputRanges[node.outputRanges.length-1];
+          const {start: padStart, end: padEnd} = paddingNode.outputRanges[0];
+          const oldEnd = lastRange.end;
+          lastRange.end = justBefore(padStart);
+          node.outputRanges.push({start: justAfter(padEnd), end: oldEnd});
+        });
+        const flushOutOfLine = () => {
+          let combined = [];
+          for (thunk of thunks) {
+            const ranges = thunk();
+            if (ranges !== undefined) {
+              node.outputRanges.push(...ranges);
+              combined.push(...ranges);
+            }
+          }
+          return combined;
+        };
+        if (topLevelObject) {
+          flushOutOfLine();
+          return function() {}
+        }
+        return flushOutOfLine;
+      case "secondary":
+        // For secondary objects, don't encode anything yet. Instead, return a
+        // thunk to be executed after the inline portion of the last object has
+        // been fully encoded.
+        return function() {
+          helper(node.fields[0], /* topLevelObject = */ true);
+          const ranges = node.fields[0].outputRanges;
+          node.outputRanges = ranges;
+          return ranges;
+        };
+      default:
+        throw Error(`unexpected type in formatBytes: ${node.type}`);
+    }
+  }
+
+  helper(tree, /* topLevelObject = */ true);
+  return result;
+}
+
+// =============================================================================
+// ===== LOWERING ==============================================================
+// =============================================================================
+
+// Global flag to disable adding "lowered" fields. This is an ugly hack.
+let disableAddLowered = false;
+
+// Adds lowered to node's list of lowered nodes, creating the list if necessary.
+// Also adds links in the reverse direction.
+function addLowered(node, lowered) {
+  if (disableAddLowered) {
+    return;
+  }
+  if (node.lowered === undefined) {
+    node.lowered = [];
+  }
+  node.lowered.push(lowered);
+  // If there is already a loweredFrom, overwrite it. Usually this is when a
+  // lowering stage copies a whole node (including its loweredFrom) field, and
+  // then calls addLowered. Ocassionally there genuinely are multiple things it
+  // was loweredFrom, like bits/enums -- the whole structure and the value
+  // inside all lower the same output. In these cases letting the last
+  // addLowered call win works -- it will be the largest structure, the whole
+  // bits/enum, which is what we want for reverse highlighting (otherwise if the
+  // bits has multiple fields, it will only highlight one of them).
+  lowered.loweredFrom = node;
+}
+
+// Creates a note/tooltip, incorporating an old one if present.
+function addNote(oldNode, additional) {
+  return oldNode.note === undefined
+    ? additional : `${oldNode.note}\n\n${additional}`;
+}
+
+// Creates a note/tooltip, but does not replace an existing one.
+function provideNote(oldNode, newNote) {
+  return oldNode.note === undefined
+    ? newNote : oldNode.note;
+}
+
+// Helper functions for English messages.
+function plural(n) { return n === 1 ? "" : "s"; }
+function article(n) { return n == 8 ? "an" : "a"; }
+
+// Copies a tree node, omitting metadata that should not be copied.
+function copyNode(node) {
+  return {
+    ...node,
+    lowered: undefined,
+    loweredFrom: undefined,
+  };
+}
+
+// Helper combinator for lowering.
+function doLowering(tree, self, helper) {
+  function augmentedHelper(node) {
+    const result = helper(node);
+    if (result !== undefined) {
+      // Reapply self. A proper lowering should not get into infinite recursion.
+      return self(result);
+    }
+    if ("fields" in node) {
+      return {...copyNode(node), fields: node.fields.map(self)};
+    }
+    // Very important that this copies the node rather than returning the same
+    // object. Otherwise highlighting gets into infinite recursion.
+    return {...copyNode(node)};
+  }
+  const lowered = augmentedHelper(tree);
+  addLowered(tree, lowered);
+  return lowered;
+}
+
+// Lowering stage 1: tables and unions.
+function lower1(tree) {
+  return doLowering(tree, lower1, node => {
+    switch (node.type) {
+      case "table": {
+        if (node.fields.length === 0) {
+          return {
+            type: "vector",
+            fields: [],
+            note: addNote(node,
+              `Empty table lowers to an empty vector`),
+          };
+        }
+        const maxOrdinal =
+          node.fields.map(f => f.ordinal).reduce((a, b) => Math.max(a, b));
+        const ordinalToEntry = {};
+        for (const field of node.fields) {
+          ordinalToEntry[field.ordinal] = field;
+        }
+        const fields = [];
+        for (let i = 1; i <= maxOrdinal; i++) {
+          const entry = ordinalToEntry[i];
+          if (entry === undefined) {
+            const empty = {
+              type: "envelope",
+              fields: [],
+              note: `Empty envelope for omitted table field #${i}`,
+            };
+            fields.push(empty);
+          } else {
+            const present = {
+              type: "envelope",
+              fields: [entry.fields[0]],
+              note: `Envelope for table field #${i}`,
+            };
+            fields.push(present);
+            addLowered(entry, present);
+          }
+        }
+        return {
+          type: "vector",
+          fields,
+          note: addNote(node, `Table lowers to a vector of envelopes`),
+        };
+      }
+      case "null": {
+        if (node.kind !== "union") {
+          break;
+        }
+        return {
+          type: "struct",
+          fields: [
+            {
+              type: "int", signed: "u", width: 64,
+              orig: "0", value: 0,
+              note: "Zero ordinal for null union",
+            },
+            {
+              type: "envelope",
+              fields: [],
+              note: "Empty envelope for null union",
+            }
+          ],
+          note: addNote(node,
+            `Null union lowers to ordinal 0 and an empty envelope`),
+        };
+      }
+      case "union": {
+        const entry = node.fields[0];
+        const ordinal = entry.ordinal;
+        const envelope = {
+          type: "envelope",
+          fields: [entry.fields[0]],
+          note: `Envelope wrapping union variant #${ordinal}`,
+        };
+        addLowered(entry, envelope);
+        return {
+          type: "struct",
+          fields: [
+            {
+              type: "int", signed: "u", width: 64,
+              orig: ordinal.toString(), value: ordinal,
+              note: `Union ordinal specifying variant #${ordinal}`,
+            },
+            envelope,
+          ],
+          note: addNote(node,
+            `Union lowers to an ordinal (${ordinal}) and envelope`),
+        };
+      }
+    }
+  });
+}
+
+// Lowering stage 2: bits and enums. Assumes earlier lowerings are done.
+function lower2(tree) {
+  return doLowering(tree, lower2, node => {
+    switch (node.type) {
+      case "bits": {
+        const type = (node.fields[0].signed === "u" ? "uint" : "int")
+          + node.fields[0].width.toString();
+        const value = node.fields.map(f => f.value).reduce((a, b) => a | b);
+        const orig = value == 0 ? "0" : "0x" + value.toString(16);
+        let valueStr = orig;
+        if (node.fields.length > 1) {
+          valueStr = node.fields.map(f => "0x" + f.value.toString(16)).join(" | ") + ` = ${orig}`;
+        }
+        const result = {
+          ...copyNode(node.fields[0]),
+          orig,
+          value,
+          note: addNote(node, `Bits ${valueStr} : ${type}`),
+        };
+        for (const field of node.fields) {
+          addLowered(field, result);
+        }
+        return result;
+      }
+      case "enum": {
+        const type = (node.fields[0].signed === "u" ? "uint" : "int")
+          + node.fields[0].width.toString();
+        const result = {
+          ...copyNode(node.fields[0]),
+          note: addNote(node,
+            `Enum ${node.fields[0].value} : ${type}`),
+        };
+        addLowered(node.fields[0], result);
+        return result;
+      }
+    }
+  });
+}
+
+// Lowering stage 3: strings. Assumes earlier lowerings are done.
+function lower3(tree) {
+  return doLowering(tree, lower3, node => {
+    switch (node.type) {
+      case "null": {
+        if (node.kind !== "string") {
+          break;
+        }
+        return {
+          type: "null",
+          kind: "vector",
+          note: addNote(node, `Null string lowers to a null vector`),
+        };
+      }
+      case "string": {
+        const fields = [];
+        const u8 = (byte, extra) => ({
+          type: "int", signed: "u", width: 8,
+          orig: "0x" + byte.toString(16), value: byte,
+          ...extra,
+        });
+        // Iterate over Unicode characters.
+        for (const char of node.value) {
+          // Trick to convert to UTF-8: https://stackoverflow.com/a/18729536
+          const utf8 = unescape(encodeURIComponent(char));
+          if (utf8.length === 1) {
+            const byte = utf8.charCodeAt(0);
+            const note = `Character: ${ASCII_NAMES[byte] || String.fromCharCode(byte)}`;
+            fields.push(u8(byte, {note}));
+          } else {
+            for (let i = 0; i < utf8.length; i++) {
+              fields.push(u8(utf8.charCodeAt(i), {
+                note: `Character: ${char} (byte ${i+1} of ${utf8.length})`,
+              }));
+            }
+          }
+        }
+        let displayStr;
+        if (node.value.length > 100) {
+          displayStr = JSON.stringify(node.value.substring(0, 100) + "…")
+            + " (truncated)";
+        } else {
+          displayStr = JSON.stringify(node.value);
+        }
+        return {
+          type: "vector",
+          fields,
+          note: addNote(node, `String ${displayStr}`),
+        }
+      }
+    }
+  });
+}
+
+// Lowering stage 4: vectors. Assumes earlier lowerings are done.
+function lower4(tree) {
+  return doLowering(tree, lower4, node => {
+    switch (node.type) {
+      case "null": {
+        if (node.kind !== "vector") {
+          break;
+        }
+        return {
+          type: "struct",
+          fields: [
+            {
+              type: "int", signed: "u", width: 64,
+              orig: "0", value: 0,
+              note: `Vector length: 0 elements (null vector)`,
+            },
+            {
+              type: "$pointer",
+              value: "absent",
+              note: `ABSENT pointer for null vector`,
+            },
+          ],
+          note: addNote(node,
+            `Null vector lowers to length 0 and ABSENT pointer`),
+        };
+      }
+      case "vector": {
+        const len = node.fields.length;
+        const lengthNode = {
+          type: "int", signed: "u", width: 64,
+          orig: len.toString(), value: len,
+          note: `Vector length: ${len} elements`,
+        };
+        if (len === 0) {
+          return {
+            type: "struct",
+            fields: [
+              lengthNode,
+              {
+                type: "$pointer",
+                value: "present",
+                note: `Pointer to empty vector's out-of-line array; PRESENT `
+                  + `even though there is no array, to distinguish from null vectors`,
+              },
+            ],
+            note: addNote(node,
+              `Vector lowers to a length (${len}) and an out-of-line array`),
+          };
+        }
+        return {
+          type: "struct",
+          fields: [
+            lengthNode,
+            {
+              type: "box",
+              fields: [{
+                type: "array",
+                fields: node.fields,
+                note: `Vector's out-of-line array`,
+              }],
+              note: `Pointer to vector's out-of-line array`,
+            },
+          ],
+          note: addNote(node,
+            `Vector lowers to a length (${len}) and an out-of-line array`),
+        };
+      }
+    }
+  });
+}
+
+// Lowering stage 5: handles and envelopes. Assumes earlier lowerings are done.
+function lower5(tree) {
+  function countPresentHandles(node) {
+    if (node.type === "handle") {
+      return 1;
+    }
+    if (node.fields !== undefined) {
+      let sum = 0;
+      for (const f of node.fields) {
+        sum += countPresentHandles(f);
+      }
+      return sum;
+    }
+    return 0;
+  }
+
+  return doLowering(tree, lower5, node => {
+    switch (node.type) {
+      case "null": {
+        if (node.kind !== "handle") {
+          break;
+        }
+        return {
+          type: "int", signed: "u", width: 32, orig: "0", value: 0,
+          note: addNote(node, `Null handle`),
+        };
+      }
+      case "handle": {
+        const result = {
+          ...copyNode(node.fields[0]),
+          type: "int", signed: "u", width: 32, orig: "0xffffffff", value: 0xffffffff,
+          note: addNote(node, `Pointer to handle ${node.fields[0].value} (stored out-of-band in the handle vector)`),
+        };
+        addLowered(node.fields[0], result);
+        return result;
+      }
+      case "envelope": {
+        if (node.fields.length === 0) {
+          return {
+            type: "struct",
+            fields: [
+              {type: "int", signed: "u", width: 32, orig: "0", value: 0,
+               note: "Empty envelope: 0 bytes"},
+              {type: "int", signed: "u", width: 32, orig: "0", value: 0,
+               note: "Empty envelope: 0 handles"},
+              {type: "$pointer", value: "absent",
+               note: "ABSENT pointer for empty envelope"},
+            ],
+            note: node.note,
+          };
+        }
+        disableAddLowered = true;
+        const bytes = countTotalBytes(lowerBytes(lower6(lower5(node.fields[0]))));
+        disableAddLowered = false;
+        const handles = countPresentHandles(node.fields[0]);
+        return {
+          type: "struct",
+          fields: [
+            {type: "int", signed: "u", width: 32, orig: bytes.toString(), value: bytes,
+             note: `Envelope: ${bytes} byte${plural(bytes)}`},
+            {type: "int", signed: "u", width: 32, orig: handles.toString(), value: handles,
+             note: `Envelope: ${handles} handle${plural(handles)}`},
+            {type: "box", fields: node.fields,
+             note: "Pointer to the envelope's out-of-line data"},
+          ],
+          note: node.note,
+        };
+      }
+    }
+  });
+}
+
+// Lowering stage 6: boxes. Assumes earlier lowerings are done.
+function lower6(tree) {
+  return doLowering(tree, lower6, node => {
+    switch (node.type) {
+      case "null": {
+        if (node.kind !== "struct") {
+          break;
+        }
+        return {
+          type: "$pointer",
+          value: "absent",
+          note: addNote(node, `ABSENT pointer for null struct`),
+        };
+      }
+      case "array": {
+        return {
+          ...copyNode(node),
+          type: "struct",
+          note: addNote(node, `Array lowers to a struct where all fields have `
+            + `the same type`),
+        };
+      }
+      case "box": {
+        return {
+          type: "struct",
+          fields: [
+            {
+              type: "$pointer",
+              value: "present",
+              note: provideNote(node, `Pointer to out-of-line struct`),
+            },
+            {
+              type: "$out",
+              fields: node.fields,
+            }
+          ],
+        };
+      }
+    }
+  });
+}
+
+// Final lowering stage, to bytes. Assumes all earlier lowerings are done.
+function lowerBytes(tree) {
+  // object can be "primary", "secondary", or false.
+  function lower(tree, object) {
+    const lowered = helper(tree, object);
+    addLowered(tree, lowered);
+    return lowered;
+  }
+
+  function helper(node, object) {
+    if (object && node.type !== "struct") {
+      // Instead of handling the 8-byte padding in every branch, we just handle
+      // it in the struct case, and wrap other things in structs.
+      node = {type: "struct", fields: [node]};
+    }
+    switch (node.type) {
+      case "int": {
+        const signed = node.signed === "i";
+        const type = signed ? `int${node.width}` : `uint${node.width}`;
+        const arrayType = signed
+        ? {8: Int8Array, 16: Int16Array, 32: Int32Array, 64: BigInt64Array}[node.width]
+        : {8: Uint8Array, 16: Uint16Array, 32: Uint32Array, 64: BigUint64Array}[node.width];
+        const value = node.width === 64 ? BigInt(node.value) : Number(node.value);
+        const size = node.width / 8;
+        return {
+          type: "bytes",
+          bytes: new Uint8Array(arrayType.of(value).buffer),
+          size,
+          align: size,
+          note: provideNote(node, `${node.value} : ${type}`),
+        };
+      }
+      case "float": {
+        const type = `float${node.width}`;
+        const single = node.width === 32;
+        const arrayType = single ? Float32Array : Float64Array;
+        const size = node.width / 8;
+        return {
+          type: "bytes",
+          bytes: new Uint8Array(arrayType.of(node.value).buffer),
+          size,
+          align: size,
+          note: provideNote(node, `${node.value} : ${type}`),
+        };
+      }
+      case "bool": {
+        const value = node.value ? 1 : 0;
+        return {
+          type: "bytes",
+          bytes: Uint8Array.of(value),
+          size: 1,
+          align: 1,
+          note: provideNote(node, `${node.value} : bool`),
+        };
+      }
+      case "$pointer": {
+        let bytes;
+        switch (node.value) {
+          case "absent":
+            bytes = Uint8Array.of(0, 0, 0, 0, 0, 0, 0, 0);
+            break;
+          case "present":
+            bytes = Uint8Array.of(0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff);
+            break;
+          default:
+            throw new Error(`invalid $pointer value: ${node.value}`);
+        }
+        return {
+          type: "bytes",
+          bytes,
+          size: 8,
+          align: 8,
+          note: node.note,
+        };
+      }
+      case "$out": {
+        return {
+          type: "secondary",
+          fields: [lower(node.fields[0], "secondary")],
+        };
+      }
+      case "struct": {
+        const fields = [];
+        let size = 0, align = 0;
+
+        // Helper to add padding.
+        function padToAlign(desiredAlign, message) {
+          align = Math.max(align, desiredAlign);
+          if (size % desiredAlign === 0) {
+            return;
+          }
+          const pad = desiredAlign - size % desiredAlign;
+          fields.push({
+            type: "bytes",
+            bytes: new Uint8Array(pad),
+            size: pad,
+            align: 1,
+            padding: true,
+            note: message(pad),
+          });
+          size += pad;
+        }
+
+        if (node.fields.length === 0) {
+          size = 1;
+          align = 1;
+          fields.push({
+            type: "bytes",
+            bytes: Uint8Array.of(0),
+            size,
+            align,
+            note: `An empty struct encodes to the byte 0x00.`,
+          });
+        }
+        for (const originalField of node.fields) {
+          const f = lower(originalField, false);
+          if (f.type === "secondary") {
+            fields.push(f);
+          } else {
+            padToAlign(f.align, pad => `${pad} byte${plural(pad)} padding `
+              + `to align next field to ${article(f.align)} ${f.align}-byte boundary`);
+            // Note: We used to flatten nested inline fields here, but not
+            // anymore. Instead, functions like formatBytes() and
+            // countTotalBytes() were rewritten to allow for nested inlines.
+            fields.push(f);
+            size += f.size;
+          }
+        }
+        padToAlign(align, pad => `${pad} byte${plural(pad)} tail padding for `
+          + `struct's ${pad}-byte alignment`);
+        if (object) {
+          padToAlign(8, pad => `${pad} byte${plural(pad)} tail padding for `
+            + `${object} object ${align}-byte alignment`);
+        }
+        return {
+          type: "inline",
+          size,
+          align,
+          fields,
+        }
+      }
+    }
+    throw Error(`Unexpected type in lowerBytes: ${node.type}`);
+  }
+
+  return lower(tree, "primary");
+}
+
+// Calculates the total number of bytes that tree (returned by lowerBytes) will
+// serialize to. This is distinct from tree.size, which is only the inline size
+// (i.e. the size of the primary object).
+function countTotalBytes(tree) {
+  let size = 0;
+  function visit(node, topLevelObject) {
+    switch (node.type) {
+      case "bytes":
+        // Do nothing: size is already rolled up into parent "inline" node.
+        break;
+      case "inline":
+        if (topLevelObject) {
+          size += node.size;
+        }
+        for (const field of node.fields) {
+          visit(field, /* topLevelObject = */ false);
+        }
+        break;
+      case "secondary":
+        visit(node.fields[0], /* topLevelObject = */ true);
+        break;
+      default:
+        throw Error(`Unexpected type in countTotalBytes: ${node.type}`);
+    }
+  }
+
+  visit(tree, /* topLevelObject = */ true);
+  return size;
+}
+
+// Applies lowering functions from...to inclusive.
+// 7 means lowerBytes.
+function lowerFromTo(tree, from, to) {
+  const lowerings = [
+    lower1, lower2, lower3, lower4, lower5, lower6, lowerBytes
+  ];
+  for (let i = from - 1; i < to; i++) {
+    tree = lowerings[i](tree);
+  }
+  return tree;
+}
+
+// =============================================================================
+// ===== ACE CUSTOMIZATION =====================================================
+// =============================================================================
+
+// Custom highlighting for Ace editor.
+ace.define("ace/mode/fidlviz",
+    ["require", "exports", "ace/lib/oop", "ace/mode/text", "ace/mode/fidlviz_highlight_rules",
+    "ace/mode/behaviour/cstyle", "ace/mode/folding/cstyle", "ace/mode/matching_brace_outdent"],
+    (require, exports) => {
+  const oop = require("ace/lib/oop");
+  const TextMode = require("ace/mode/text").Mode;
+  const FidlvizHighlightRules = require("ace/mode/fidlviz_highlight_rules").FidlvizHighlightRules;
+  const MatchingBraceOutdent = require("ace/mode/matching_brace_outdent").MatchingBraceOutdent;
+  const CstyleBehaviour = require("ace/mode/behaviour/cstyle").CstyleBehaviour;
+  const CstyleFoldMode = require("ace/mode/folding/cstyle").FoldMode;
+  const FidlvizMode = function FidlvizMode() {
+    this.$id = "ace/mode/fidlviz";
+    this.HighlightRules = FidlvizHighlightRules;
+    this.$outdent = new MatchingBraceOutdent();
+    this.$behaviour = new CstyleBehaviour();
+    this.foldingRules = new CstyleFoldMode();
+    this.lineCommentStart = "#";
+    // Adapted from:
+    // https://fuchsia.googlesource.com/fidlbolt/+/refs/heads/master/frontend/src/ace-modes.js#102
+    this.getNextLineIndent = (state, line, tab) => {
+      let indent = line.match(/^\s*/)[0];
+      const tokens = this.getTokenizer().getLineTokens(line, state).tokens;
+      if (tokens.length && tokens[tokens.length - 1].type === "comment") {
+        return indent;
+      }
+      if (state === "start") {
+        const match = line.match(/^.*\{\s*$/);
+        if (match) {
+          indent += tab;
+        }
+      }
+      return indent;
+    }
+    this.checkOutdent = (state, line, input) => {
+      return this.$outdent.checkOutdent(line, input);
+    }
+    this.autoOutdent = (state, doc, row) => {
+      this.$outdent.autoOutdent(doc, row);
+    }
+  };
+  oop.inherits(FidlvizMode, TextMode);
+  exports.Mode = FidlvizMode;
+});
+ace.define("ace/mode/fidlviz_highlight_rules",
+    ["require", "exports", "ace/lib/oop", "ace/mode/text_highlight_rules"],
+    (require, exports) => {
+  const oop = require("ace/lib/oop");
+  const TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
+  const FidlvizHighlightRules = function FidlvizHighlightRules() {
+    this.$rules = {
+      start: [
+        {
+          token: "comment",
+          regex: "#.*$",
+        },
+      ],
+    };
+  };
+  oop.inherits(FidlvizHighlightRules, TextHighlightRules);
+  exports.FidlvizHighlightRules = FidlvizHighlightRules;
+});
+
+// Custom theme for Ace editor.
+ace.define("ace/theme/fidlviz_light", ["require", "exports", "ace/lib/dom"], (require, exports) => {
+  exports.isDark = false;
+  exports.cssClass = "ace-fl";
+  exports.cssText = `
+.ace-fl {
+  background: #fff;
+  color: #111;
+}
+.ace-fl .ace_gutter {
+  background: #eee;
+  color: #666;
+}
+.ace-fl .ace_comment {
+  color: #777;
+}
+.ace-fl .ace_selection {
+  background: #d0d0d0;
+}
+.ace-fl .ace_gutter-active-line {
+  background: #e0e0e0;
+}
+.ace-fl .ace_active-line {
+  background: rgba(0, 0, 0, 0.07);
+}
+  `;
+  exports.$id = "ace/theme/fidlviz_light";
+  const dom = require("ace/lib/dom");
+  dom.importCssString(exports.cssText, exports.cssClass);
+});
+ace.define("ace/theme/fidlviz_dark", ["require", "exports", "ace/lib/dom"], (require, exports) => {
+  exports.isDark = false;
+  exports.cssClass = "ace-fd";
+  exports.cssText = `
+.ace-fd {
+  background: #303030;
+  color: #eee;
+}
+.ace-fd .ace_gutter {
+  background: #404040;
+  color: #aaa;
+}
+.ace-fd .ace_comment {
+  color: #b0b0b0;
+}
+.ace-fd .ace_selection {
+  background: #777;
+}
+.ace-fd .ace_gutter-active-line {
+  background: #505050;
+}
+.ace-fd .ace_active-line {
+  background: rgba(255, 255, 255, 0.07);
+}
+  `;
+  exports.$id = "ace/theme/fidlviz_dark";
+  const dom = require("ace/lib/dom");
+  dom.importCssString(exports.cssText, exports.cssClass);
+});
+
+// =============================================================================
+// ===== DEFAULT INPUT =========================================================
+// =============================================================================
+
+// Input shown when the user has nothing saved (or after clicking Reset).
+const DEFAULT_INPUT = `\
+struct {
+  # Integers
+  0u8, -1i8, 2u16, 3u32, 4u64,
+
+  # Other bases
+  0b1010u8, 0xffu8, 0o755u16,
+
+  # Floats
+  1.2f32, 1e-8f64,
+
+  # Booleans
+  true, false,
+
+  # Strings
+  "Hello 🌎\\u0021",
+  null string, "",
+
+  # Handles
+  null handle, handle { 0xBEEFu32 },
+
+  # Arrays and vectors
+  array { 12u8, 223, 0xff }, # all u8
+  vector { 1.0f64, 2., .3 }, # all f64
+  null vector, vector {},
+
+  # Bits and enums
+  bits { 1, 2, 4 }, enum { 42 },
+
+  # Structs
+  struct {}, struct { 1u64 },
+  null struct, box { struct { 42 } },
+
+  # Tables
+  table {}, table { 1: true, 3: false },
+
+  # Unions
+  null union, union { 7: "hi" },
+}
+`;
+
+// =============================================================================
+// ===== MAIN UI CODE ==========================================================
+// =============================================================================
+
+// Main function called after the window loads.
+function main() {
+  // ---------------------------------------------------------------------------
+  // ----- ACE CONFIG ----------------------------------------------------------
+  // ---------------------------------------------------------------------------
+
+  const inputConfig = {
+    mode: "ace/mode/fidlviz",
+    theme: getTheme(window.matchMedia
+      && window.matchMedia("(prefers-color-scheme: dark)").matches),
+    fontSize: 14,
+    readOnly: false,
+    tabSize: 2,
+    useSoftTabs: true,
+    indentedSoftWrap: false,
+    scrollPastEnd: 1,
+    showGutter: true,
+    showLineNumbers: true,
+    showPrintMargin: false,
+  };
+  const outputConfig = {
+    ...inputConfig,
+    readOnly: true,
+    highlightActiveLine: false,
+  };
+
+  // ---------------------------------------------------------------------------
+  // ----- DOM ELEMENTS --------------------------------------------------------
+  // ---------------------------------------------------------------------------
+
+  const $inputEditor = ace.edit("InputEditor", inputConfig);
+  const $outputEditor = ace.edit("OutputEditor", outputConfig);
+  const $outputSlider = document.getElementById("OutputSlider");
+  const $outputTitle = document.getElementById("OutputTitle");
+  const $outputTooltip = document.getElementById("OutputTooltip");
+  const $resetButton = document.getElementById("ResetButton");
+  const $debugButton = document.getElementById("DebugButton");
+  const $layoutButton = document.getElementById("LayoutButton");
+  const $helpButton = document.getElementById("HelpButton");
+  const $helpModal = document.getElementById("HelpModal");
+  const $helpModalContent = document.getElementById("HelpModalContent");
+  const $container = document.getElementById("Container");
+  const $inputPart = document.getElementById("InputPart");
+  const $splitContainer = document.getElementById("SplitContainer");
+  const $splitter = document.getElementById("Splitter");
+
+  for (editor of [$inputEditor, $outputEditor]) {
+    // We use Ctrl-[ and Ctrl-] to move the slider.
+    editor.commands.removeCommand('blockindent');
+    editor.commands.removeCommand('blockoutdent');
+  }
+
+  // ---------------------------------------------------------------------------
+  // ----- DARK MODE -----------------------------------------------------------
+  // ---------------------------------------------------------------------------
+
+  // Gets the Ace theme depending on whether dark mode is enabled.
+  function getTheme(darkMode) {
+    return darkMode ? "ace/theme/fidlviz_dark" : "ace/theme/fidlviz_light";
+  }
+  if (window.matchMedia) {
+    window.matchMedia("(prefers-color-scheme: dark)").addListener(e => {
+      const theme = getTheme(e.matches);
+      $inputEditor.setTheme(theme);
+      $outputEditor.setTheme(theme);
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // ----- UI HELPERS ----------------------------------------------------------
+  // ---------------------------------------------------------------------------
+
+  // Vertical (left & right) or Horizontal (top & bottom).
+  let editorSplitOrientation;
+
+  function setEditorSplitOrientation(orientation) {
+    function toggle(o) {
+      return o === "vertical" ? "horizontal" : "vertical";
+    }
+    if (orientation === "toggle") {
+      orientation = toggle(editorSplitOrientation);
+    }
+    editorSplitOrientation = orientation;
+    const other = toggle(orientation);
+    $splitter.classList.remove(`split-splitter--${other}`);
+    $splitter.classList.add(`split-splitter--${orientation}`);
+    $splitContainer.classList.remove(`split-container--${other}`);
+    $splitContainer.classList.add(`split-container--${orientation}`);
+    resizeEditors(editorSplitPosition);
+    window.localStorage.editorSplitOrientation = orientation;
+  }
+
+  // Keep in sync with the output slider in index.html.
+  const LAST_DEBUG_OUTPUT_MODE = "3";
+  const LAST_OUTPUT_MODE = "8";
+
+  // In Debug mode, the output shows tokens or parse trees.
+  let debugEnabled;
+  let outputModeWhenDebugIs;
+  function setDebugEnabled(enabled, restoring) {
+    debugEnabled = !!enabled;
+    if (debugEnabled) {
+      $debugButton.classList.add("button--active");
+      $outputSlider.max = LAST_DEBUG_OUTPUT_MODE;
+    } else {
+      $debugButton.classList.remove("button--active");
+      $outputSlider.max = LAST_OUTPUT_MODE;
+    }
+    // Skip this at very beginning when called from restore().
+    if (restoring === undefined) {
+      setOuputMode(outputModeWhenDebugIs[debugEnabled]);
+    }
+    window.localStorage.debugEnabled = debugEnabled;
+  }
+
+  // Show byte offsets instead of line numbers when viewing bytes.
+  let currentOutputMode = undefined;
+  $outputEditor.session.gutterRenderer =  {
+    getWidth: function(_session, lastLineNumber, config) {
+      // Note: lastLineNumber is a value returned by getText(), so it has
+      // already been multiplied by 8 if necessary.
+      return lastLineNumber.toString().length * config.characterWidth;
+    },
+    getText: function(_session, row) {
+      if (currentOutputMode === LAST_OUTPUT_MODE && !state.error) {
+        return row * 8;
+      }
+      return (row + 1).toString();
+    }
+  };
+
+  // Updates output slider and title, but not the editors.
+  function setOuputMode(mode) {
+    $outputSlider.value = mode;
+    $outputTitle.innerHTML = getTitle(mode);
+    outputModeWhenDebugIs[debugEnabled] = mode;
+    window.localStorage.outputModeWhenDebugIs = JSON.stringify(outputModeWhenDebugIs);
+    // Do a full update whenever the line number format needs to change.
+    if ((currentOutputMode === LAST_OUTPUT_MODE) !== (mode === LAST_OUTPUT_MODE)) {
+      $outputEditor.renderer.updateFull();
+    }
+    currentOutputMode = mode;
+  }
+
+  // Number from 0 to 1 (0.5 means split halfway).
+  let editorSplitPosition;
+
+  // Applies styling to resize the editors to a split defined by the position
+  // from 0 to 1 (0.5 means each editor takes up half the space).
+  function resizeEditors(position) {
+    // 4px is half the splitter thickness, 8px.
+    $inputPart.style.flexBasis = `calc(${position * 100}% - 4px)`;
+    if (editorSplitOrientation === "vertical") {
+      $inputPart.style.maxWidth = `calc(100% - 8px)`;
+      $inputPart.style.maxHeight = "none";
+    } else {
+      $inputPart.style.maxHeight = `calc(100% - 8px)`;
+      $inputPart.style.maxWidth = "none";
+    }
+    editorSplitPosition = position;
+    window.localStorage.editorPosition = JSON.stringify(position);
+    // Let Ace editors know their parent has resized.
+    $inputEditor.resize();
+    $outputEditor.resize();
+  }
+
+  // Converts a mode (slider value) to a title.
+  function getTitle(mode) {
+    if (debugEnabled) {
+      switch (mode) {
+        case "1":
+          return "Tokens";
+        case "2":
+          return "Annotated Tokens";
+        case "3":
+          return "Parse tree";
+      }
+    }
+    switch (mode) {
+      case "1":
+        return "Format";
+      case "2":
+        return "[1] Lower tables & unions";
+      case "3":
+        return "[2] Lower bits & enums";
+      case "4":
+        return "[3] Lower strings";
+      case "5":
+        return "[4] Lower vectors";
+      case "6":
+        return "[5] Lower handles & envelopes";
+      case "7":
+        return "[6] Lower arrays & boxes";
+      case "8":
+        return "Bytes";
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // ----- UTILITIES --------------------------------------------------------------
+  // ---------------------------------------------------------------------------
+
+  // Converts an object to a pretty-printed JSON string.
+  function stringify(obj) {
+    return JSON.stringify(
+      obj,
+      (_key, value) => typeof value === "bigint" ? value.toString() : value,
+      INDENT
+    );
+  };
+
+  // Wraps text to the given maximum width, preserving existing newlines.
+  // https://fuchsia.googlesource.com/fidlbolt/+/refs/heads/master/frontend/src/util.ts#16
+  function wordWrap(text, width) {
+    function wrap(line) {
+      const words = line.split(' ');
+      let lineLength = 0;
+      const withNewlines = words.map(w => {
+        lineLength += w.length + 1;
+        if (lineLength > width) {
+          lineLength = w.length;
+          return '\n' + w;
+        }
+        return w;
+      });
+      return withNewlines.join(' ');
+    }
+    const lines = text.split('\n');
+    return lines.map(wrap).join('\n');
+  }
+
+  // Returns true if r1 and r2 represent the same output editor range.
+  function outputRangesEqual(r1, r2) {
+    return r1.start.row === r2.start.row
+      && r1.start.col === r2.start.col
+      && r1.end.row === r2.end.row
+      && r1.end.col === r2.end.col;
+  }
+
+  // ---------------------------------------------------------------------------
+  // ----- MAIN UI UPDATES -----------------------------------------------------
+  // ---------------------------------------------------------------------------
+
+  // State retained between updates.
+  let state = {
+    // True if there is an error (which we are displaying in the output).
+    error: false,
+    // Keep track of markers in order to remove them later.
+    errorMarker: undefined,
+    inputMarkers: [],
+    outputMarkers: [],
+    underlineMarkers: {"has-tooltip": [], "has-tooltip-active": []},
+    // Parse tree and final output tree.
+    tree: undefined,
+    outputTree: undefined,
+    // Highlighting and tooltip state.
+    highlightState: {lastBestNode: undefined, lastOnFirst: undefined},
+    tooltipState: {lastBestNode: undefined, lastDocPos: undefined},
+  };
+
+  // Flag to avoid trigerring cursor events when writing output.
+  let updateOutputInProgress = false;
+
+  // Updates the output given input text.
+  function update() {
+    const outputMode = $outputSlider.value;
+    const previouslyHadError = state.error;
+
+    function getOutput(input) {
+      $inputEditor.session.clearAnnotations();
+      state.error = false;
+      if (state.errorMarker !== undefined) {
+        $inputEditor.session.removeMarker(state.errorMarker);
+        state.errorMarker = undefined;
+      }
+      clearHighlights();
+      clearTooltip();
+      clearUnderlines();
+      state.tree = undefined;
+      state.outputTree = undefined;
+      try {
+        const tokens = tokenize(input);
+        const tree = parse(tokens);
+        state.tree = tree;
+        if (debugEnabled) {
+          switch (outputMode) {
+            case "1":
+              return stringify(tokens.map(t => t.text));
+            case "2":
+              return stringify(tokens);
+            case "3":
+              return stringify(tree);
+          }
+        }
+        const outputTree = lowerFromTo(state.tree, 1, outputMode - 1);
+        state.outputTree = outputTree;
+        return outputMode === LAST_OUTPUT_MODE ? formatBytes(outputTree) : format(outputTree);
+      } catch (ex) {
+        state.error = true;
+        let start, end, message;
+        if (ex.message !== undefined) {
+          if (ex.token !== undefined) {
+            start = ex.token.start;
+            end = ex.token.end;
+            message = `${JSON.stringify(ex.token.text)}: ${ex.message}`;
+          } else if (ex.range !== undefined) {
+            start = ex.range.first.start;
+            end = ex.range.last.end;
+            message = ex.message;
+          } else {
+            message = ex.message;
+          }
+        } else {
+          message = ex;
+        }
+
+        if (start && end) {
+          state.errorMarker = $inputEditor.session.addMarker(
+            new ace.Range(start.row, start.col, end.row, end.col),
+            "input-error",
+            "text",
+          );
+          $inputEditor.session.setAnnotations([{
+            row: start.row,
+            column: start.col,
+            type: "error",
+            text: wordWrap(message, 66),
+          }]);
+          return `ERROR at ${start.row+1}:${start.col+1}: ${message}`;
+        }
+        return `ERROR: ${message}`;
+      }
+    }
+
+    const input = $inputEditor.getValue();
+    const output = getOutput(input);
+    updateOutputInProgress = true;
+    $outputEditor.session.setValue(output);
+    updateOutputInProgress = false;
+    // We need to rehighlight now that the output is changed. Even though the
+    // user might have had output-cursor-driven highlighting, we can't maintain
+    // that because the output could be completely different now. So highlight
+    // from the input cursor position.
+    highlight("input");
+    // The underlines are useless for bytes -- every byte would get underlined.
+    // Instead, we only underline for the active (hovered) node.
+    if (outputMode !== LAST_OUTPUT_MODE) {
+      underlineTooltipRegions(
+        state.outputTree, /* skipWhitespace = */ true, "has-tooltip");
+    }
+    // If we go between error/non-error in the byte output mode, update the
+    // renderer since the line numbers have changed (non-error bytes mode uses
+    // line numbers 0, 8, 16, etc.).
+    if (outputMode === LAST_OUTPUT_MODE && (state.error !== previouslyHadError)) {
+      $outputEditor.renderer.updateFull();
+    }
+    // Enable output editor wrapping only when showing errors, to ensure they
+    // are always fully visible.
+    $outputEditor.session.setUseWrapMode(state.error);
+  }
+
+  // Clears all input and output highlights.
+  function clearHighlights() {
+    for (const marker of state.inputMarkers) {
+      $inputEditor.session.removeMarker(marker);
+    }
+    for (const marker of state.outputMarkers) {
+      $outputEditor.session.removeMarker(marker);
+    }
+    state.inputMarkers = [];
+    state.outputMarkers = [];
+  }
+
+  // Highlights input and output editors. Also underlines output regions that
+  // have tooltips.
+  function highlight(cursorFrom /* : "input" | "output" */) {
+    if (state.tree === undefined) {
+      return;
+    }
+
+    function le(p1, p2) {
+      return p1.row < p2.row || (p1.row === p2.row && p1.col <= p2.col);
+    }
+
+    let bestNode;
+    let inputPos;
+    if (cursorFrom === "input") {
+      const cursor = $inputEditor.getCursorPosition();
+      const pos = {row: cursor.row, col: cursor.column};
+      inputPos = pos;
+
+      let bestStart = {row: -Infinity, col: -Infinity};
+      function visit(node) {
+        const start = node.range.first.start;
+        const end = node.range.last.end;
+        if (le(start, pos) && le(pos, end) && le(bestStart, start)) {
+          bestNode = node;
+          bestStart = start;
+        }
+        if (node.fields !== undefined) {
+          for (const field of node.fields) {
+            visit(field);
+          }
+        }
+      }
+      visit(state.tree);
+    } else if (cursorFrom === "output") {
+      if (state.outputTree === undefined) {
+        return;
+      }
+      const cursor = $outputEditor.getCursorPosition();
+      const pos = {row: cursor.row, col: cursor.column};
+      let node = findClosestOutputNode(pos, /* hasInputSource = */true);
+      if (!node) {
+        return;
+      }
+      // Walk back to find the input node.
+      while (node.loweredFrom !== undefined) {
+        node = node.loweredFrom;
+      }
+      if (node.range === undefined) {
+        throw Error("loweredFrom chain did not lead to input node with range");
+      }
+      bestNode = node;
+    } else {
+      throw Error(`unexpected cursorFrom: ${cursorFrom}`);
+    }
+
+    if (bestNode === undefined) {
+      state.highlightState.lastBestNode = undefined;
+      state.highlightState.lastOnFirst = undefined;
+      clearHighlights();
+      return;
+    }
+    const onFirst = inputPos === undefined ||
+      le(bestNode.range.first.start, inputPos) && le(inputPos, bestNode.range.first.end);
+    if (bestNode === state.highlightState.lastBestNode && onFirst === state.highlightState.lastOnFirst) {
+      return;
+    }
+    state.highlightState.lastBestNode = bestNode;
+    state.highlightState.lastOnFirst = onFirst;
+
+    clearHighlights();
+    const nodes =
+      onFirst || bestNode.fields === undefined || bestNode.fields.length === 0
+      ? [bestNode] : bestNode.fields;
+    // List of lists of output ranges. Element i corresponds to nodes[i].
+    const outputRangesForNode = [];
+    // Keep track of whether all nodes map to the same output range. If so,
+    // we'll give them the same color to avoid confusion. This is the case when
+    // highlighting all bits members after they've been lowered to 1 integer.
+    let outputsCoincide = true;
+
+    // Populate outputRangesForNode and calculate outputsCoincide.
+    for (const node of nodes) {
+      // outputRanges: [{start, end}] positions.
+      // Position: {row, col} zero-based.
+      let outputRanges = [];
+      function explore(node) {
+        if (node.lowered) {
+          for (const lowered of node.lowered) {
+            explore(lowered);
+          }
+        } else if (node.outputRanges !== undefined) {
+          outputRanges.push(...node.outputRanges);
+        }
+      }
+      explore(node);
+      outputRangesForNode.push(outputRanges);
+      if (outputsCoincide
+        && (outputRanges.length !== 1 || !outputRangesEqual(outputRanges[0], outputRangesForNode[0][0]))) {
+        outputsCoincide = false;
+      }
+    }
+
+    // Add highlight markers.
+    for (let i = 0; i < nodes.length; i++) {
+      // Range: {first, last} tokens.
+      // Token: {start, end} positions.
+      // Position: {row, col} zero-based.
+      const range = nodes[i].range;
+      // NOTE: Keep 9 in sync with the number of highlight classes in style.css.
+      const highlightClass = outputsCoincide ? "highlight-1" : `highlight-${i%9+1}`;
+      state.inputMarkers.push($inputEditor.session.addMarker(
+        new ace.Range(
+          range.first.start.row,
+          range.first.start.col,
+          range.last.end.row,
+          range.last.end.col,
+        ),
+        highlightClass,
+        "text",
+        false, // behind the text, not in front
+      ));
+
+      for (const {start, end} of outputRangesForNode[i]) {
+        state.outputMarkers.push($outputEditor.session.addMarker(
+          new ace.Range(
+            start.row,
+            start.col,
+            end.row,
+            end.col,
+          ),
+          highlightClass,
+          "text",
+          false, // behind the text, not in front
+        ));
+      }
+    }
+  }
+
+  // Clears underline markers in the output.
+  function clearUnderlines(cssClass) {
+    if (cssClass === undefined) {
+      clearUnderlines("has-tooltip");
+      clearUnderlines("has-tooltip-active");
+      return;
+    }
+    for (const marker of state.underlineMarkers[cssClass]) {
+      $outputEditor.session.removeMarker(marker);
+    }
+    state.underlineMarkers[cssClass] = [];
+  }
+
+  // Underlines regions of the output that have tooltips.
+  function underlineTooltipRegions(startingOutputNode, skipWhitespace, cssClass) {
+    clearUnderlines(cssClass);
+    if (state.outputTree === undefined) {
+      return;
+    }
+    // Comparison operators for {row, col} ranges (col exclusive).
+    function le(p1, p2) {
+      return p1.row < p2.row || (p1.row === p2.row && p1.col <= p2.col);
+    }
+    function lt(p1, p2) {
+      return !(p1.row === p2.row && p1.col === p2.col) && le(p1, p2);
+    }
+
+    // Subtract a list of [{start, end}] from range: {start, end}.
+    function subtract(range, others, p) {
+      let result = [{...range}];
+      for (const other of others) {
+        const newResult = [];
+        for (const r of result) {
+          if (lt(other.start, r.end) && lt(r.start, other.end)) {
+            if (le(other.start, r.start) && lt(other.end, r.end)) {
+              newResult.push({start: other.end, end: r.end});
+            } else if (lt(r.start, other.start) && lt(other.end, r.end)) {
+              newResult.push({start: r.start, end: other.start});
+              newResult.push({start: other.end, end: r.end});
+            } else if (lt(r.start, other.start) && le(r.end, other.end)) {
+              newResult.push({start: r.start, end: other.start});
+            } else {
+            }
+          } else {
+            newResult.push(r);
+          }
+        }
+        result = newResult;
+      }
+      return result;
+    }
+
+    // Returns a list of ranges that have notes/tooltips (if wantNote is true)
+    // or that do *not* (if wantNote is false).
+    function getTooltipRanges(node, wantNote) {
+      const children = node.fields === undefined ? [] : node.fields;
+      const haveNote = node.note !== undefined;
+      if (wantNote === haveNote) {
+        const opposite = getTooltipRanges(node, !wantNote);
+        return node.outputRanges.flatMap(r => subtract(r, opposite));
+      }
+      return children.flatMap(n => getTooltipRanges(n, wantNote));
+    }
+
+    // Get whitespace (or other tokens we don't want to underline).
+    const whitespaceRanges = [];
+    if (skipWhitespace) {
+      let row = 0, col = 0;
+      let whitespaceStart = undefined;
+      let inWhitespace = false;
+      for (const ch of $outputEditor.getValue()) {
+        if (!inWhitespace && (ch.trim() === "" || ch === "," || ch === "{" || ch === "}")) {
+          inWhitespace = true;
+          whitespaceStart = {row, col};
+        } else if (inWhitespace && !(ch.trim() === "" || ch === "," || ch === "{" || ch === "}")) {
+          whitespaceRanges.push({start: whitespaceStart, end: {row, col}});
+          inWhitespace = false;
+          whitespaceStart = undefined;
+        }
+        col++;
+        if (ch === "\n") {
+          row++;
+          col = 0;
+        }
+      }
+      if (whitespaceStart !== undefined) {
+        whitespaceRanges.push({start: whitespaceStart, end: {row, col}});
+      }
+    }
+
+    for (const fullRange of getTooltipRanges(startingOutputNode, true)) {
+      for (const range of
+            skipWhitespace ? subtract(fullRange, whitespaceRanges) : [fullRange]) {
+        state.underlineMarkers[cssClass].push($outputEditor.session.addMarker(
+          new ace.Range(
+            range.start.row,
+            range.start.col,
+            range.end.row,
+            range.end.col,
+          ),
+          cssClass,
+          "text",
+          true, // in front of the text, not behind
+        ));
+      }
+    }
+  }
+
+  // Clears the tooltip in the output editor.
+  function clearTooltip() {
+    $outputTooltip.hidden = true;
+    $outputTooltip.innerHTML = "";
+    state.tooltipState.lastBestNode = undefined;
+    // Remove the active underline since it's no longer active.
+    clearUnderlines("has-tooltip-active");
+  }
+
+  // Finds the output node closest to pos.
+  function findClosestOutputNode(pos, hasInputSource) {
+    function le(p1, p2) {
+      return p1.row < p2.row || (p1.row === p2.row && p1.col <= p2.col);
+    }
+
+    // Returns true if node can be traced back to an input node, with a range
+    // specifying the input's location in the input editor.
+    function searchForInput(node) {
+      while (node !== undefined) {
+        if (node.range !== undefined) {
+          return true;
+        }
+        node = node.loweredFrom;
+      }
+      return false;
+    }
+
+    let bestNode;
+    let bestStart = {row: -Infinity, col: -Infinity};
+    function visit(node) {
+      for (const {start, end} of node.outputRanges) {
+        if (le(start, pos) && le(pos, end) && le(bestStart, start)
+            && (!hasInputSource || searchForInput(node))) {
+          bestNode = node;
+          bestStart = start;
+        }
+      }
+      if (node.fields !== undefined) {
+        for (const field of node.fields) {
+          visit(field);
+        }
+      }
+    }
+
+    visit(state.outputTree);
+    return bestNode;
+  }
+
+  // Shows tooltips based on the cursor position in the output editor.
+  function updateTooltip(docPos, pixelPos) {
+    if (state.outputTree === undefined) {
+      return;
+    }
+
+    if (docPos === state.tooltipState.lastDocPos) {
+      $outputTooltip.style.left = `${pixelPos.pageX}px`;
+      $outputTooltip.style.top = `${pixelPos.pageY}px`;
+      return;
+    }
+    state.tooltipState.lastDocPos = docPos;
+
+    const pos = {row: docPos.row, col: docPos.column};
+    const bestNode = findClosestOutputNode(pos, /* hasInputSource = */ false);
+
+    if (bestNode === undefined || bestNode.note === undefined) {
+      clearTooltip();
+      return;
+    }
+    if (bestNode === state.tooltipState.lastBestNode) {
+      $outputTooltip.style.left = `${pixelPos.pageX}px`;
+      $outputTooltip.style.top = `${pixelPos.pageY}px`;
+      return;
+    }
+    state.tooltipState.lastBestNode = bestNode;
+
+    $outputTooltip.style.left = `${pixelPos.pageX}px`;
+    $outputTooltip.style.top = `${pixelPos.pageY}px`;
+    $outputTooltip.innerHTML = wordWrap(bestNode.note, 66);
+    $outputTooltip.hidden = false;
+
+    // In bytes mode, we don't underline the things that can be hovered over
+    // (in update()) because *everything* can be hovered. Instead, we show an
+    // underline for the current tooltip to show the extent of it. In other
+    // modes, we also show a more distinct underline for the active one.
+    underlineTooltipRegions(
+      bestNode,
+      /* skipWhitespace = */ $outputSlider.value !== LAST_OUTPUT_MODE,
+      "has-tooltip-active");
+  }
+
+  // ---------------------------------------------------------------------------
+  // ----- RESTORE -------------------------------------------------------------
+  // ---------------------------------------------------------------------------
+
+  // Used to avoid firing events while restoring (either in the beginning or
+  // when the Reset button is clicked).
+  let restoreInProgress;
+
+  // Restores the site from localStorage.
+  function restore() {
+    restoreInProgress = true;
+    if (window.localStorage.editorPosition) {
+      editorSplitPosition = JSON.parse(window.localStorage.editorPosition);
+    } else {
+      editorSplitPosition = 0.5;
+    }
+    // This will also call resizeEditors.
+    setEditorSplitOrientation(window.localStorage.editorSplitOrientation || "vertical");
+    if (window.localStorage.debugEnabled) {
+      setDebugEnabled(JSON.parse(window.localStorage.debugEnabled), "restoring");
+    } else {
+      setDebugEnabled(false, "restoring");
+    }
+    if (window.localStorage.outputModeWhenDebugIs) {
+      outputModeWhenDebugIs = JSON.parse(window.localStorage.outputModeWhenDebugIs);
+    } else {
+      outputModeWhenDebugIs = {false: $outputSlider.max, true: $outputSlider.min};
+    }
+    setOuputMode(outputModeWhenDebugIs[debugEnabled]);
+    // Hidden at first to avoid a flash from default 50% editor split to the
+    // restored value. This also applies for the output slider (Debug or not
+    // Debug can cause flash). So we just hide the whole container till ready.
+    $container.hidden = false;
+    let input = window.localStorage.input;
+    if (!input || input.trim() === "") {
+      input = DEFAULT_INPUT;
+    }
+    $inputEditor.session.setValue(input);
+    // Move the cursor to the open brace so that we get the rainbow highlights.
+    // Note: still do this even if we restored from localStorage, but it was
+    // unchanged from the default.
+    if (input === DEFAULT_INPUT) {
+      $inputEditor.moveCursorTo(0, 8);
+    }
+    update();
+    restoreInProgress = false;
+  }
+
+  // ---------------------------------------------------------------------------
+  // ----- EVENTS --------------------------------------------------------------
+  // ---------------------------------------------------------------------------
+
+  // Update and save whenever the input changes.
+  $inputEditor.on("change", () => {
+    if (restoreInProgress) {
+      return;
+    }
+    update();
+    window.localStorage.input = $inputEditor.getValue();
+  });
+
+  // Re-highlight whenever the cursor moves. But not when selecting text.
+  $inputEditor.session.getSelection().on("changeCursor", () => {
+    if (restoreInProgress) {
+      return;
+    }
+    if ($inputEditor.session.getSelection().isEmpty()) {
+      highlight("input");
+    }
+  });
+  $outputEditor.session.getSelection().on("changeCursor", () => {
+    if (restoreInProgress || updateOutputInProgress) {
+      return;
+    }
+    if ($outputEditor.session.getSelection().isEmpty()) {
+      highlight("output");
+    }
+  });
+
+  // Update the output view whenever the slider changes.
+  $outputSlider.oninput = () => {
+    if (restoreInProgress) {
+      return;
+    }
+    setOuputMode($outputSlider.value);
+    update();
+  };
+  // Also allow moving the slider using Ctrl-[ and Ctrl-].
+  document.addEventListener("keydown", (e) => {
+    let delta;
+    if (e.ctrlKey && e.key === "[") {
+      delta = -1;
+    } else if (e.ctrlKey && e.key === "]") {
+      delta = 1;
+    } else {
+      return;
+    }
+    const newValue = (parseInt($outputSlider.value) + delta).toString();
+    if (newValue < $outputSlider.min || newValue > $outputSlider.max) {
+      return;
+    }
+    $outputSlider.value = newValue;
+    setOuputMode(newValue);
+    update();
+  });
+
+  // Update output tooltip when the cursor moves.
+  $outputEditor.on("mousemove", e => {
+    const docPos = e.getDocumentPosition();
+    if (!docPos || !$outputEditor.session.getSelection().isEmpty()) {
+      clearTooltip();
+      return;
+    }
+    const screenPos = $outputEditor.session.documentToScreenPosition(docPos);
+    if (
+        // Avoid tooltip persisting when moving into the blank space to the right.
+        $outputEditor.session.getScreenLastRowColumn(screenPos.row) === screenPos.column
+        // Avoid weird flicker when moving past top edge of window.
+        || (docPos.row === 0 && docPos.column === 0 && screenPos.row === 0 && screenPos.column === 0)) {
+      clearTooltip();
+      return;
+    }
+    const pixelPos = $outputEditor.renderer.textToScreenCoordinates(docPos);
+    pixelPos.pageX += 10;
+
+    // Removing this because large tooltips at the bottom cause a scrollbar
+    // on the entire document, jerking the page when the tooltip appears.
+    // It can still happen with large tooltips, but it's alleviated by the fact
+    // that I enabled scrollPastEnd on the editors.
+    //
+    // EDIT: uncommenting it again because I have made body overflow: hidden
+    // so that problem is gone. On bytes it's nice to have the tooltip below
+    // to not obstruct the rest of the line.
+    pixelPos.pageY += $outputEditor.renderer.lineHeight + 2;
+
+    updateTooltip(docPos, pixelPos);
+  });
+
+  document.getElementById("OutputEditor").addEventListener("mouseleave", () => {
+    clearTooltip();
+  });
+
+  // Allow the editor splitter to be dragged.
+  let draggingSplitter = false;
+  $splitter.addEventListener("mousedown", () => draggingSplitter = true);
+  document.addEventListener("mouseup", () => draggingSplitter = false);
+  document.addEventListener("mousemove", (e) => {
+    if (!draggingSplitter) {
+      return;
+    }
+    const rect = $container.getBoundingClientRect();
+    // NOTE: Keep the number below in sync with style.css.
+    const position = editorSplitOrientation === "vertical"
+      ? (e.pageX - rect.x) / rect.width
+      : (e.pageY - rect.y) / rect.height;
+    const clamped = Math.max(0, Math.min(1, position));
+    resizeEditors(clamped);
+  });
+
+  // Toggle Debug mode when the Debug button is clicked.
+  $debugButton.onclick = () => {
+    setDebugEnabled(!debugEnabled);
+    update();
+  };
+
+  $layoutButton.onclick = () => setEditorSplitOrientation("toggle");
+
+  function exitModalKeyListener(e) {
+    if (e.key === "Enter" || e.key === "Escape") {
+      // Without preventDefault, pressing Enter would hide the window and then
+      // immediately show it again because it presses the Help button again (if
+      // it's still in focus).
+      e.preventDefault();
+      hideHelpModal();
+    }
+  }
+  function showHelpModal() {
+    $helpModal.hidden = false;
+    document.addEventListener("keydown", exitModalKeyListener);
+  }
+  function hideHelpModal() {
+    $helpModal.hidden = true;
+    document.removeEventListener("keydown", exitModalKeyListener);
+  }
+
+  // Open the help window on clicking the Help button. It also functions as a
+  // toggle so that if you press space while it's still in focus, it will close
+  // the help window.
+  $helpButton.onclick = () => {
+    if ($helpModal.hidden) {
+      showHelpModal();
+    } else {
+      hideHelpModal();
+    }
+  };
+  // Click outside the modal to hid eit. But use stopPropagation to prevent
+  // clicks on the modal content itself from closing it.
+  $helpModal.onclick = hideHelpModal;
+  $helpModalContent.onclick = (e) => e.stopPropagation();
+
+  // Reset all data to the defaults on clicking the Reset buton.
+  $resetButton.onclick = () => {
+    window.localStorage.clear();
+    restore();
+  };
+
+  restore();
+};
+
+window.onload = () => {
+  // Load ace/mode/json first. Running main() eventually results in setting an
+  // editor mode to ace/mode/fidlviz. This imports some resources that are not
+  // exposed as separate files by the CDN, like ace/mode/behaviour/cstyle. By
+  // first loading ace/mode/json, these common resources get populated in Ace's
+  // internal map, so it won't attempt and fail to load them from the CDN.
+  ace.config.loadModule("ace/mode/json", () => {
+    main();
+  });
+};
+
+})(); // end IIFE
diff --git a/fidlviz/style.css b/fidlviz/style.css
new file mode 100644
index 0000000..d3ffdbd
--- /dev/null
+++ b/fidlviz/style.css
@@ -0,0 +1,423 @@
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    /* Copied from fidlbolt */
+    --fg: #333;
+    --bg: #f0f0f0;
+    --border: #666;
+    --element: #ddd;
+    --element-hover: #f5f5f5;
+    --intense: #fff;
+    --intense-hover: #e3e3e3;
+    --border: #666;
+    --link: #06d;
+
+    /* Not in fidlbolt */
+    --cover: rgba(255, 255, 255, 0.75);
+    --underline: rgba(0, 0, 0, 0.25);
+    --underline-active: rgba(0, 0, 0, 0.75);
+    --shadow: rgba(0, 0, 0, 0.3);
+    --tooltip-gradient: rgba(0, 0, 0, 0.1);
+    --input-error: #ffaaaa;
+    --highlight-1: #ffeea2;
+    --highlight-2: #cfff90;
+    --highlight-3: #a6ffec;
+    --highlight-4: #a4dbff;
+    --highlight-5: #adbcff;
+    --highlight-6: #dbb8fc;
+    --highlight-7: #ffb9f6;
+    --highlight-8: #ffb9b9;
+    --highlight-9: #ffd8a6;
+
+    font: 16px Helvetica, sans-serif;
+    color: var(--fg);
+    background: var(--bg);
+
+    /* Prevent tooltips near edges from making the document have scrollbars,
+    causing jankiness when mousing onto and off that element. */
+    overflow: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        /* Copied from fidlbolt */
+        --fg: #eee;
+        --bg: #333;
+        --element: #111;
+        --element-hover: #444;
+        --intense: #111;
+        --intense-hover: #444;
+        --border: #aaa;
+        --link: #6af;
+
+        /* Not in fidlbolt */
+        --cover: rgba(30, 30, 30, 0.75);
+        --underline: rgba(255, 255, 255, 0.8);
+        --underline-active: rgba(255, 255, 255, 1);
+        --shadow: rgba(255, 255, 255, 0.5);
+        --tooltip-gradient: rgba(255, 255, 255, 0.2);
+        --input-error: #c75252;
+        --highlight-1: #ad8e00;
+        --highlight-2: #518f00;
+        --highlight-3: #009474;
+        --highlight-4: #286b97;
+        --highlight-5: #4356a8;
+        --highlight-6: #7239a8;
+        --highlight-7: #971c87;
+        --highlight-8: #992121;
+        --highlight-9: #bd6b00;
+    }
+}
+
+.part-header {
+    display: flex;
+    justify-content: space-between;
+    background: var(--element);
+    border-bottom: 1px solid var(--border);
+    padding: 5px 10px 4px;
+    user-select: none;
+}
+
+.part-header:hover {
+    /* Prevent weird flicker when dragging splitter by disabling selection,
+    and enabling only on hover. Not perfect (selection reappears when you
+    hove again) but better than before. */
+    user-select: auto;
+}
+
+.part-title {
+    font-size: 18px;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.button--active {
+    font-weight: bold;
+}
+
+.slider {
+    flex: 0 0 165px;
+}
+
+.input-error {
+    background: var(--input-error);
+    position: absolute;
+}
+
+.highlight-1 {
+    background: var(--highlight-1);
+    position: absolute;
+}
+
+.highlight-2 {
+    background: var(--highlight-2);
+    position: absolute;
+}
+
+.highlight-3 {
+    background: var(--highlight-3);
+    position: absolute;
+}
+
+.highlight-4 {
+    background: var(--highlight-4);
+    position: absolute;
+}
+
+.highlight-5 {
+    background: var(--highlight-5);
+    position: absolute;
+}
+
+.highlight-6 {
+    background: var(--highlight-6);
+    position: absolute;
+}
+
+.highlight-7 {
+    background: var(--highlight-7);
+    position: absolute;
+}
+
+.highlight-8 {
+    background: var(--highlight-8);
+    position: absolute;
+}
+
+.highlight-9 {
+    background: var(--highlight-9);
+    position: absolute;
+}
+
+.has-tooltip, .has-tooltip-active {
+    border-bottom: 3px solid var(--underline);
+    border-radius: 0;
+    box-sizing: border-box;
+    position: absolute;
+}
+
+.has-tooltip-active {
+    border-bottom-color: var(--underline-active);
+}
+
+/*
+https://github.com/devuxd/SeeCodeRun/wiki/Ace-code-editor#i-want-to-create-a-popup-that-comes-up-whenever-the-user-hovers-over-a-piece-of-code-whats-the-best-way-to-do-that
+*/
+.tooltip {
+    background-color: var(--bg);
+    background-image: -webkit-linear-gradient(top, transparent, var(--tooltip-gradient));
+    background-image: linear-gradient(to bottom, transparent, var(--tooltip-gradient));
+    border: 1px solid var(--border);
+    border-radius: 1px;
+    box-shadow: 0 1px 2px var(--shadow);
+    color: var(--fg);
+    max-width: 100%;
+    padding: 3px 4px;
+    position: absolute;
+    z-index: 999999;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    cursor: default;
+    white-space: pre;
+    word-wrap: break-word;
+    line-height: normal;
+    font-style: normal;
+    font-weight: normal;
+    letter-spacing: normal;
+    pointer-events: none;
+}
+
+/* ========================================================================== */
+/* ===== START copied from fidlbolt ========================================= */
+/* ========================================================================== */
+h1 {
+    font-size: 40px;
+    font-weight: bold;
+    margin: 20px 0;
+}
+h2 {
+    font-size: 25px;
+    font-weight: bold;
+    margin: 30px 0;
+}
+a {
+    text-decoration: none;
+    color: var(--link);
+}
+a:hover {
+    text-decoration: underline;
+}
+p {
+    margin: 0 0 1em 0;
+    line-height: 1.5;
+}
+ul, ol {
+    margin: 0;
+    padding: 0 0 0 25px;
+    list-style-position: outside;
+}
+li {
+    margin: 0 0 1em 0;
+    padding: 0;
+    line-height: 1.5;
+}
+.close-list li {
+    margin: 0;
+}
+kbd {
+    display: inline-block;
+    margin: 0 1px;
+    padding: 2px 3px;
+    border: 1px solid var(--border);
+    border-radius: 3px;
+    background: var(--intense);
+    font: 11px "Menlo", "Consolas", monospace;
+    white-space: nowrap;
+}
+.kbd-group {
+    white-space: nowrap;
+}
+hr {
+    border: none;
+    border-bottom: 1px solid var(--border);
+    margin: 30px auto;
+    padding: 0;
+}
+button {
+    font: inherit;
+    color: inherit;
+    outline: none;
+    border: none;
+    margin: 0;
+}
+button:focus {
+    text-decoration: underline;
+}
+.heading-fidl {
+    margin-left: 10px;
+}
+/* CHANGED (from heading-bolt) */
+.heading-viz {
+    color: var(--intense);
+    -webkit-text-stroke-width: 1.5px;
+    -webkit-text-stroke-color: var(--fg);
+    margin-right: 5px;
+}
+.wrapper {
+    margin: 0 20px;
+    display: flex;
+    flex-flow: column;
+    min-height: 100vh;
+}
+.heading {
+    text-align: center;
+}
+.container {
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    overflow: hidden;
+    flex-grow: 1;
+    margin-bottom: 20px;
+    position: relative;
+}
+.split-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+.split-container--horizontal {
+    flex-direction: column;
+}
+.split-container--vertical {
+    flex-direction: row;
+}
+.split-item {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    height: 100%;
+}
+.split-item--first {
+    flex-shrink: 0;
+}
+.split-item--second {
+    flex-grow: 1;
+}
+.split-splitter {
+    flex-shrink: 0;
+    background: var(--border);
+}
+.split-splitter--vertical {
+    cursor: ew-resize;
+    width: 8px;
+}
+.split-splitter--horizontal {
+    cursor: ns-resize;
+    height: 8px;
+}
+.editor {
+    font: 14px "Menlo", "Consolas", monospace;
+    /* ADDED */ line-height: 18px;
+    flex-grow: 1;
+}
+.controls-container {
+    position: absolute;
+    top: 23px;
+    right: 20px;
+}
+.controls-button {
+    background: var(--intense);
+    padding: 10px;
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    cursor: pointer;
+    display: inline-block;
+    margin-left: 10px;
+    user-select: none;
+    -webkit-user-select: none;
+}
+.controls-button:hover {
+    background: var(--intense-hover);
+}
+.modal-container {
+    position: absolute;
+    /* CHANGED */
+    /* background: rgba(255, 255, 255, 0.5); */
+    background: var(--cover);
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+}
+.modal-box {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    max-width: min(100% - 100px, 525px);
+    padding: 0 20px 20px;
+    background: var(--bg);
+    border-left: 1px solid var(--border);
+    overflow-y: auto;
+}
+.modal-box .form-control {
+    margin-bottom: 12px;
+}
+.form-select {
+    margin-left: 8px;
+    width: 120px;
+}
+.form-checkbox {
+    margin-right: 8px;
+}
+.form-text, .form-number {
+    margin-left: 8px;
+    width: 40px;
+}
+.form-number--invalid {
+    color: #f33;
+}
+.form-button-group {
+    margin-top: 30px;
+}
+.form-button {
+    background: var(--intense);
+    padding: 8px;
+    margin: 0 5px;
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    cursor: pointer;
+    display: inline-block;
+    font: inherit;
+    color: inherit;
+    font-size: 14px;
+}
+.form-button:hover {
+    background: var(--intense-hover);
+}
+/* CHANGED from 750px (because more buttons) */
+@media (max-width: 850px) {
+    .heading {
+        text-align: left;
+    }
+    .status {
+        left: 0;
+        right: 0;
+        text-align: center;
+    }
+}
+/* ========================================================================== */
+/* ===== END copied from fidlbolt =======================--================== */
+/* ========================================================================== */