any 3:2 multi-map group: any pairing of the 3 with the 2 is valid, one is shown
all 3:1 all-to-all group: each of the 3 corresponds to the 1
inserted
deleted
updated
moved
click a highlight to reveal its counterpart
Code view:
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// @filename: foo.ts
2export const x = 3;
3export const y = 5;
4
5// @filename: bar.ts
6import * as foo from "./foo";
7
…lines 8–12 unchanged (5 lines)
After
1// @module: commonjs
2// @target: es2015
3// @filename: foo.ts
4export const x = 3;
5export const y = 5;
6
7// @filename: bar.ts
8import * as foo from "./foo";
…lines 9–14 unchanged (6 lines)
Before
1// @filename: foo.ts
2export const x = 3;
3export const y = 5;
4
5// @filename: bar.ts
6import * as foo from "./foo";
7
…lines 8–12 unchanged (5 lines)
After
1// @module: commonjs
2// @target: es2015
3// @filename: foo.ts
4export const x = 3;
5export const y = 5;
6
7// @filename: bar.ts
8import * as foo from "./foo";
…lines 9–14 unchanged (6 lines)
Before
program
comment "// @filename: foo.ts"
export_statement
export "export"
lexical_declaration
const "const"
variable_declarator
identifier "x"
= "="
number "3"
; ";"
export_statement
export "export"
lexical_declaration
const "const"
variable_declarator
identifier "y"
= "="
number "5"
; ";"
comment "// @filename: bar.ts"
import_statement
import "import"
import_clausenamespace_import
* "*"
as "as"
identifier "foo"
from "from"
string
" "\""
string_fragment "./foo"
" "\""
; ";"
function_declaration (+28 nodes collapsed)
expression_statementcall_expression
identifier "f"
arguments
( "("
identifier "foo"
) ")"
; ";"
After
program
comment "// @module: commonjs"
comment "// @target: es2015"
comment "// @filename: foo.ts"
export_statement
export "export"
lexical_declaration
const "const"
variable_declarator
identifier "x"
= "="
number "3"
; ";"
export_statement
export "export"
lexical_declaration
const "const"
variable_declarator
identifier "y"
= "="
number "5"
; ";"
comment "// @filename: bar.ts"
import_statement
import "import"
import_clausenamespace_import
* "*"
as "as"
identifier "foo"
from "from"
string
" "\""
string_fragment "./foo"
" "\""
; ";"
function_declaration (+28 nodes collapsed)
expression_statementcall_expression
identifier "f"
arguments
( "("
identifier "foo"
) ")"
; ";"
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)