Requires N:M mapping
This mapping has 4 all-to-all groups: every node on one side corresponds to every node on the other, and none is deleted or inserted. Each member carries an all N:M badge; selecting one highlights all of its counterparts, in the tree and in the code view alike.
Code view:
From the node mapping Minimal Full
A painting is a person's account of this edit as text , recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.
Before
1 const user = {
2 name: 'Alice',
3 age: 30,
4 email: 'alice@example.com'
5 };
6
7 const name = user .name ;
8 const age = user .age ;
9 const email = user .email ;
10
11 console.log(name, age, email);
12
After
1 const user = {
2 name: 'Alice',
3 age: 30,
4 email: 'alice@example.com'
5 };
6
7 const { name, age, email } = user ;
8
9 console.log(name, age, email);
10
Before
1 const user = {
2 name: 'Alice',
3 age: 30,
4 email: 'alice@example.com'
5 };
6
7 const name = user .name ;
8 const age = user .age ;
9 const email = user .email ;
10
11 console.log(name, age, email);
12
After
1 const user = {
2 name: 'Alice',
3 age: 30,
4 email: 'alice@example.com'
5 };
6
7 const { name , age , email } = user ;
8
9 console.log(name, age, email);
10
Before
1 const user = {
2 name: 'Alice',
3 age: 30,
4 email: 'alice@example.com'
5 };
6
7 const name = user .name ;
8 const age = user .age ;
9 const email = user .email ;
10
11 console.log(name, age, email);
12
After
1 const user = {
2 name: 'Alice',
3 age: 30,
4 email: 'alice@example.com'
5 };
6
7 const { name , age , email } = user ;
8
9 console.log(name, age, email);
10
Before
program lexical_declaration (+29 nodes collapsed)
lexical_declaration const "const" all 3:1
variable_declarator identifier "name"
= "=" all 3:1
member_expression identifier "user" all 3:1
. "."
property_identifier "name"
; ";" all 3:1
lexical_declaration const "const" all 3:1
variable_declarator identifier "age"
= "=" all 3:1
member_expression identifier "user" all 3:1
. "."
property_identifier "age"
; ";" all 3:1
lexical_declaration const "const" all 3:1
variable_declarator identifier "email"
= "=" all 3:1
member_expression identifier "user" all 3:1
. "."
property_identifier "email"
; ";" all 3:1
expression_statement call_expression member_expression identifier "console"
. "."
property_identifier "log"
arguments ( "("
identifier "name"
, ","
identifier "age"
, ","
identifier "email"
) ")"
; ";"
After
program lexical_declaration (+29 nodes collapsed)
lexical_declaration const "const" all 3:1
variable_declarator object_pattern { "{"
shorthand_property_identifier_pattern "name"
, ","
shorthand_property_identifier_pattern "age"
, ","
shorthand_property_identifier_pattern "email"
} "}"
= "=" all 3:1
identifier "user" all 3:1
; ";" all 3:1
expression_statement call_expression member_expression identifier "console"
. "."
property_identifier "log"
arguments ( "("
identifier "name"
, ","
identifier "age"
, ","
identifier "email"
) ")"
; ";"
Keybindings
j / k next / previous visible node (tree panels)
h / l collapse / expand the focused node
g / G jump to first / last visible node
Tab switch focus between Before/After panels
/ search: jump to next node whose text contains a given string
a jump the other panel to this node's mapped counterpart
i hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v cycle the view: split / code only / tree only
p cycle what the code view renders: the node mapping, then each human painting
r mark this fixture as reviewed, or forget the mark (kept in this browser only)
n open a random fixture not yet marked as reviewed
? toggle this help
Search (plain substring, no regex):