IPv6 is required to access the server. Input source code is not stored.
UI Layout
There are three tabs controlled with a switch at the bottom:
- Edit
- Tree
- Help
Edit
The toolbar at the top has a dropdown to select the input language and a button to execute the translation script. The split view has three editors with the input source file at the top left, the result at the top right and the translation script at the bottom. Strg+S is equal to a button press. Drag the joint border to resize the editors. To select the resulting language, add a comment to the translation script: /* lang: python */ Select lines in the input source file to filter the AST.
Tree
The toolbar at the top has filter buttons to either show all nodes or only the selected nodes from the editor. The selected lines are shown with the label next to the Select button. The translation script must run once to render the tree. The center contains the AST rendered with a minimap on the right bottom. Wheel scrolling will zoom into the tree at the position of the mouse cursor. The zoom view can be moved either by dragging the tree or the red squared view in the minimap. Nodes in the tree can be closed and opened with a click. Right-clicking a node will open a context menu with options to copy the text of the node and mark the node with a color. Regular nodes have black labels and string literals are red.
Help
This help page.
Use Cases
- Extract information from source code (e.g. find vulnerabilities/errors)
- Source code transformation/translation
- Pretty printing
Usage
- Add a source language file into the top left editor and a JavaScript translation script into the bottom editor.
- Press the Run button to execute the translation script and print into the top right result editor.
- After translation, the AST is visible at the tree tab. Either press the Show All button to show all nodes or select lines in the source editor and press the Select button. Mark or copy item names with the context menu to use in the translation script editor. Scroll to zoom, drag the tree or use the minimap to drag the visible view into position.
CSS selectors
Use CSS selectors on a node to find other nodes. The AST root is stored in the "current" variable for the translation script. Each AST node has a "query", "queryAll", "matches", "closest", "text", "name" and "forEach" method. Additionally to common CSS selectors: There is a ":nth-child-of" pseudo class that only counts children of the same type.
Open Source Usage
| Source | License |
|---|---|
| https://github.com/ajaxorg/ace | 3-Clause BSD License |
| https://github.com/mturco/context-menu | MIT |
| https://github.com/danburzo/selery | MIT |
| https://github.com/fomantic/Fomantic-UI | MIT |
| https://github.com/d3/d3 | ISC license |
| https://observablehq.com/@d3/collapsible-tree | ISC license |
| https://github.com/jquery/jquery | MIT |
| https://github.com/RickStrahl/jquery-resizable | MIT |
| https://github.com/antlr/grammars-v4 | |
| https://github.com/antlr/antlr4 | 3-Clause BSD License |