Visual component editor
Last updated 2 years ago by jxnblk .
MIT · Original npm · Tarball · package.json
$ cnpm install ctrl-ui 
SYNC missed versions from official npm registry.


Vim-inspired visual editor for JSX element trees

npm i -g ctrl-ui
ctrl hello.jsx


ctrl-ui 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.

Current Tags

  • 0.0.8                                ...           latest (2 years ago)

2 Versions

  • 0.0.8                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (30)
Dev Dependencies (7)
Dependents (0)

Copyright 2014 - 2017 © taobao.org |