Presentation framework based on Markdown (with HTML support) to web-based slide.
- 📝 Markdown based - Write slides in Markdown with HTML support
- 🎨 Multiple Themes - Built-in themes: light, dark, dracula, ocean, rainbow
- 🔌 Plugin System - Extensible with plugins (progress bar, slide numbers, confetti, etc.)
- 🎭 Custom Backgrounds - Support for images, colors, and animations
- 🎪 Interactive Elements - Support for interactive content and animations
# Create a new project
npx mostage@latest init
# Start development server
npx mostage@latest dev
# Display help
npx mostage@latest help# Install CLI
npm install -g mostage
# Create a new project
mostage initNote: You can use the interactive command (just run
mostage initand follow the prompts), or provide options directly (e.g.,mostage init --template dracula --content content.md) to create presentations.
You can use these commands with npx mostage@latest <command>:
| Command | Description | Options |
|---|---|---|
mostage init |
Create a new presentation project | --template, --content |
mostage dev |
Start development server with live reload | --port, --host |
mostage build |
Build presentation for production | --output, --minify |
mostage theme |
Manage themes (list, add, remove) | --list, --add, --remove |
mostage plugin |
Manage plugins (list, add, remove) | --list, --add, --remove |
mostage help |
Show help and command information |
For detailed CLI documentation, see the CLI Commands section above.
Install Mostage as a dependency in your project:
npm install mostage@latestThen import and use it in your project:
import Mostage from "mostage";
//Use internal config or path of external config
const presentation = new Mostage("./config.json");
presentation.start();Or with CommonJS:
const Mostage = require("mostage");
const presentation = new Mostage("./config.json");
presentation.start();If you prefer not to use the CLI or npm package, you can set up Mostage manually:
- Create your project structure:
my-presentation/
├── index.html (With an internal configuration or an external configuration link)
├── content.md (slides)
└── config.json (Optional)
- Create
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My Presentation</title>
<link
rel="stylesheet"
href="https://unpkg.com/mostage@latest/dist/mostage.css"
/>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/mostage@latest/dist/index.js"></script>
<script>
//Use internal config or path of external config
const presentation = new Mostage({
element: "#app",
contentPath: "./content.md",
theme: "dark",
});
presentation.start();
</script>
</body>
</html>- Create
content.mdwith your content:
# Slide 1
Welcome to my presentation!
---
# Slide 2
This is the second slide.- Create
config.json(optional):
{
"theme": "light",
"scale": 1.2
}Mostage works with popular frameworks and build tools:
import React, { useEffect, useRef } from "react";
import Mostage from "mostage";
function Presentation() {
const containerRef = useRef(null);
useEffect(() => {
if (containerRef.current) {
const presentation = new Mostage({
element: containerRef.current,
contentPath: "./content.md",
theme: "dark",
});
presentation.start();
}
}, []);
return <div ref={containerRef} />;
}import { Component, ElementRef, OnInit, OnDestroy } from "@angular/core";
import Mostage from "mostage";
@Component({
selector: "app-presentation",
template: "<div></div>",
})
export class PresentationComponent implements OnInit, OnDestroy {
private mostage: any;
constructor(private elementRef: ElementRef) {}
ngOnInit() {
this.mostage = new Mostage({
element: this.elementRef.nativeElement,
theme: "dark",
contentPath: "./content.md",
});
this.mostage.start();
}
ngOnDestroy() {
if (this.mostage) {
this.mostage.destroy();
}
}
}Mostage is highly configurable through the config.json file. Here are the main configuration options:
{
"theme": "dark",
"scale": 1.2,
"urlHash": true
}{
"contentPath": "./content.md",
"centerContent": {
"vertical": true,
"horizontal": true
}
}{
"header": {
"content": "# My Presentation",
"position": "top-left",
"showOnFirstSlide": false
},
"footer": {
"content": "#### Presentation Framework",
"position": "bottom-left",
"showOnFirstSlide": true
}
}{
"background": [
{
"imagePath": "./background.jpg",
"size": "cover",
"position": "center",
"bgColor": "#000000",
"global": true
}
]
}{
"plugins": {
"ProgressBar": {
"enabled": true,
"position": "top",
"color": "#007acc"
},
"SlideNumber": {
"enabled": true,
"position": "bottom-right",
"format": "current/total"
},
"Controller": {
"enabled": true,
"position": "bottom-center"
},
"Confetti": {
"enabled": true,
"particleCount": 50
}
}
}light- Clean light themedark- Modern dark themedracula- Dracula color schemeocean- Ocean blue themerainbow- Colorful rainbow theme
- ProgressBar - Shows presentation progress
- SlideNumber - Displays current slide number
- Controller - Navigation controls
- Confetti - Celebration animations
For a complete configuration example, see Usage Examples.
For detailed usage examples and advanced configurations, see Usage Examples.
For complete API documentation, see API Reference.
For development guidelines, contribution instructions, and CI/CD pipeline information, see the Development Guide.
MIT License - see LICENSE file for details.