Visual and interactive-syntax is a type of language-oriented programming that allows developers to use, view, and edit portions of a textual program with graphics. Using interactive-syntax provides the benefits of a graphical programming language, while keeping all of the benefits of a purely textual language. For example, the following is an example of a small network embedded in a program:

Graphical network embedded in text

Interactive-syntax is backed by human readable code; the visual components exists purely when writing and editing code. This backing means all of the tools involved in software development work with interactive-syntax extensions. For example:

• version control, such as git, works with interactive-syntax;
• programs using interactive-syntax can be written and edited with your favorite text editor or IDE;
• cut/copy/paste works with interactive-syntax using your operating system’s native clipboard;
• code analysis tools, like diff and refactor, still work with interactive-syntax; and
• you can use interactive-syntax in any language or environment that supports language-oriented programming.

To learn more about interactive-syntax, watch this video or read the accompanying paper.

VISr (Visual and Interactive-Syntax realized) for ClojureScript is a practical implementation of interactive-syntax in web browsers. The VISr environment is a full-featured IDE that supports interactive-syntax components called VISrs. Additionally, the VISr environment comes with a package manager that supports NPM packages.

This article is a brief introduction to both the VISr environment and the components that make up a VISrs. It discusses how to insert a VISr into code, how to manipulate a VISr, and how to create a new types of VISr. Future articles will discuss more advanced uses such as integrating NPM packages and using VISrs in other languages.