Demo.html

<link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/theme/default.css">
<link rel="stylesheet" href="https://unpkg.com/vue-json-tree@0.3.3/dist/json-tree.css">

<style type="text/css">
[v-cloak] {
  display: none;
}

:root {
  --md-theme-default-accent: #bbdefb;
}

body, #app {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

#app .md-app-content {
  height: auto;
  overflow: hidden;
}

textarea {
  min-height: 350px !important;
  max-height: 100% !important;
}

.input-container.md-invalid .errors-box {
  border: thin solid;
  border-color: #ef5350 !important;
}

.input-container.md-invalid .md-field:before {
  border-color: #ef5350 !important;
}
.md-toolbar.md-theme-default.md-primary .md-icon.md-theme-default {
  color: #333;
}
</style>

<div id="app">
  <md-app md-waterfall md-mode="overlap" v-cloak>
    <md-app-toolbar class="md-primary md-large md-dense">
      <div class="md-toolbar-row">
        <div class="md-toolbar-section-start">
          <a href="https://github.com/glayzzle/php-parser">
            <span class="md-title">
              <img src="https://avatars3.githubusercontent.com/u/7166545?s=200&v=4" width="32" height="32" alt="Glayzzle" /> php-parser
            </span>
          </a>
        </div>

        <div class="md-toolbar-section-center">
          <md-switch v-model="parserOptions.parser.debug">
            Debug
            <md-tooltip md-delay="500">Show debug logs</md-tooltip>
          </md-switch>
          <md-switch v-model="parserOptions.parser.extractDoc">
            Comments
            <md-tooltip md-delay="500">Extract comments</md-tooltip>
          </md-switch>
          <md-switch v-model="parserOptions.parser.extractTokens">
            Tokens
            <md-tooltip md-delay="500">Extract code tokens</md-tooltip>
          </md-switch>
          <md-switch v-model="parserOptions.ast.withPositions">
            Positions
            <md-tooltip md-delay="500">AST positions</md-tooltip>
          </md-switch>
          <md-switch v-model="parserOptions.ast.withSource">
            Source
            <md-tooltip md-delay="500">Extract AST source</md-tooltip>
          </md-switch>
        </div>

        <div class="md-toolbar-section-end">
          <md-switch class="md-accent" v-model="live">
            Live Mode
            <md-tooltip>Parse while typing</md-tooltip>
          </md-switch>
          <md-button v-if="!live" class="md-raised" @click="parseInput()">
            <md-icon>play_arrow</md-icon> Parse
            <md-tooltip>Parse code</md-tooltip>
          </md-button>
          <md-button class="md-raised" href="/docs/">
            <md-icon>book</md-icon> Help
            <md-tooltip>Read API documentation</md-tooltip>
          </md-button>
        </div>
      </div>
    </md-app-toolbar>

    <md-app-content>
      <div class="md-layout md-gutter">
        <div class="md-layout-item input-container md-size-50" :class="{'md-invalid': output.errors.length}">
          <md-field>
            <md-textarea :value="codeInput" @input.native="event => codeInput = event.target.value"></md-textarea>
          </md-field>
          <json-tree class="errors-box" :data="{errors: output.errors}" :level="3"></json-tree>
        </div>

        <div class="md-layout-item output-container md-size-50">
          <json-tree :data="output" :level="2"></json-tree>
        </div>
      </div>
    </md-app-content>
  </md-app>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material@beta"></script>
<script src="https://unpkg.com/vue-json-tree@0.3.3/dist/json-tree.js"></script>
<script src="https://rawgit.com/glayzzle/php-parser/master/dist/php-parser.min.js"></script>
<script type="text/javascript">
  var parser = PhpParser;

  Vue.use(VueMaterial.default);

  new Vue({
    el: "#app",
    data: {
      live: true,
      parserOptions: {
        parser: {
          debug: false,
          extractDoc: true,
          suppressErrors: true,
          extractTokens: true
        },
        ast: {
          withPositions: true,
          withSource: true
        }
      },
      codeInput: '<?php \n\n// Echo statement\necho "hello php-parser";',
      output: {
        errors: []
      }
    },
    watch: {
      parserOptions: {
        handler() {
          this.parseInput();
        },
        deep: true
      },
      codeInput: {
        immediate: true,
        handler(newValue) {
          if (!this.live) return;
          this.parseInput(newValue);
        }
      }
    },
    methods: {
      parseInput(value) {
        this.output = parser.parseCode(
          value || this.codeInput,
          this.parserOptions
        );
      }
    }
  });
</script>