Skip to content
On this page

Examples

Default theme

html
<v-termynal forward-button restart-button lazy>
  <vt-input>pip install spacy</vt-input>
  <vt-progress />
  <vt-text>Successfully installed spacy</vt-text>
  <vt-text />
  <vt-input>python -m spacy download en</vt-input>
  <vt-progress />
  <vt-text>Installed model 'en'</vt-text>
  <vt-text />
  <vt-input>python</vt-input>
  <vt-input prompt=">>>">import spacy</vt-input>
  <vt-input prompt=">>>">nlp = spacy.load('en')</vt-input>
  <vt-input prompt=">>>">doc = nlp(u'Hello world')</vt-input>
  <vt-input prompt=">>>">print([(w.text, w.pos_) for w in doc])</vt-input>
  <vt-text>[('Hello', 'INTJ'), ('world', 'NOUN')]</vt-text>
</v-termynal>

Light theme

html
<v-termynal
  :type-delay="40"
  :line-delay="700"
  :start-delay="0"
  forward-button
  restart-button
>
  <vt-input prompt="">npm uninstall react</vt-input>
  <vt-text>Are you sure you want to uninstall 'react'?</vt-text>
  <vt-input prompt="(y/n)" :type-delay="1000">y</vt-input>
  <vt-progress progress-char="·" />
  <vt-text>Uninstalled 'react'</vt-text>
  <vt-input prompt="">node</vt-input>
  <vt-input prompt=">">Array(5).fill('🦄 ')</vt-input>
  <vt-text>['🦄', '🦄', '🦄', '🦄', '🦄']</vt-text>
  <vt-input prompt="">cd ~/repos</vt-input>
  <vt-input prompt="▲  ~/repos">git checkout branch master</vt-input>
  <vt-input prompt="▲  ~/repos (master)">git commit -m "Fix things"</vt-input>
</v-termynal>
css
:root {
  --vt-color-bg: #ddd;
  --vt-color-text: #1a1e24;
  --vt-color-text-subtle: #d76d77;
  --vt-color-btn: #881823;
  --vt-color-btn-hover: #460c12;
}

Text elements as explanations

html
<v-termynal forward-button restart-button>
  <vt-text class="comment">💬 Go to the home directory</vt-text>
  <vt-input>cd</vt-input>
  <vt-text class="comment">💬 Create a directory for all your code projects</vt-text>
  <vt-input>mkdir code</vt-input>
  <vt-text class="comment">💬 Enter into that code directory</vt-text>
  <vt-input>cd code</vt-input>
  <vt-text class="comment">💬 Create a directory for this project</vt-text>
  <vt-input>mkdir sqlmodel-tutorial</vt-input>
  <vt-text class="comment">💬 Enter into that directory</vt-text>
  <vt-input>cd sqlmodel-tutorial</vt-input>
</v-termynal>
css
.comment {
  color: #4a968f;
  font-style: italic;
}

Spinners

Frame delay is the default (80 ms) where not specified.

dots (default)
dots2
dots3
dots4
line (frame-delay: 130)
line2 (frame-delay: 100)
simpleDots (frame-delay: 400)
simpleDotsScrolling (frame-delay: 200)
bounce (frame-delay: 120)
arc (frame-delay: 100)
circleQuarters (frame-delay: 180)
bouncingBar
bouncingBall
clock (frame-delay: 100)
christmas (frame-delay: 400)
point (frame-delay: 125)
aesthetic