{"id":13712818,"url":"https://github.com/renerocksai/slides","last_synced_at":"2025-07-23T10:34:20.089Z","repository":{"id":37761318,"uuid":"342873237","full_name":"renerocksai/slides","owner":"renerocksai","description":"Slideshows at 10 000 FPS! A simple but powerful IMGUI based, OpenGL-rendered slideshow app in Zig","archived":false,"fork":false,"pushed_at":"2023-07-26T12:07:39.000Z","size":115789,"stargazers_count":59,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-19T03:33:11.706Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/renerocksai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"renerocksai","custom":"https://buymeacoffee.com/renerocksai"}},"created_at":"2021-02-27T14:16:36.000Z","updated_at":"2025-03-30T18:20:13.000Z","dependencies_parsed_at":"2024-11-13T23:30:59.573Z","dependency_job_id":"9225e702-9fc4-45c8-bd8d-f991c8806f17","html_url":"https://github.com/renerocksai/slides","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/renerocksai/slides","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renerocksai%2Fslides","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renerocksai%2Fslides/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renerocksai%2Fslides/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renerocksai%2Fslides/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/renerocksai","download_url":"https://codeload.github.com/renerocksai/slides/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/renerocksai%2Fslides/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266663046,"owners_count":23964675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T23:01:23.101Z","updated_at":"2025-07-23T10:34:20.077Z","avatar_url":"https://github.com/renerocksai.png","language":"C","funding_links":["https://github.com/sponsors/renerocksai","https://buymeacoffee.com/renerocksai"],"categories":["Multimedia \u0026 Graphics"],"sub_categories":["Graphics Library"],"readme":"# Slides - Slideshows for Hackers\n\n## ARCHIVED: -\u003e goto { [rayslides](https://github.com/renerocksai/rayslides) } for an updated version\n\nThis project is both a case study and also marks my first steps in the programming language [Zig](https://ziglang.org), towards creating a simple but powerful [imgui](https://github.com/ocornut/imgui/wiki#about-the-imgui-paradigm) based, OpenGL-rendered slideshow app in Zig.\n\n![image](./screenshots/slides.png)\n\n**Danger - this is alpha stuff**. I have used it to give quite a few presentations in online meetings though and nobody seemed to have noticed that I hadn't used Powerpoint. It is my zig programming toy - please don't be disappointed if it doesn't do everything you expect.\n\nThis app is supposed to be much simpler and quicker to use (for people like me) than my more powerful take on the whole slideshow matter, [Bûllets](https://git.sr.ht/~renerocksai/bullets), while still being totally functional. The reason for increased ease of use and speed is that, with slides, entire slideshows can be expressed in an easy text format, and it can also be used in tandem with an external text editor such as [neovim](https://neovim.io/).\n\n## Highlights\n\n- Presentations are created in a simple text format, see below.\n  - makes your slides totally Git-friendly\n- One single (mostly static) executable - no install required.\n  - for Windows, Linux (and Mac, if you build it yourself)\n- Built-in editor: create, edit, and present with one small program - or make last-minute changes while presenting\n- support for clickers\n- virtual laser pointer in different sizes\n  - that you can draw with\n- export slideshow to PNGs **or Powerpoint (.pptx)** with a single key-press\n- inspector gadget: view and modify render elements\n\n## Contributing\n\nIf you want to contribute, with your opinion or patches, please use the mailing list\n[~renerocksai/slides@lists.sr.ht](https://lists.sr.ht/~renerocksai/slides).\n\n### Rendering Slideshows at 10 000 FPS\n\nSlides is FAST (gotta go fast)! It pre-renders slideshows into easy to execute\ndrawing structures on load and save, so that the actual rendering takes as\nlittle time as necessary. Rendering the little sample slideshow\n(`test_public.sld`) with 10 000 FPS is easily achievable on a modern, but not\ntoo beefy GPU. In DEBUG mode. Obviously, you need to turn off v-sync in the settings menu so\nthat slides just keeps generating frames as fast as possible, not minding if\nthey can actually be displayed on your screen that fast. For everyday use,\nleaving v-sync on (default), saves energy 🔋.\n\nHere, what it looks like in release mode:\n\n![](./screenshots/10000fps.png)\n\nHint: **16 000 FPS !!!**\n\n### Can your PowerPoint do that?\n\nWith the `key repeat` setting, accessible by the settings widget, you can set the rate you want to flick through your presentation in steps of 10ms (1/100 s). If vsync is off, this will be accurate. With v-sync on and a screen refresh rate of 60fps, the time resolution of redraws is 16.6ms. So 10ms and 20ms will behave identically.\n\nSee it in action [here](https://user-images.githubusercontent.com/30892199/172054559-dccfe611-be60-4dbe-a9ff-f5312fb575a6.mp4)\n\nOpening slideshows, text-search, editing: [here](https://user-images.githubusercontent.com/30892199/172055396-2ee2b7b6-7048-478b-84a0-e968dab8da4a.mp4):\n\n# Motivation\n\nApart from all the reasons for ditching Powerpoint that also applied to my previous slideshow project, [Bûllets](https://git.sr.ht/~renerocksai/bullets), which I already outlined there, this time I wanted to create something more portable, easier to get started with, without external dependencies, that also allows for super quick slide creation using a simple text format.\n\nIn addition, this project also serves as a case study for myself where I test out how feasible it is to develop cross-platform GUI apps in zig, using OpenGL and an immediate mode GUI like dear imgui.\n\nThis project achieves what I set out for in the following ways:\n\n- **portability:** zig allows for cross-platform development. If it weren't for OpenGL (, ...) dependencies, even cross-compilation for all platforms would work out of the box. While that can probably be solved, I am OK with building releases on two platforms for now.\n  - the result is a free-standing executable, only a few MB in size that needs no installer\n- **easy to get started with:** just download, start and go!\n- **no external dependencies:** all you need to create presentations is the program itself. No other software is required. The builtin editor is not the greatest but since slides watches your files, you can use an external editor, too. Changes will be loaded everytime you save.\n- **super quick slide creation:** a simple text format supporting basic Markdown syntax (plus underlines) and templates for building blocks lets you type formatted bulleted lists very quickly.\n  - you can also paste in Markdown from your note taking app, which is what I do frequently\n\n## Interesting Observations\n\nUsing slides, I far more enjoy creating slideshow presentations. It seems to trick my mind into a more enjoyable, programming-like state when I spend my time in neovim, using the slideshow description / markup language. It is a completely mouse-less way of creating presentations. I find it very effective. I also really like that I can put my presentations and supporting assets in a git reposiory and have them version-controlled.\n\nLots of the contents of my slideshows is Markdown or very Markdown-friendly which makes re-use of information snippets really handy, e.g. from notes to presentation to blog post.\n\nBTW, I use `imgtool.py`, also contained in the repo, for figuring out image sizes and placement.  Make sure you have some PIL installed.\n\n# Usage\n\nAfter starting slides by double-clicking it or launching it from the command line, you will be greeted with an empty window.\n\n![](screenshots/empty.png)\n\nUse the menu or keyboard shortcuts (see below) to load the sample presentation `test_public.sld`. Alternatively, go straight to the built-in editor as described further down.\n\n## Opening a Slideshow\n\nUsually, you want to open an existing slideshow for editing or presentation purposes. If you want to experiment with a new slideshow, just open the editor with the \u003ckbd\u003eE\u003c/kbd\u003e key and fire away. To make the changes take effect, save the presentation using the save button or the keyboard shortcut \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eS\u003c/kbd\u003e.\n\nTo open an existing slideshow, use the menu or the keyboard shortcut \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eO\u003c/kbd\u003e and then pick a file from the file browser.\n\n## Editing and Saving a Slideshow\n\nYou open the built-in editor with the \u003ckbd\u003eE\u003c/kbd\u003e key. Note that the editor will not be active for text input with a blinking cursor immediately. This allows you to navigate through the slides until you have reached the one you want to edit. As you navigate through the slides, the editor will follow by moving the current slide's `@popslide` or `@slide` command into the visible area and quickly flashing it with a red background once.\n\nYou enter the editor by clicking somewhere into the text and leave it by clicking somewhere outside of the text. To hide the editor, just use the `[e] editor` button or press the \u003ckbd\u003eE\u003c/kbd\u003e key again.\n\nTo make the changes you made take effect, save the presentation using the save button or the keyboard shortcut \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eS\u003c/kbd\u003e.\n\n**Note:** You can resize the editor pane by dragging it by the lighter blue handle that separates slide content from the editor in the vertical center of the editor:\n\n![image](./screenshots/editor_resize.png)\n\n**Note:** The internal editor is not suitable for smooth and comfortable editing, as it only covers the basic features of an editor. For authoring presentations, I recommend using a real editor. I prefer neovim - but you know best what works for you. Slides watches the file of the open presentation and reloads it when you save it in your editor of choice.\n\n## Using the laser pointer\n\n![](./screenshots/laserpointer.png)\n\nPress \u003ckbd\u003eL\u003c/kbd\u003e to toggle the laser pointer on and off. With \u003ckbd\u003eSHIFT\u003c/kbd\u003e + \u003ckbd\u003eL\u003c/kbd\u003e you can increase the laser pointer's size. It will roll over to the smallest size automatically.\n\nWhile in laser pointer mode, you can draw by clicking the left mouse-button. To delete your drawing, press \u003ckbd\u003eD\u003c/kbd\u003e.\n\n## Using Inspector Gadget\n\nPressing \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eI\u003c/kbd\u003e opens up the inspector gadget. With it, you can inspect and modify render elements.\n\n![](./screenshots/inspector_gadget.png)\n\nIt is helpful when trying to align text blocks or images, sizing them properly, or figuring out the correct color/alpha.\n\nUse the \u003ckbd\u003e+\u003c/kbd\u003e and \u003ckbd\u003e-\u003c/kbd\u003e buttons next to `index` to walk through the available render elements of the current slide. The selected render element will be highlighted by a flashing rectangle.\n\nYou can then do the following to each render element:\n\n- change position\n- change size\n- change color\n- change font size\n- view text\n\nPlease note that render elements do necessarily correspond 1:1 with slide elements you put in the source file of a slideshow. For example, if a text contains a color or style change, or a linebreak, the pre-renderer will split that text into multiple render elements.\n\nThe idea of the inspector gadget is to play around with the slides in a visual manner, and then copy the color codes, coordinates into the text editor.\n\nLittle video demo: [here](https://user-images.githubusercontent.com/30892199/172055396-2ee2b7b6-7048-478b-84a0-e968dab8da4a.mp4)\n\n## Presentation and Slide Navigation\n\nSee the next section for keyboard shortcuts for slideshow control and slide navigation. In addition to using the keyboard, you can also use a \"clicker\" / \"presenter\" device.\n\n## Keyboard Shortcuts\n\n| Shortcut | Description |\n| -------- | ----------- |\n| \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eN\u003c/kbd\u003e | New file |\n| \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eO\u003c/kbd\u003e | Open file |\n| \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eS\u003c/kbd\u003e | Save file |\n| \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eQ\u003c/kbd\u003e | Quit |\n| \u003ckbd\u003eE\u003c/kbd\u003e | Toggle editor |\n| \u003ckbd\u003eF\u003c/kbd\u003e | Toggle fullscreen |\n| \u003ckbd\u003eL\u003c/kbd\u003e | Toggle laserpointer |\n| \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eL\u003c/kbd\u003e | cycle through laserpointer sizes |\n| \u003ckbd\u003eD\u003c/kbd\u003e | delete current drawing |\n| \u003ckbd\u003eM\u003c/kbd\u003e | Toggle on-screen menu buttons |\n| Cursor \u003ckbd\u003e\u003c-\u003c/kbd\u003e | Goto previous slide |\n| \u003ckbd\u003ePgUp\u003c/kbd\u003e | Goto previous slide |\n| \u003ckbd\u003eBackspace\u003c/kbd\u003e | Goto previous slide |\n| Cursor \u003ckbd\u003e-\u003e\u003c/kbd\u003e | Goto next slide |\n| \u003ckbd\u003ePgDown\u003c/kbd\u003e | Goto next slide |\n| \u003ckbd\u003eSpace\u003c/kbd\u003e | Goto next slide |\n| \u003ckbd\u003e1\u003c/kbd\u003e | Goto first slide |\n| \u003ckbd\u003e0\u003c/kbd\u003e | Goto last slide |\n| \u003ckbd\u003eG\u003c/kbd\u003e | Goto first slide |\n| \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eG\u003c/kbd\u003e | Goto last slide |\n| \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e | Save screenshot to current directory |\n| \u003ckbd\u003eA\u003c/kbd\u003e | Auto-run through slideshow, saving screenshots to ./slide_shots/|\n| \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eI\u003c/kbd\u003e | bring up the inspector gadget|\n| \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eT\u003c/kbd\u003e | Powerpoint export: auto-runs through all slides, saves them as PNGs, creates .pptx|\n\n# Slideshow Text Format\n\n## Markdown Format\n\nBulleted items can be placed and nested like this:\n\n```markdown\n- first\n    - second (4 space indendation)\n        - third ...\n```\n\nFormatting is supported:\n\n```markdown\nNormal text.\n**Bold** text.\n_italic_ text.\n_**Bold italic**_ text.\n~~Underlined~~ text.\n`rendered with \"font_extra\" (e.g. \"zig showtime\" font)`\n\u003c#rrggbbaa\u003eColored with alpha\u003c/\u003e text. E.g. \u003c#ff0000ff\u003ered full opacity\u003c/\u003e\n```\n\n## Slideshow Format\n\nInternal render buffer resolution is 1920x1080. So always use coordinates in this range.\n\nMore documentation to follow.\n\nExample of the current text format - see [test_public.sld](./test_public.sld) for a more realistic example:\n\n```\n# lines starting with a # sign are comments\n\n# -------------------------------------------------------------\n# -- intro slide template\n# -------------------------------------------------------------\n\n# Background image\n\n@bg img=assets/bgwater.jpg\n# or for a simple colored background:\n# @bg color=#000000000\n\n# often-used text elements\n@push intro_title    x=150 y=400 w=1700 h=223 fontsize=96 color=#7A7A7AFF\n@push intro_subtitle x=219 y=728 w=836 h=246 fontsize=45 color=#cd0f2dff\n@push intro_authors  x=219 y=818 w=836 h=246 fontsize=45 color=#993366ff\n\n# the following pushslide will the slide cause to be pushed (\"remembered as template\"), not rendered\n@pushslide intro\n\n# auto-incrementing slide-number is in $slide_number\n@push slide_number x=1803 y=1027 w=40   h=40  fontsize=20 color=#404040ff text=$slide_number\n\n\n# #############################################################\n# ##   S  L  I  D  E  S\n# #############################################################\n\n# -------------------------------------------------------------\n@popslide intro\n@pop intro_title text=!Slideshows in \u003c#F7A41DFF\u003eZIG\u003c/\u003e!\n@pop intro_subtitle text=_**Easy, text-based slideshows for Hackers**_\n@pop intro_authors text=_@renerocksai_\n\n\n# -------------------------------------------------------------\n# Some slide without slide template\n# -------------------------------------------------------------\n@slide\n\n# some image on the slide\n@box img=some_image.png x=800 y=100 w=320 h=200\n\n@box x=100 y=100 w=1720 h=880\nHere come the bullets:\n`\nText in a box can span multiple lines and will be wrapped\naccording to width\n`\n`\n`\nEmpty lines consist of a single backtick (see above and below)\n`\n`\n`\nBullet list:\n- first\n    - some details\n- second\n- \u003c#808080ff\u003ethird\u003c/\u003e in a different color\n\n```\n\n# Building it\n\n## prerequisites\n\nClone this repository\n\n```console\ngit clone https://git.sr.ht/~renerocksai/slides\n```\n\n## dependencies\n\nAs of now, slides still depends on the relatively old Zig 0.9.1 release. You can\ndownload it from [ziglang.org/download/](https://ziglang.org/download/) unless\nyou run NixOS or installed the Nix package manager on your system.\n\n**Using Nix/NixOS is strongly recommended!**\n\n### Linux / Ubuntu\n\n```console\nsudo apt-get install -y xorg-dev\n```\n\n### NixOS / Ubuntu + Nix \n\nThis applies to NixOS or other Linux distros like Ubuntu with the Nix package\nmanager installed. To make sure all dependencies are met, I highly recommend\nusing the provided nix shell (via `flake.nix`). Start it in the slides\ndirectory:\n\n```console\n$ nix develop\n```\n\n**On systems like ChromeOS**, I need [nixGL](https://github.com/guibou/nixGL) to\nrun the compiled program in the dev shell. Use the flake's `nixgl` shell to gain\naccess to the `nixGL` command:\n\n```console\n$ nix develop --impure .#nixgl\n$ zig build slides\n$ nixGL ./zig-out/bin/slides \n```\n\n\n### Windows\n\nNo further dependencies. `zig build` works out-of-the-box.\n\n## build and run\n\n```console\nzig build slides\n```\n\nTo just build: `zig build`. This will create the executable `slides` in `./zig-out/bin/`.\n\n## Tested with\n\n- zig `0.9.1` (release)\n\n# Contributing patches\n\nIf you want to contribute patches, please use the mailing list\n[~renerocksai/slides@lists.sr.ht](https://lists.sr.ht/~renerocksai/slides).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenerocksai%2Fslides","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frenerocksai%2Fslides","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenerocksai%2Fslides/lists"}