Arrow icon
See all demos

JavaScript AST Visualiser

The JavaScript Abstract Syntax Tree (AST) Visualizer is a great example of a JointJS+ demo that makes life easier for developers. It offers an alternative to the good old AST Explorer and serves as a graphical representation of the source code.
Demo instructions
Paste the source code into the code editor and look at the graphical representation.

Made with JointJS+

Only available with the JointJS+ commercial license in the apps/ directory of your package. Don't have a license yet? Start a trial and use the source code of all our demos for free, with no strings attached, for 30 days.

Made with JointJS

Available in the JointJS open-source library which helps developers create simple visual applications in less time.

The role of JointJS in visualizing an Abstract Syntax Tree

JointJS, a powerful diagramming library, helps developers and companies of any size build advanced visual applications and No-Code/Low-Code tools. It provides a wealth of ready-made demos and a wide range of prebuilt features that make creating applications such as JavaScript Abstract Syntax Tree Visualizer a breeze.

We equip developers with all the plugins they need to save time and focus their energy elsewhere such as:

  • TreeLayout
  • constructTree
  • PaperScroller
  • Tooltip
  • Raster
  • SVG

‍New to this topic? Learn more about how Abstract Syntax Tree works πŸ‘‡

What is an Abstract Syntax Tree?

Abstract syntax trees are graphical visualizations of source code. One of their uses, as we will discuss later, is in compilers that transform a high-level language into a low-level language.Β 

Let's take a closer look at what the visualization looks like. A simple function a * b would be visually represented using an AST as follows:

Abstract Syntax Tree

We used a specific example above, so you may be wondering why the word "Abstract" has a place in the formal name, right?

As Wikipedia puts it, β€œthe syntax is abstract in the sense that it does not represent every detail appearing in the real syntax, but rather just the structural or content-related details. For instance, grouping parentheses are implicit in the tree structure, so these do not have to be represented as separate nodes. Likewise, a syntactic construct like an if-condition-then statement may be denoted by means of a single node with three branches.”

Common uses of Abstract Syntax Trees

As mentioned in this article, abstract syntax trees are commonly used in compilers. Their tasks vary from converting human-readable code written in programming languages such as JavaScript, Python, or Java into zeros and ones – something computers understand well – to converting from a modern version of a programming language to an older one.

Although abstract syntax trees are of great importance for programming languages, there is ongoing research into their use in other areas.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial, get the source code of the JavaScript AST Visualizer, and go from zero to a fully functional app in no time.

Speed up your development with aΒ powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.