← Back to Browser Tools

Presentation Annotator

This tool is based on Simon Willison's concept for the development and publishing of Annotated Presentations.

Select and load images of your presentation slides. Slides will be ordered based on the file name. Write annotations in markdown and alt text for images in plaintext. Enter "skip" as alt text to skip a slide.

Load Images

Generate HTML from Your Slides

Leave empty to use just the filename, or specify a folder (e.g., slides/), relative path (e.g., ../images/), or URL prefix (e.g., https://example.com/slides/)

Execute the following template against the slides on the page. An escapeHtml() function is available. You can use ${fullImagePath} for the complete path to each slide image, or build your own manually using ${basePath}${filename}

Example Template

Use ${fullImagePath} for the complete path with your base path included:

<div class="slide" id="${filename}">
  <img loading="lazy" src="${fullImagePath}" alt="${escapeHtml(alt)}" style="max-width: 100%" />
  <div><a style="float: right; text-decoration: none; border-bottom: none; padding-left: 1em;" href="${basePath}#${filename}">#</a>
  ${markdownAsHtml}
  </div>
</div>