How to build a presentation app using JavaScript, NW.js, HTML/CSS

Build Deckspire, a desktop presentation app with slides, presenter mode, export notes, and packaging tips with JavaScript, NW.js, HTML/CSS.

  • Difficulty Intermediate
  • Parts 12
  • Stack JavaScript, NW.js, HTML/CSS

What you are building

Deckspire is a presentation app you assemble in twelve short stages. The teaching stack is NW.js (JavaScript, NW.js, HTML/CSS). By the end you should understand the shell, the data you persist, and the everyday workflows people expect from this kind of app.

NW.js runs Node and Chromium in one process—handy for a slide deck that needs both DOM and local files.

One slide per section element, fullscreen presenter mode, and keyboard nav teach structure without a SaaS deck tool.

Work in order. Early folders are intentionally small so you can see the window (or server) boot before features pile on. From the data-layer part onward, each snapshot should still run after you install dependencies.

How to use these lessons

Read the goal, clone the matching GitHub folder, run it, then skim the code against the notes below. If something fails, fix the run path first—most “bugs” on day one are the wrong directory or a skipped install.

Open the Deckspire GitHub repo →

Parts in order

Each chapter below is one checkpoint. Open a part when you are ready for that feature—not all at once.