npm install -g nodeppt


 # create a new slide with an official template
$ nodeppt new

# create a new slide straight from a github template
$ nodeppt new -t username/repo

# start local sever show slide
$ nodeppt serve

# to build a slide
$ nodeppt build

Demo Contents

  • Keyboard Shortcuts
  • CSS Syntax
  • Background
  • Animation
  • Content Position
  • Quotes
  • Plugins: echarts/mermaid/ketax
  • Others: Button/Table..
  • Speaker mode..

Keyboard Shortcuts

  • Page: ↑/↓/←/→ Space Home End
  • Fullscreen: F
  • Overview: -/+
  • Speaker Note: N
  • Grid Background: Enter

Note here

CSS Syntax

WebSlides is so easy to understand and love. Baseline: 8.

  • Typography: .text-landing, .text-subtitle, .text-data, .text-intro...
  • BG Colors: .bg-primary, .bg-blue,.bg-apple...
  • BG Images: .background, .background-center-bottom...
  • Sizes: .size-50, .size-40...
  • Component: card, flexblock, gallery...
  • Animation: autoplay, animate.css...

Text Classes




Create a simple web presence.


POWERED BY #WEBSLIDES .text-subtitle


Create a simple web presence.






Why WebSlides? .text-context

WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.

.text-cols (2 columns)

Why WebSlides? There are excellent presentation tools out there. WebSlides is about sharing content, essential features, and clean markup. Each parent <slide> in the #webslides element is an individual slide.

WebSlides help you build a culture of innovation and excellence. When you're really passionate about your job, you can change the world. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste.

  • Call us at 555.345.6789

  • @username

  • Send us an email



  • Horizontal .bg-gradient-h
  • Radial .bg-gradient-r
  • Vertical .bg-gradient-v

Vertical Gradient


Radial Gradient



WebSlides is the easiest way to make HTML presentations. Inspire and engage.

BG Video with Overlay

<slide class="bg-blue aligncenter" video=" poster='' .dark"> or .light

Youtube Background

<slide youtube=".dark id='_m67JbGjWnc' autoplay loop">


  • Ultra-Fast WiFi

    Simple and secure file sharing.

  • All day battery life

    Your battery worries may be over.

  • All day battery life

    We'll fix it or if we can't, we'll replace it.




  • We're web people.

    There're excellent presentation tools out there. WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

  • Work better, faster.

    Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.


Unsplash is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great.

  • Role: Frontend
  • client: Acme
  • year: 2018


Bonsai is a Japanese art form using trees grown in containers — .fullscreen > .card-50.

Similar practices exist in other cultures, including the Chinese tradition of penjing from which the art originated, and the miniature living landscapes of Vietnamese hòn non bộ.

Flexible blocks

:::flexblock = Flexible blocks with auto-fill and equal height.


  • Purpose

    Businesses that people love5

  • Purpose

    Businesses that people love6

  • Purpose

    Businesses that people love7

  • Purpose

    Businesses that people love8

Flexblock {.blink.border}


Watch TV shows anytime, anywhere

Grid Columns


Design for growth. We've built a team of world-class designers, developers, and managers.


We connect your audience needs, business goals, and brand values into a strategy.


We offer personalized services with deep expertise in design and technology.


We train teams to help organizations succeed in the digital age.


Autoplay Animation


animate.css + .build

  1. fadeIn
  2. swing
  3. flash
  4. pulse
  5. shake
  6. bounceIn
  7. wobble
  8. fadeInLeft
  9. flipInX
  10. tada
  11. slideInUp
  12. jello
  13. heartBeat
  14. fadeInUp
  15. lightSpeedIn


Content Position

1/9 left top

Put content wherever you want. Have less. Do more. Create beautiful solutions.

.slide-top and .content-left

2/9 center top

In a village of La Mancha, the name of which I have no desire to call to mind,

.slide-top and .content-center

3/9 right top

there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.

.slide-top and .content-right

4/9 left top

An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,


5/9 center top

lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.


6/9 right top

he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,


7/9 left bottom

while on week-days he made a brave figure in his best homespun.

.slide-bottom and .content-left

8/9 center bottom

He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,

.slide-bottom and .content-center

9/9 right bottom

who used to saddle the hack as well as handle the bill-hook.

.slide-bottom and .content-right


We're working to protect up to a million acres of sustainable forest.


What is Stendhal Syndrome?

Beauty overdose. .text-pull-right

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

Psychiatrists have long debated whether it really exists.

The syndrome is not only associated with viewing a beautiful place, but also good art.

The beauty of Italian art has a concentrated perfection and transcendent sensuality that is incredibly addictive.

Header (logo) .alignright

Simple CSS Alignments

Put content wherever you want.

Prismjs for Code Highlight

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides , by Jenn Schiffer ::)

<article id="webslides">
  <!-- Slide 1 -->
    <h1>Design for trust</h1>
  <!-- Slide 2 -->
  <section class="bg-primary">
    <div class="wrap">
      <h2>.wrap = container (width: 90%) with fadein</h2>

Vertical sliding? <article id="webslides" class="vertical">

Optional · 500+ icons

Font Awesome as SVG icons



I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers. Zaha Hadid

"There is something only a CEO uniquely can do, which is set that tone, which can then capture the soul of the collective." Satya Nadella, CEO of Microsoft.

“WebSlides helped us build a culture of innovation and excellence.” Leonardo da Vinci



Plugins:: mermaid

Basic sequence diagram

    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?

Message to self in loop

    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    Note right of John: Rational thoughts
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!


       dateFormat  YYYY-MM-DD
       title Adding GANTT diagram functionality to mermaid

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

Flowchart support for fontawesome

graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->E(A fa:fa-camera-retro perhaps?);

Plugins:: KaTex


B=0\nabla \cdot \vec{\mathbf{B}} = 0divergence of B\vec{\mathbf{B}} is zero
×E+1cBt=0\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}curl of E\vec{\mathbf{E}} is proportional to the rate of change of B\vec{\mathbf{B}}
×B1cEt=4πcjE=4πρ\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rhowha?



(80, 72, 64, 56, 48, and 40).


  • Niubility!
  • WebSlides
  • Webpack build in
  • Markdown-it
  • Posthtml
  • Prismjs


git statusgit statusgit status
git diffgit diffgit diff
git statusgit statusgit status

Speaker Mode

Click Url + ?mode=speaker to show Speaker Mode.

U work so hard, but 干不过 write PPTs

快使用 nodeppt 轻松搞定高大上 PPT
nodeppt 助力你的人生逆袭之路!