vx0

Vim-inspired visual editor for JSX element trees

npm i -g vx0

vx0 hello.jsx

Modes

Vx0 uses several different modes for editing element trees.

• normal (cyan)
• visual (magenta)
• insert (yellow)
• edit props (blue)

Keyboard shortcuts

Keyboard shortcuts work differently depending on mode. The current mode will be indicated by the color of the command bar at the bottom and the color of the outline cursor around the current element.

Normal mode

• j: move cursor down
• k: move cursor up
• space: enter visual mode
• i: enter insert mode
• e: enter edit props mode
• esc: exit to normal mode
• y: yank
• d: delete
• p: paste after
• P: paste before
• u: undo
• ctrl+r: redo
• a: add component
• e: edit props
• c: edit color prop
• b: edit background-color prop
• f: edit font-size prop

Visual mode

Visual mode currently allows elements to be moved up and down.

• j: shift element down
• k: shift element up

Insert mode

Insert mode allows for editing text content. To commit changes, press the esc key.

Edit props mode

Invoking edit props mode will focus the command bar at the bottom. First, type the prop name to edit and press return. Then, type in a value to set the prop and press return.