examples/demo-simple.html

<!DOCTYPE html>
<html>
  <head>
    <title>Graph Editor Demo</title>
    <meta charset="utf-8">
    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    <style>
      html, body {
        width: 100%;
        height: 100%;
      }
      body {
        background-color: hsl(189, 47%, 6%);
        font-family: "SourceCodePro",Helvetica,Arial,sans-serif;
        overflow: hidden;
      }
      #editor {
        background-color: transparent;
        position: absolute;
        top: 0;
        left: 0;
      }
      #testing {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>

  </head>
  <body>

    <div id="editor" class="the-graph-dark"></div>

    <div id="testing">
      <button id="random"><i class="fa fa-random"></i> random graph</button>
      <button id="addnode">add node</button>
      <button id="addedge">add edge</button>
      <button id="get">get graph</button>
      <button id="clear"><i class="fa fa-trash"></i> clear</button>
    </div>
    <div id="loading" style="position:absolute; top:10px; left:10px; background-color:white; padding:10px; border-radius:5px;">
      <div id="loading-message">loading custom elements...</div>
    </div>
  </body>
</html>