JankariTech · PrajwolAmatya · Nov 21, 2025 · Oct 15, 2025 · Oct 27, 2025 · Oct 28, 2025
diff --git a/README.md b/README.md
@@ -50,6 +50,215 @@ This app has the following default slide separators:
 - Horizontal separator: `---` (`← →`)
 - Vertical separator: `--` (`↓ ↑`)
 
+## Using Templates
+
+To use the templates in the presentation viewer, use the front matter to provide default metadata followed by slide
+contents.
+
+The front matter is used to define the default values for the presentation and will be applied to every slides. The
+default metadata can be defined as below:
+
+```markdown
+---
+slide: <default-slide-type>
+presenter: <name-of-the-presenter>
+logo: <path-to-logo>
+color: <font-color-for-slide-title>
+footer: <footer-content>
+aboutUs: <content-for-about-us-slide>
+---
+```
+
+These are the supported metadata required for the presentation template.
+
+| Default Metadata | Description                                                                                                                                                |
+|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `slide`          | Default slide for presentation. Most used slide template can be given in the default metadata.                                                             |
+| `presenter`      | Name of the presenter.                                                                                                                                     |
+| `logo`           | Logo of the company. Logo appears on the top right corner of the slide                                                                                     |
+| `color`          | Font color of the slide title.                                                                                                                             |
+| `footer`         | Content to be shown in the footer of the slide.                                                                                                            |
+| `aboutUs`        | Column wise content to be shown in the about-us slide. Use this metadata only if about-us slide is used for the presentation. More [here](#slide-about-us) |
+
+Following the front matter, create slides as described in [Creating Presentation](#creating-presentation)
+
+Besides default metadata, you can also provide inline metadata for each slide. This will be useful when you want to
+override the default metadata for a specific slide and this will be applied to that slide only. The inline metadata can
+be defined by adding metadata directly on the slide title as below:
+
+```markdown
+# Title of the slide ::metadata_key_1:metadata_value_1 ::metadata_key_2:metadata_value_2
+```
+
+Example:
+```markdown
+# Title of slide ::slide:title-content-image ::logo:logo.png
+```
+
+For this slide, the `slide` template will be set to `title-content-image`, and the `logo` will be set to `logo.png`.
+
+### Slide Templates
+
+The slide template should be provided in the default metadata. Provide slide template that will be mostly used in the
+default metadata, so you don't need to add the slide metadata in every slide.
+
+| Slide Template        | Desctiption                                                     | Usage                         |
+|-----------------------|-----------------------------------------------------------------|-------------------------------|
+| `cover`               | This slide template can be used for cover slide                 | `::slide:cover`               |
+| `title-content`       | The slide with title and content (content can be image as well) | `::slide:title-content`       |
+| `title-content-image` | The slide with title, and content in left and image in right    | `::slide:title-content-image` |
+| `about-us`            | The slide with company info (e.g., Values, mission, Vision)     | `::slide:about-us`            |
+
+#### Slide "Cover"
+
+Preview:
+
+```text
+┌────────────────────────────────────────────────────┐
+│                                                    │
+│                                                    │
+│                      LOGO                          │
+│                      TITLE                         │
+│                   PRESENTER NAME                   │
+│                                                    │
+│                                                    │
+├────────────────────────────────────────────────────┤
+│                                              LOGO  │
+└────────────────────────────────────────────────────┘
+```
+
+Code:
+
+```markdown
+# TITLE ::slide:cover
+```
+
+#### Slide "title-content"
+
+Preview:
+
+```text
+┌────────────────────────────────────────────────────┐
+│ TITLE                                        LOGO  │
+├────────────────────────────────────────────────────┤
+│                                                    │
+│                                                    │
+│ CONTENT                                            │
+│                                                    │
+│                                                    │
+├────────────────────────────────────────────────────┤
+│  FOOTER                                     PAGENR │
+└────────────────────────────────────────────────────┘
+```
+
+Code:
+
+```markdown
+# TITLE ::slide:title-content
+
+CONTENT
+```
+
+Image can also be included in the content of the slide.
+
+Preview:
+
+```text
+┌────────────────────────────────────────────────────┐
+│ TITLE                                        LOGO  │
+├────────────────────────────────────────────────────┤
+│ CONTENT                                            │
+├────────────────────────────────────────────────────┤
+│                                                    │
+│                       IMAGE                        │
+│                                                    │
+├────────────────────────────────────────────────────┤
+│  FOOTER                                    PAGENR  │
+└────────────────────────────────────────────────────┘
+```
+
+Code:
+
+```markdown
+# TITLE ::slide:title-image
+
+CONTENT
+
+![This is image description](./image.png)
+```
+
+#### Slide "title-content-image"
+
+Preview:
+
+```text
+┌────────────────────────────────────────────────────┐
+│ TITLE                                         LOGO │
+├──────────────────────────┬─────────────────────────┤
+│                          │                         │
+│                          │                         │
+│  CONTENT                 │          IMAGE          │
+│                          │                         │
+│                          │                         │
+├──────────────────────────┴─────────────────────────┤
+│  FOOTER                                     PAGENR │
+└────────────────────────────────────────────────────┘
+```
+
+Code:
+
+```markdown
+# TITLE ::slide:title-content-image
+
+CONTENT
+
+![This is image description](image.png)
+```
+
+#### Slide "about-us"
+
+Preview:
+
+```text
+┌────────────────────────────────────────────────────┐
+│ TITLE                                         LOGO │
+├────────────────────────────────────────────────────┤
+│                                                    │
+│   ┌────────────────────────────────────────────┐   │
+│   │                CONTENT                     │   │
+│   └────────────────────────────────────────────┘   │
+│   ┌────────┐    │    ┌────────┐   │   ┌────────┐   │
+│   │ TITLE  │    │    │ TITLE  │   │   │ TITLE  │   │
+│   │ TEXT   │    │    │ TEXT   │   │   │ TEXT   │   │
+│   └────────┘    │    └────────┘   │   └────────┘   │
+│                                                    │
+├────────────────────────────────────────────────────┤
+│  FOOTER                                    PAGENR  │
+└────────────────────────────────────────────────────┘
+```
+
+Code:
+
+```markdown
+# TITLE ::slide:about-us
+
+CONTENT
+```
+
+The `title` and `text` can be provided via default metadat in front matter as:
+
+```markdown
+---
+aboutUs:
+  - title: Title 1
+    text: Some text under title 1
+  - title: Title 2
+    text: Some text under title 2
+  - title: Title 3
+    text: Some text under title 3
+---
+```
+
 ## Development
 
 > [!IMPORTANT] When switching between OpenCloud and oCIS, make sure to clean the browser cache!

diff --git a/public/templates/about-us-template.html b/public/templates/about-us-template.html
@@ -0,0 +1,40 @@
+<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="title">
+<h1>
+
+{{{ title }}}
+
+</h1>
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+<div class="about-us-text">
+
+{{{ content }}}
+
+</div>
+<div class="info-section">
+
+{{#metadata.aboutUs}}
+<div class="info-box">
+<h3>{{ title }}</h3>
+<p>{{ text }}</p>
+</div>
+<div class="divider"></div>
+{{/metadata.aboutUs}}
+
+</div>
+
+</div>
+</div>
+</div>
+<footer>
+<div class="footer-content">{{{ metadata.footer }}}</div>
+<div class="custom-slide-number"></div>
+</footer>
+</script>
diff --git a/public/templates/cover-template.html b/public/templates/cover-template.html
@@ -0,0 +1,16 @@
+<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+
+<div class="content">
+<h1>{{{ title }}}</h1>
+
+<p>
+By: {{{ metadata.presenter }}}
+</p>
+
+</div>
+</div>
+</script>
diff --git a/public/templates/title-content-image-template.html b/public/templates/title-content-image-template.html
@@ -0,0 +1,26 @@
+<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="title">
+<h1>
+
+{{{ title }}}
+
+</h1>
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+
+{{{ content }}}
+
+</div>
+</div>
+</div>
+<footer>
+<div class="footer-content">{{{ metadata.footer }}}</div>
+<div class="custom-slide-number"></div>
+</footer>
+</script>
diff --git a/public/templates/title-content-template.html b/public/templates/title-content-template.html
@@ -0,0 +1,26 @@
+<script type="x-tmpl-mustache">
+<div class="content-container">
+<div class="title">
+<h1>
+
+{{{ title }}}
+
+</h1>
+<div class="logo">
+<img src="{{{ metadata.logo }}}" alt="Logo">
+</div>
+</div>
+
+<div class="content-wrapper">
+<div class="content">
+
+{{{ content }}}
+
+</div>
+</div>
+</div>
+<footer>
+<div class="footer-content">{{{ metadata.footer }}}</div>
+<div class="custom-slide-number"></div>
+</footer>
+</script>