On this page ▾
Your first deck
1. Create the folder
node /path/to/slide.ng/bin/slide-ng.mjs create my-deck
cd my-deck
create copies a small template: slides.md, package.json with dev, build, export and format scripts, a README.md and a .gitignore. It refuses a folder that already has files, unless you pass --force, which adds only the missing files.
The template's package.json depends on the slide-ng package. Until the package is published, point it at your checkout, then install:
npm pkg set dependencies.slide-ng="file:/path/to/slide.ng"
npm install
2. Run it
npm run dev
Open http://localhost:4230. The page reloads when you save slides.md.
3. Read the starter deck
This is the starter repository's deck; create makes a shorter one. Press the right arrow or space to step through it, o for the overview.
Its source is short:
---
title: Welcome to slide.ng
theme: default
---
# Welcome to slide.ng
Slides in markdown, with Angular templates inside.
<!--
Speaker notes go in the last HTML comment of a slide.
-->
---
# Clicks
<div slide-ng-click>Appears on the first click</div>
<div slide-ng-click>Appears on the second click</div>
---
layout: two-cols
---
# Left
Text on the left, and Angular works too: {{ 1 + 2 }}.
::right::
# Right
```ts
const hello = (name: string) => `Hello ${name}`;
```
The first block of YAML is the headmatter: it describes the whole deck. Each later --- line starts a new slide, and a YAML block right after it is that slide's frontmatter. Syntax explains the rest.
4. Change something
Add a slide at the end of slides.md:
---
layout: fact
---
# 100%
of this slide is markdown
Save the file. The new slide appears in the dev server without a reload.
5. Build a site
npm run build
The result is a static site in dist/. Any web server can host it. See Hosting for base paths and hosts, and Export for PDF.