Simple angular component (using Ionic UI components) to test surrealDB.

gist.page.ts

import {Component} from '@angular/core'
import {take} from 'rxjs/operators'
import {HttpClient, HttpHeaders} from '@angular/common/http'
import {Buffer} from 'Buffer'

@Component({
  selector: 'surreal',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Surreal</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <div class="leftside">
        <ion-button (click)="runCommand(textarea.value)">Run</ion-button>
        <textarea #textarea>{{ json }}</textarea>
        <ion-card>
          <ion-card-header>
            <ion-card-title>Presets</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <ion-list>
              <ion-item (click)="textarea.value = 'SELECT * FROM schedule'">
                <ion-label>SELECT * FROM schedule</ion-label>
              </ion-item>
              <ion-item (click)="textarea.value = 'CREATE [record id here] SET field = \\'value\\''">
                <ion-label>CREATE [record id here] SET field = 'value'</ion-label>
              </ion-item>
            </ion-list>
          </ion-card-content>
        </ion-card>
      </div>
      <textarea class="rightside">{{ json }}</textarea>
    </ion-content>
  `,
  styles: [
    `
      .leftside {
        float: left;
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 100%;
      }

      .rightside {
        float: right;
        width: 50%;
        height: 100%;
        overflow-y: auto;
        resize: none;
      }
    `
  ]
})
export class SurrealGistPage {
  // You'll need to follow the instructions at https://surrealdb.com/docs/start to get the server going first.
  header = new HttpHeaders()
    .set('Accept', 'application/json')
    .set('Authorization', 'Basic ' + Buffer.from('root:root').toString('base64'))
    .set('Content-Type', 'application/json')
    .set('NS', 'test')
    .set('DB', 'test')
  json = ''

  constructor(private http: HttpClient) {}

  runCommand(queryText) {
    return this.http
      .post('http://127.0.0.1:8000/sql', queryText, {headers: this.header})
      .pipe(take(1))
      .subscribe((res) => {
        this.json = JSON.stringify(res, null, 2)
      })
  }
}