Getting Started #

Overview #

Kolibry ^{(kolibry, /kolibri/)} is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown while also having the power of HTML and Vue components to deliver pixel-perfect layouts and designs with embedded interactive demos in your presentations.

It uses a feature-rich markdown file to generate beautiful slides with an instant reloading experience, along with many built-in integrations such as live coding, PDF exporting, presentation recording, and so on. It's powered by the web, so you can do anything with Kolibry - the possibilities are endless.

You can learn more about the rationale behind the project in the Why Kolibry section.

Features #

• 📝 Markdown-based - use your favorite editors and workflow
• 🧑‍💻 Developer Friendly - built-in syntax highlighting, live coding, etc.
• 🎨 Themable - theme can be shared and used with npm packages
• 🌈 Stylish - on-demand utilities via UnoCSS or Windi CSS.
• 🤹 Interactive - embedding Vue components seamlessly
• 🎙 Presenter Mode - use another window, or even your phone to control your slides
• 🎨 Drawing - draw and annotate on your slides
• 🧮 LaTeX - built-in LaTeX math equations support
• 📰 Diagrams - creates diagrams with textual descriptions
• 🌟 Icons - Access to icons from any iconset directly
• 💻 Editors - integrated editor, or extension for VS Code
• 🎥 Recording - built-in recording and camera view
• 📤 Portable - export into PDF, PNGs, or even a hostable SPA
• ⚡️ Fast - instant reloading powered by Vite
• 🛠 Hackable - using Vite plugins, Vue components, or any npm packages

Tech Stack #

Kolibry is made possible by combining these tools and technologies.

• Vite - An extremely fast frontend tooling
• Vue 3 powered Markdown - Focus on the content while having the power of HTML and Vue components whenever needed
• Windi CSS or UnoCSS - On-demand utility-first CSS framework, style your slides at ease
• Prism, Shiki, Monaco Editor - First-class code snippets support with live coding capability
• RecordRTC - Built-in recording and camera view
• VueUse family - @vueuse/core, @vueuse/head, @vueuse/motion, etc.
• Iconify - Iconsets collection.
• DrauuIt - Drawing and annotations support
• KaTeX - LaTeX math rendering.
• Mermaid - Textual Diagrams.

Scaffolding Your First Presentation #

Try it Online #

kolibry.dev/new

Create Locally #

With NPM:

$ npm init kolibry

With Yarn:

$ yarn create kolibry

With pnpm:

$ pnpm create kolibry

Follow the prompts and start making your slides now! For more details about the markdown syntax, read through the syntax guide.

Command Line Interface #

In a project where Kolibry is installed, you can use the kolibry binary in your npm scripts.

{
  "scripts": {
    "dev": "kolibry", // start dev server
    "build": "kolibry build", // build for production SPA
    "export": "kolibry export" // export slides to pdf
  }
}

Otherwise, you can use it with npx

$ npx kolibry

Run kolibry --help for more options available.

Markdown Syntax #

Kolibry reads your slides.md file under your project root and converts them into slides. Whenever you made changes to it, the content of the slides will be updated immediately. For example:

# Kolibry

Hello World

---

# Page 2

Directly use code blocks for highlighting

//```ts
console.log('Hello, World!')
//```

---

# Page 3

Read more about the Kolibry Markdown syntax in the syntax guide.