Contents

Vivpage Reference

Modes

Like Vi the text editor, Vivpage comes with several different modes of operation that you can switch to from Normal Mode by pressing a specific key:

Normal Mode esc (from other modes)
Command Mode :
Insert Mode a / i / A / I / #
Move Mode M
HTML Edit Mode e
Text Mode t / T
Search Mode ? / /
Replace Mode %
Preview Mode v
Library Mode L

The UI of each mode occupies the lower part of the screen. A label at the top-left corner of the UI tells you which mode the editor is in.

Normal Mode

Normal Mode is the default mode of the editor. Pressing esc in any other mode always brings the editor back to Normal Mode.

Operations you can perform in Normal Mode:

Navigation
Multi Selection
Element Insertion
Element Deletion
Element Copy/Paste
Undo/Redo
Mode Switching
Miscellaneous

If you press esc while the editor is already in Normal Mode, it does a couple things:

Deselects all elements except for one
Resets the input state (if you mess up a command sequence)

Navigation

The current selected item(s) are highlighted with a dark dashed outline that we call a selector. You can move the selector(s) by using the same keys as Vi's cursor navigation keys hjkl, or the arrow keys.

You can move a selector:

to previous sibling element h / ←
to next sibling element l / →
to parent element k / ↑
into the next sibling element j / ↓
to Nth sibling before current selected number, (h / ←)
to Nth sibling after current selected number, (l / →)
to Nth ancestor element number, (k / ↑)
to Nth descendant element along first childs number, (j / ↓)
to root element r
to first element g, g
to last element G
to first sibling 0 / ^
to last sibling $

If there are multiple selectors, the navigational sequence will move all of them in the same direction simultaneously.

Quick Navigation

Press f to enable quick navigation. You should see a gray overlay with numbers on them. To navigate the selector to a specific child element, press its corresponding number, followed by f. You can quickly drill down to a specific element deep in the DOM tree by repeatedly pressing a number followed by f. To turn off quick navigation, simply press f again.

Mark and Select

To mark an element, press m, followed by an alphabet, E.g m, x. To select a previously marked element, press `, followed by the alphabet used to mark said element. E.g `, x. You can mark up to 26 elements this way.

Scrolling

Scroll up alt + ↑
Scroll down alt + ↓

Multi Selection

Select from first sibling to previous sibling c, (0 / ^)
Select from current selected to last sibling c, $
Select children of current selected c, c
Select N elements starting from current selected number, C
Add previous sibling to current selection shift + ←
Add next sibling to current selection shift + →
Deselect all elements except for one esc

Element Insertion

You can insert a new element from one of two modes: Insert Mode, and Command Mode. In Normal Mode, pressing any one of aiAI# keys will take the editor to Insert Mode, in one of the following submodes:

Insert immediately before current selected i
Insert immediately after current selected a
Insert as first child of current selected I
Insert as last child of current selected A
Insert as parent of current selected #

To actually insert a new element, you have to type in an insertion command.

Element Deletion

Delete current selected and their children x
Delete children of current selected d, c
Delete current selected and all of its siblings d, d
Delete siblings before current selected d, (b / 0 / ^)
Delete current selected and siblings thereafter d, (e / $)
Delete only current selected, leaving their children intact: d, t

Element Copy/Paste

Copy current selected Y
Copy N elements starting from current selected number, Y
Copy children of current selected y, (c / y)
Copy from first sibling to previous sibling y, (0 / ^)
Copy from current selected to last sibling c, $
Copy current selected sans their children y, t
Paste copied element(s) after current selected p
Paste copied element(s) into current selected P
Paste copied element(s) N times after current selected number, p
Paste copied element(s) N times into current selected number, P

Element Split/Join

To split an element into two or more, select the child that will serve as the splitting point, then press ctrl + s.
To join two consecutive elements together, select the first of the two, then press J. The two elements must be of the same type. The merged element will inherit the properties of the first element.
To join N consecutive elements together, select the first of the elements, then press number, J.

Undo/Redo

Undo once u
Redo once ctrl + r
Undo N times number, u
Redo N times number, ctrl + r

Miscellaneous

Draft Modes Pressing ~ will cycle the editor through 3 different draft modes:
- Mode 1: Selector is not visible
- Mode 2: Selector is visible, and siblings of selected are also outlined
- Mode 3: Selector is visible, and all elements are outlined.

Mode 2 is the default.

Command Mode

Types of operations available:

Element Insertion
Query-based Selection
External File Load/Unload
CSS Framework Support
Save/Load Page
HTML Export
Attributes Manipulation
Classes Manipulation
Styles Manipulation
Properties-only Copy/Paste

In future, auto-suggest and auto-complete will be provided.

Element Insertion

See Insertion Command for instructions on how to write an insertion command. In Command Mode, an insertion command must include the position specifier.

Examples

To insert a level 1 heading as first child of current selected:
```
^h1 "Hello World"
```
To insert a footer as last child of current selected:
```
$footer
```
To insert an img just before current selected:
```
<img -a href="/cat.jpg"
```

To insert a p just after current selected:

>p -c "lead" "Our technology is the best."

To insert a div as parent of current selected:
```
#div -c "container"
```

Query-based Selection

We can use CSS Selector queries to quickly select one or more elements that match our query:

q[a][g] [CSS selector query]

a is a modifier that tells the editor to find all matching elements. Without it, the editor finds only the first one that matches the query.
g is a modifier that tells the editor to start searching from the root element. Without it, the editor only searches within the selected elements.

External File Load/Unload

To load an external CSS file, use the lcss command:
```
lcss [id] [source]
```
To load an external font file, use the lfont command:
```
lfont [id] [source]
```
To load an external js file, use the ljs command:
```
ljs [id] [source]
```
To see what files have been loaded, use the files command:
```
files
```
To unload a file or multiple files, use the u command:
```
u [id1] [id2] ...
```

Examples

To load Bootstrap CSS:

lcss bootstrap https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css

To load a font file from Google:

lfont roboto https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap

To unload a resource with the id uikit:

u uikit

CSS Framework Support

If you regularly use either Bootstrap, UIkit, or Tailwind CSS, you can use the lf command.

lf [bootstrap|tailwind|uikit]

This way, you do not have to specify the source.

Save/Load page

To save current page into localStorage, use the w command. Example:
```
w landing-page
```
If a page was previously saved, you may omit the name.
To load a page from localStorage, use the e command. Example:
```
e landing-page
```
To see what pages have been saved into localStorage, use the pages command.
```
pages
```
To see the name of the page, use the name command:
```
name
```
To change the title of the page, use the title command:
```
title "Welcome to Acme Co!"
```
If the title is ommitted, it prints the current title instead.

HTML Export

To export the current page as an html file, use the export command:

export

In future, we plan to integrate with Github/Google Drive.

Attributes Manipulation

To see the list of attributes of current selected, use the a command:
```
a
```
To add/modify attributes:
```
a attrib1="value1" attrib2="value2" ...
```
To remove attributes:
```
-a attrib1 attrib2 ...
```
To disable an attribute (but not remove it):
```
da attrib1 attrib2 ...
```
To enable an attribute that is previously disabled:
```
ea attrib1 attrib2 ...
```
To toggle enabling/disabling attributes:
```
ta attrib1 attrib2 ...
```

In future, auto-suggest and auto-complete will be provided.

Classes Manipulation

To see the list of classes of current selected, use the c command:
```
c
```
To add classes:
```
c class1 class2 ...
```
To remove classes:
```
-c class1 class2 ...
```
To toggle classes:
```
tc class1 class2 ...
```

In future, auto-suggest and auto-complete will be provided.

Styles Manipulation

To see the list of styles of current selected, use the s command:
```
s
```
To add/modify styles:
```
s style1:"value1"; style2:"value2" ...
```
To remove styles:
```
-s style1 style2 ...
```
To disable a style (but not remove it):
```
ds style1 style2 ...
```
To enable a style that is previously disabled:
```
es style1 style2 ...
```
To toggle enabling/disabling styles:
```
ts style1 style2 ...
```

In future, auto-suggest and auto-complete will be provided.

Properties-only Copy/Paste

To copy attributes/classes/styles, use the y command:
```
y[a|c|s]
```
For example, to copy both attributes and style of current selected:
```
yas
```
To merge the copied properties into current selected:
```
p
```
To overwrite properties of the current selected with copied properties:
```
P
```

Insert Mode

Insert at the Beginning
Prepend before Current Selected
Append after Current Selected
Insert at the End
Wrap Insert

Insertion Command

Once you're in Insert Mode, you can insert elements by typing insertion commands. An insertion command looks like this:

[pos][tag] [[-a] attributes...] [[-c] classes...] [[-s] styles...] [text]

pos is a position specifier, which can be one of ^, $, <, >, and #, to indicate insert as first child of, insert as last child of, insert just before, insert just after, and insert as parent of respectively, in relation to current selected element. pos is required in Command Mode, and optional in Insert Mode.
tag is the html tag of the element you wish to insert, e.g div and img. It is required in both Command Mode and Insert Mode. To insert a text node instead, use t, or text.
attributes are quote-enclosed, space-separated key-value pairs, like this: 'attrib1="value1" attrib2="value2" ...'
classes are quote-enclosed, space-separated list of class names, like this: 'class1 class2 ...'
styles are quote-enclosed, semicolon-separated key-value pairs, like this: 'style1: "value1"; style2: "value2"; ...'
text is a quote-enclosed string that goes into the element.

Examples

To insert a level 1 heading sans any properties:
```
h1 "Welcome to the Future"
```
You can also ditch the quotes:
```
h1 Welcome to the Future
```
To insert an image of a cat with the title "A big cat":
```
img -a 'src="/cat.jpg" title="A big cat"'
```
If there is only one attribute, you can ditch the enclosing quotes:
```
img -a src="/cat.jpg"
```
To insert a button with the classes btn and btn-primary:
```
button -c "btn btn-primary"
```
Again, quotes are optional when there is only one class.
To insert a div with the styles max-width and position set, and the sentence "Let's Work Together":
```
div -s "max-width: 50%; position: relative" "Let's Work Together"
```
You can use all of the flags:
```
a -a href="#" -s "color: green; font-size: 3rem" -c "mx-auto" "Sign Up"
```
This command would give us: <a href="#" style="color: green; font-size: 3rem" class="mx-auto">Sign Up</a>

Differences Between Insert Mode and Command Mode

Insert Mode

In Insert Mode, the tag is required, the rest are optional.

After an insertion command is executed:

in submodes a and i, the new elements are selected.
in submodes A and I, selection does not change. This allows us to repeatedly insert new elements into a specific element without moving the selector between insertions.

Command Mode

In Command Mode, both pos and tag are required, and the rest are optional.
Once an insertion command is executed, the new element(s) are always selected.

Move Mode

When one or more element(s) are selected, pressing M takes the editor to Move Mode.

To move the selected element(s):

to just before their previous sibling h / ←
to just after their next sibling l / →
to just before their parent k / ↑
into their next sibling j / ↓
to just before their first sibling ^ / 0
to just after their last sibling $

HTML Edit Mode

With one element selected, pressing e takes the editor to HTML Edit Mode. In this mode, the selected element's HTML code presents itself, and you may edit the code directly. When you're done, pressing esc saves it and takes you back to Normal Mode.

Text Mode

In Normal Mode, pressing t causes the editor to select the text node(s) nearest to current selected, and transitions to Text Mode. If no text node is found, the operation is canceled.

Pressing T instead adds a new text node into current selected, and transitions the editor to Text Mode.

If multiple elements are selected, then the operation applies to all of them simultaneously, i.e all of the selected text nodes will receive the same text.

Text Node Splitting

To split a text node into two or more text nodes, either move the caret to the desired split point, or highlight the part of the text you wish to split from the adjacent text, then press ctrl + s.

To rejoin two text nodes, you must switch to Normal Mode first. Select the first of two text nodes, then press J to join them together.

Search Mode

Pressing ? or / takes the editor to Search Mode, where you can type a keyword or a regular expression to look for. The editor restricts its search to only amongst text nodes.

Feature is currently in development.

Replace Mode

Pressing % takes the editor to Replace Mode.

Feature is currently in development.

Preview Mode

Pressing v takes the editor to Preview Mode, where you can cycle between different screen sizes using the numeric keys. In this manner, you can easily inspect the responsive layout behavior of your page.

Feature is currently in development.

Library Mode

This mode provides a library of commonly used components that you can easily bring into your page.

Feature is currently in development.