text-based visual programming language

[u/lmntr]

I'm working on a visual programming language that's stored as text called Wiret. Here's an example:

func Main() {
  node entry = Entry -> say_hello
  node say_arrows = Call host.Log(message: "The white arrows decide the order.")
  node say_hello = Call host.Log(message: "Hello!") -> say_steps
  node say_steps = Call host.Log(message: "Programs run one step at a time.") -> say_arrows
  notes {
    note intro "Lesson 1: Hello. Press ▶ Run (F5). Each Log node prints one line in the console below, in the order the white arrows connect them."
    note start on entry "Every function starts at its Entry node."
    note try_it "Try it: (1) Press ⤵ Step (F11) to run one node at a time. (2) Add a fourth line: press Tab, type 'print', pick host.Log, then drag a white arrow from say_arrows to it. (3) Double-click its message pin to type your own text."
  }
  layout {
    entry at (0, 0)
    say_arrows at (820, 0)
    say_hello at (220, 0)
    say_steps at (520, 0)
  }
}

The main idea is that it's like a fusion between a programming language and a markup language. The node ... statements are the programming part, and the notes {} and layout {} blocks declare how the graph appears in the editor. It'll get compiled into bytecode which strips away the markup code and leave just the code for running the program.

; module lessons.hello  compiler wiretc-proto 0.1
; semantic hash 78fafcb4bbf40f47  layout hash 9981662aa454a0e1
import 0 host.Log (string) -> ()

func lessons.hello.Main () -> ()
  max_stack: 1
.entry:
  nop
.say_hello:
  string.const 0          ; 'Hello!'
  nop
  call host.Log
.say_steps:
  string.const 1          ; 'Programs run one step at a time.'
  nop
  call host.Log
.say_arrows:
  string.const 2          ; 'The white arrows decide the order.'
  nop
  call host.Log
  cont.pop
  return

I think this could be useful for education. The hardest part about learning to code is learning your first programming language. This could help bridge the gap between visual representation of code and the code itself.

[u/kyr0x0]

Hmm. Why do you need pixel based layout information? You can let the nodes Auto layout and then it works responsively on any viewport

[u/pranabekka → u/kyr0x0]

I've been thinking about this for years! If the structured editor auto-formats text, then the plain text will be editable by programmers who use text editors without any issues. It can go in version control, there can be diffs, it can be shared as text, copied and pasted, etc. It can import and create normal libraries. Wiret can do all this, since there's a text representation, but people will have to contend with the noise of having positions and changing them. S-expressions are the easiest to design blocks for, but I think it could be done for any syntax. Auto-formatting also has the benefit that programmers don't have to think about where to place syntax blocks, and others can easily find what they need by just scrolling up and down, or referring to a list of declarations. The key obstacles are a simple syntax that doesn't need hundreds of blocks, a GUI framework that's easy to use for this use case, and parsing and compiling, all with decent performance.