CODEWITHSUNDEEP
javascriptjqueryhtmlcsstree
L3viathan
L3viathan

Reputation: 27331

Display (syntax) trees in webpage

I want to be able to display dynamic syntax trees on a webpage, possibly with a jQuery component. To show you what I mean, this

Syntax tree

is a syntax tree, and this is the general way I want it to be displayed.

How do I build something like this with HTML and CSS?

edit: Solution

Just in case somebody who finds this question later is trying the same, here's what I did:

I ended up drawing the tree with Graphviz as an SVG, and then, moving the svg tree inside the DOM using some magic. That way I could still interact with the elements, e.g. drag&drop or hover/click events.

The result can be seen here.

Upvotes: 1

Views: 2031

Answers (2)

Andrea Scarcella
Andrea Scarcella

Reputation: 3333

Another option is ArborJs, you can find an introduction here

Upvotes: 1

Mentok
Mentok

Reputation: 597

Try d3, it has a really good tree visualization

Upvotes: 1

Related Questions