slide.ng starter

A template for slide.ng: presentations written in markdown, with Angular template syntax inside. The deck in slides.md is a short tutorial. Read it, then replace it with your own talk.

Use as a template

On GitHub press Use this template (the repository must be marked as a template in Settings), or from a terminal:

npx degit slide-ng/starter my-talk
cd my-talk

(npx @slide-ng/core create my-talk makes a smaller deck without the tutorial.)

Run

You need Node 22.22.3 or newer.

npm install
npm run dev        # http://localhost:4230, reloads when you edit slides.md
npm run build      # static site in dist/
npm run export     # slides-export.pdf, needs Chromium (CHROME_PATH if not found)
npm run format     # tidies the markdown

What is in the folder

path	what it is
slides.md	the deck: headmatter, then one slide per ---
components/	your own Angular components, usable as tags in slides
setup/	main.ts lists the ng-icons icons the deck uses
snippets/	code files shown with <<< @/snippets/greeter.ts#greeter
pages/	slides in other markdown files, pulled in with src: ./pages/more-slides.md
public/	pictures and other files
tests/smoke.mjs	builds the deck and opens every slide in Chromium (npm test)
netlify.toml, vercel.json	hosting settings
.github/workflows/	deploy.yml (GitHub Pages) and export.yml (PDF artifact)

Syntax, themes, export options, offline mode and deployment are covered in the documentation at slide-ng.dev.

Upgrading a deck made with 1.x or 2.x

This starter uses @slide-ng/core 3.x. A talk started from an earlier copy of it moves up with:

npm install @slide-ng/core@^3.0.0

The tutorial deck needed no changes for 2.0. Your own slides might: read "Upgrading from 1.x" in the slide.ng changelog first. The changes most likely to show are:

• plain HTML attributes such as <div m="4"> or <table border="1"> are now read as utilities (unocss: { attributify: false } in the headmatter turns that off);
• slide-ng-click.hide now hides the element, so that slide has one more click;
• the screen stays awake while the deck is open (wakeLock: false turns it off);
• links to https:// addresses open in a new tab;
• an index.html next to slides.md becomes part of the page.

Version 2.0 also adds a progress bar (progressBar: true, used in this deck) and click animation presets (slide-ng-click.up, shown on the Clicks slide).

Version 2.1 adds navPosition to move the navigation bar (commented out in the headmatter of slides.md) and languages, to write one deck in several languages with a language menu in the bar. See the slide.ng changelog.

Version 2.2 adds Nav Bar Position to the settings menu, so a viewer can move the bar, and slide-ng.config.yaml: the keys of the headmatter in a file of their own next to slides.md (the headmatter wins when a key is in both). This deck keeps its options in the headmatter.

Version 3.0 adds the deck browser: b, or the globe button in the bar, opens a browser with tabs over the current slide, with search, bookmarks and a start page. With npm run dev, pages load through a local proxy, so most sites show inside the deck. browser in the headmatter sets it up (commented out in slides.md), and browser: false removes it. The bar can also be dragged by its grip to another place. Your own slides might notice a change:

• links to other sites on a slide open in the deck browser instead of a new tab (browser: { links: false } keeps the new tab; Cmd/Ctrl/Shift/Alt+click still opens one);
• b is a new key;
• in fullscreen, Chrome and Edge ask once to let the deck keep the Escape key, so Escape closes the deck browser first;
• npm run dev opens one more local port, for the proxy.

The tutorial deck has no links to other sites, so it shows the same on 3.0.

For the repository owner

Mark the repository as a template (Settings > Template repository). The workflows use npm ci with the committed package-lock.json; update it with npm install when you change the @slide-ng/core range in package.json.

The URLs in this file (github.com/slide-ng/...) are placeholders for the final repository locations.

Maintainers

Erkam Yaman Maintainer

Sponsors

This starter is free and open source. If it helps your work, please consider sponsoring it. Your support keeps development going.

License

MIT License © 2026 Erkam Yaman (LICENSE). The demo deck was modelled on the starter deck of Slidev (MIT, Anthony Fu and Slidev contributors); the licence text is in NOTICE.

Disclaimer

slide.ng is an independent open-source project. It is not affiliated with or endorsed by the Angular team or Google, or by Slidev. Angular is a trademark of Google LLC. Slidev is a project of its own maintainers. The names are used only to describe what slide.ng works with or is based on. This is a plain notice, not legal advice.