What is Kolibry?
Kolibry is a slides maker and presenter designed for developers, consist of the following features
- π Text-based - focus on the content with Markdown, and then style them later
- π¨ Themable - theme can be shared and used with npm packages
- π§βπ» Developer Friendly - code highlighting, live coding with autocompletion
- π€Ή Interactive - embedding Vue components to enhance your expressions
- π₯ Recording - built-in recording and camera view
- π€ Portable - export into PDF, PNGs, or even a hostable SPA
- π Hackable - anything possible on a webpage
Read more about Why Kolibry?
What is Kolibry?
Kolibry is a slides maker and presenter designed for developers, consist of the following features
- π Text-based - focus on the content with Markdown, and then style them later
- π¨ Themable - theme can be shared and used with npm packages
- π§βπ» Developer Friendly - code highlighting, live coding with autocompletion
- π€Ή Interactive - embedding Vue components to enhance your expressions
- π₯ Recording - built-in recording and camera view
- π€ Portable - export into PDF, PNGs, or even a hostable SPA
- π Hackable - anything possible on a webpage
Read more about Why Kolibry?
Table of contents
<Toc minDepth="1" maxDepth="1"></Toc><Toc minDepth="1" maxDepth="1"></Toc>
Navigation
Hover on the bottom-left corner to see the navigationβs controls panel, learn more
Keyboard Shortcuts
| right / space | next animation or slide |
| left / shiftspace | previous animation or slide |
| up | previous slide |
| down | next slide |
Here!
Code
Use code snippets and get the highlighting directly![1]
interface User { id: number firstName: string lastName: string role: string } function updateUser(id: number, update: User) { const user = getUser(id) const newUser = { ...user, ...update } saveUser(id, newUser) }interface User { id: number firstName: string lastName: string role: string } function updateUser(id: number, update: User) { const user = getUser(id) const newUser = { ...user, ...update } saveUser(id, newUser) }
Components
You can use Vue components directly inside your slides.
We have provided a few built-in components like <Tweet/> and <Youtube/> that you can use directly. And adding your custom components is also super easy.
<Counter :count="10" /><Counter :count="10" />
Check out the guides for more.
<Tweet id="1701522145371738236" /><Tweet id="1701522145371738236" />
Themes
Kolibry comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just one edit in your frontmatter:
--- theme: default ------ theme: default ---
--- theme: seriph ------ theme: seriph ---
Read more about How to use a theme and check out the Awesome Themes Gallery.
Animations
Animations are powered by @vueuse/motion.
<div v-motion :initial="{ x: -80}" :enter="{ x: 0 }"> Kolibry </div><div v-motion :initial="{ x: -80}" :enter="{ x: 0 }"> Kolibry </div>
LaTeX
LaTeX is supported out-of-box powered by KaTeX.
Inline 3xβ1β+(1+x)2
Block
βΓBβc1ββtβEββΓE+c1ββtβBβββ Bβ=c4Οβjβββ E=0=0β=4ΟΟ
Diagrams
You can create diagrams / graphs from textual descriptions, directly in your Markdown.
Multiple Entries
You can split your slides.md into multiple files and organize them as you want using the src attribute.
slides.md
# Page 1 Page 2 from main entry. --- src: ./subpage.md ---# Page 1 Page 2 from main entry. --- src: ./subpage.md ---
subpage.md
# Page 2 Page 2 from another file.# Page 2 Page 2 from another file.
Learn More
Documentations Β· GitHub Β· Showcases