I've always been interested in this space and there seem to be few examples. Specifically, I'm looking for an example that shows how to use something like codemirror and a drag and drop interface. A change in one would be reflected in the other.
If start out in the middle with BNF grammar, can get drag/drop diagram/grammar highlighter for use in codemirror[0] or mess around with BNF linting [1][2][3][4].
constructive bidirectional programming[a]: treesitter[0] used with emacs[1] neovim[2] python[2.2]
programming language boomerang, "A bidirectional programming language for ad-hoc, textual data"[b];
more traditional use in neural networks[c]
xsugar for dual syntax xml language[d]
piet-q exotic language interpretation (vs. program/application)[e] and/or q-code usage/application[f][g]
can have fun with coding in c in way that 2nd program can be extrapolated from gcc ast syntax tree[3]
scratch[4] bit simpler, but gis-piet[5] bit bigger.
Hitchhicker's guide to the galaxy keeps it pretty small/simple with '42'; which means really have to fully expand/uncompress/unwind everything to get anything done.
You could check out my bidirectional circuit design tool:
https://github.com/leomcelroy/svg-pcb
Paper on it here:
https://dl.acm.org/doi/abs/10.1145/3559400.3562004
Feel free to reach out if you have questions.