pegjs/website/views/online.ejs

<table id="columns">
  <tr>
    <td>
      <table class="column online" id="left-column">
        <tr>
          <td class="content-height">
            <h2 class="suggestion top">
              <span class="step-number">1</span>
              <div class="step-title">Write your PEG.js grammar</div>
            </h2>
          </td>
        </tr>
        <tr>
          <td>
            <div class="textarea-wrapper">
              <textarea class="code" id="grammar" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" disabled>
// Simple Arithmetics Grammar
// ==========================
//
// Accepts expressions like "2 * (3 + 4)" and computes their value.

Expression
  = head:Term tail:(_ ("+" / "-") _ Term)* {
      return tail.reduce(function(result, element) {
        if (element[1] === "+") { return result + element[3]; }
        if (element[1] === "-") { return result - element[3]; }
      }, head);
    }

Term
  = head:Factor tail:(_ ("*" / "/") _ Factor)* {
      return tail.reduce(function(result, element) {
        if (element[1] === "*") { return result * element[3]; }
        if (element[1] === "/") { return result / element[3]; }
      }, head);
    }

Factor
  = "(" _ expr:Expression _ ")" { return expr; }
  / Integer

Integer "integer"
  = _ [0-9]+ { return parseInt(text(), 10); }

_ "whitespace"
  = [ \t\n\r]*
              </textarea>
            </div>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <div id="build-message" class="message progress">Loading...</div>
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table class="column" id="right-column">
        <tr>
          <td class="content-height">
            <h2 class="suggestion top">
              <span class="step-number">2</span>
              <div class="step-title">Test the generated parser with some input</div>
            </h2>
          </td>
        </tr>
        <tr>
          <td>
            <div class="textarea-wrapper">
              <textarea class="code" id="input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" disabled>2 * (3 + 4)</textarea>
            </div>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <div id="parse-message" class="message disabled">Parser not available.</div>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <h2 id="output-header">Output</h2>
            <pre id="output" class="disabled">Output not available.</pre>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <h2 class="suggestion">
              <span class="step-number">3</span>
              <div class="step-title">Download the parser code</div>
            </h2>
          </td>
        </tr>
        <tr>
          <td class="content-height">
            <form method="post" action="/online/download">
              <input type="hidden" id="parser-source" name="source">
              <input type="submit" id="parser-download" value="Download parser" disabled>
              <div id="settings">
                <label for="parser-var">Parser variable:</label>
                <input type="text" id="parser-var" value="module.exports" disabled>
                <div id="options">
                  <input type="checkbox" id="option-cache" disabled>
                  <label for="option-cache">Use results cache</label>
                  <label for="option-optimize">Optimize:</label>
                  <select id="option-optimize" disabled>
                    <option value="speed">Parsing speed</option>
                    <option value="size">Code size</option>
                  </select>
                </div>
              </div>
            </from>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<script src="https://unpkg.com/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="/vendor/pegjs/peg.js"></script>
<script src="/vendor/jsdump/jsDump.js"></script>
<script src="/vendor/codemirror/codemirror.js"></script>
<script src="/js/online.js"></script>