Skip to main content

YTML Templates

Drop any of these into a .ytml file and run:

ytml -i my-video.ytml -o output.mp4 --use-gtts

Hello World​

The simplest possible YTML video — a title slide, a content slide, and a call-to-action.

<ytml>
  <config>
    FRAME_RATE=30
    VIDEO_WIDTH=1920
    VIDEO_HEIGHT=1088
    ENABLE_AI_VOICE=False
  </config>

  <segment>
    <frame duration="4s">
      <div style="display:flex;justify-content:center;align-items:center;
                  height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);
                  font-family:'Segoe UI',sans-serif;">
        <div style="text-align:center;color:#fff;">
          <h1 style="font-size:4em;margin:0;animation:fadeUp 1.2s ease-out;">Hello, World!</h1>
          <p style="font-size:1.6em;margin-top:16px;color:#e2a428;animation:fadeUp 1.8s ease-out;">
            Built with YTML
          </p>
        </div>
      </div>
      <style>
        @keyframes fadeUp {
          from { opacity:0; transform:translateY(30px); }
          to   { opacity:1; transform:translateY(0); }
        }
      </style>
    </frame>
    <voice start="0.5s" end="4s">Hello, World! This video was generated from code.</voice>
  </segment>
</ytml>

Channel Intro​

A polished branded intro with a logo area, tagline, and transition.

<ytml>
  <config>FRAME_RATE=30 VIDEO_WIDTH=1920 VIDEO_HEIGHT=1088 ENABLE_AI_VOICE=False</config>

  <!-- Reusable branding strip -->
  <template id="branding">
    <div style="position:absolute;bottom:0;width:100%;padding:16px 40px;
                background:rgba(0,0,0,0.6);display:flex;align-items:center;gap:16px;">
      <span style="font-size:1.1em;color:#e2a428;font-weight:700;">MY CHANNEL</span>
      <span style="color:#666;">|</span>
      <span style="font-size:0.9em;color:#aaa;">New videos every week</span>
    </div>
  </template>

  <segment>
    <frame duration="5s">
      <div style="position:relative;height:100vh;overflow:hidden;
                  background:linear-gradient(135deg,#0a0a14,#1a1a2e);
                  display:flex;align-items:center;justify-content:center;
                  font-family:'Segoe UI',sans-serif;">
        <div style="text-align:center;color:#fff;">
          <h1 style="font-size:4.5em;margin:0;animation:zoomIn 1s ease-out;">Welcome</h1>
          <p style="font-size:1.5em;color:#e2a428;margin-top:12px;">to my channel</p>
        </div>
        <use template="branding" />
      </div>
      <style>
        @keyframes zoomIn {
          from { opacity:0; transform:scale(0.8); }
          to   { opacity:1; transform:scale(1); }
        }
      </style>
    </frame>
    <voice start="0.5s" end="5s">Welcome! I create videos about software, design, and building things that matter.</voice>
  </segment>

  <transition type="fade" duration="0.5s" />

  <segment>
    <frame duration="4s">
      <div style="height:100vh;background:#0f0f0f;display:flex;align-items:center;
                  justify-content:center;font-family:'Segoe UI',sans-serif;">
        <div style="text-align:center;color:#fff;">
          <h2 style="font-size:2.5em;color:#e2a428;">Don't forget to subscribe</h2>
          <p style="font-size:1.2em;color:#aaa;margin-top:12px;">
            Hit the bell so you never miss an upload.
          </p>
        </div>
      </div>
    </frame>
    <voice start="0.5s" end="4s">If you enjoy this content, subscribe and hit the bell — it really helps the channel.</voice>
  </segment>
</ytml>

Code Tutorial​

Slides with syntax-highlighted code blocks, perfect for dev tutorials.

<ytml>
  <config>FRAME_RATE=30 VIDEO_WIDTH=1920 VIDEO_HEIGHT=1088 ENABLE_AI_VOICE=False</config>

  <segment>
    <frame duration="5s" static="true">
      <div style="height:100vh;background:#1e1e2e;display:flex;
                  align-items:center;justify-content:center;
                  font-family:'Segoe UI',sans-serif;padding:60px;">
        <div style="max-width:1100px;width:100%;">
          <h2 style="color:#89b4fa;font-size:2em;margin-bottom:20px;">
            Topic title
          </h2>
          <code>
            <pre class="language-javascript">
// Your code here
function greet(name) {
  return `Hello, ${name}!`;
}
            </pre>
          </code>
        </div>
      </div>
    </frame>
    <voice start="0.5s" end="5s">Let me walk you through this function step by step.</voice>
  </segment>
</ytml>

Architecture Explainer (Mermaid)​

Embed auto-rendered diagrams directly in your slides.

<ytml>
  <config>FRAME_RATE=30 VIDEO_WIDTH=1920 VIDEO_HEIGHT=1088 ENABLE_AI_VOICE=False</config>

  <segment>
    <frame duration="6s" static="true">
      <div style="height:100vh;background:#0f0f23;display:flex;
                  flex-direction:column;align-items:center;justify-content:center;
                  font-family:'Segoe UI',sans-serif;padding:40px;">
        <h2 style="color:#89b4fa;font-size:2em;margin-bottom:30px;">System Overview</h2>
        <mermaid>
          graph LR
            Client --> API_Gateway
            API_Gateway --> AuthService
            API_Gateway --> DataService
            DataService --> Database[(DB)]
        </mermaid>
      </div>
    </frame>
    <voice start="0.5s" end="6s">
      Here's the system overview. Requests come through an API Gateway,
      which routes to the auth and data services.
    </voice>
  </segment>
</ytml>

All samples on GitHub​

More complete examples — including hello-world.ytml, code-tutorial.ytml, and data-explainer.ytml — are in the samples folder on GitHub.