---

What is VAX?

VAX is a web-based visual editor for creating blueprints consisting of nodes defined by your schema. Blueprints are then transformed to trees which are easy to interpret on any backend.

VAX is inspired by Unreal Engine 4 Blueprints.

---

How it Works?

• First — You Define a Language

  You define your type system and necessary components.
  Say you want to provide people with a simple algebraic expression builder.

  types:
      # [Any] is considered as super type
      Numeric:
          color: "#fff"
  
  components:
    Literal:
      attrs:
        V: Numeric
      out:
        O: Numeric
  
    Plus:
      in:
        A: Numeric
        B: Numeric
      out:
        O: Numeric

  Here you defined a type Numeric and two components: Literal — for providing numbers and Plus — for adding two numbers.

• Then — Users create the blueprints

  Users visually create or modify blueprints, consisting of nodes which are then connected with wires. They can also define their own functions, which are built with known components.

  You can try out this simple schema here.

  

• Finally — You interpret the tree

  You get a nested tree structure, that is easily encoded into something like JSON.

  The blueprint above will be encoded into:

  [
    {
      "id": 8,
      "c": "Plus",
      "links": {
        "A": {
          "id": 2,
          "c": "Literal",
          "a": {
            "V": "2"
          },
          "links": {},
          "out": "O"
        },
        "B": {
          "id": 5,
          "c": "Literal",
          "a": {
            "V": "2"
          },
          "links": {},
          "out": "O"
        }
      }
    }
  ]

  All you have to do is walk the tree and evaluate it!

  This primitive javascript code snippet will do the work:

  function walk(node) {
      switch (node.c) {
          case 'Literal':
              return parseFloat(node.a.V);
  
          case 'Plus':
              return walk(node.links.A) + walk(node.links.B);
  
          default:
              throw new Error("Unsupported node component: " + node.component);
      }
  }
  
  walk(tree);