Home / JavaScript / Sliders

Presentation Slides for Developers (Alpha)

Presentation slides for developers 🧑‍💻 👩‍💻 👨‍💻 Status: Closed Alpha Early access available for Sponsors 💖 Source Repo Features 📝 Text-based -
Information
Category: JavaScript / Sliders
Watchers: 6
Star: 94
Fork: 1
Last update: Sep 22, 2021
Resource links
https://github.com/slidevjs/slidev

Slidev

Presentation slides for developers 🧑‍💻 👩‍💻 👨‍💻



Status: Closed Alpha
Early access available for Sponsors 💖
Source Repo

Features

  • 📝 Text-based - focus on the content and then style them later
  • 🎨 Themable - theme can be shared and used with npm packages
  • 🧑‍💻 Developer Friendly - code highlighting, live coding editors
  • 🤹 Interactive - embeds components
  • 🎥 Recording - built-in recording and camera view
  • 📤 Portable - export into PDF, PNGs, or even a hostable SPA
  • 🛠 Hackable - anything possible on a webpage

Tech Stacks

Sponsors

License

MIT License © 2021 Anthony Fu

0 Open More issues
Closed

Blank Screen

I create a Sli.dev project with yarn, and when I open my screen are blank

In console I not have any error. I'm using a macOs. image

opened Jun 7, 2021 by TutoDS 20
Closed

feat: print all slides into one page, fix link in pdf export

This is currently a Work In Progress to try to solve the following issue https://github.com/slidevjs/slidev/issues/483

Currently this version adds a new route /print that displays all slides.

I created a new built-in Link component that uses anchor when we are in print mode.

When exporting to PDF, it uses the new route and the PDF is generated in one shot (no need to merge all pages together anymore).

Pros:

  • Links works inside the PDF
  • Big performance gain when generating the PDF (about 230 slides generated in 20 seconds against more than 11 minutes with the previous version)

Problems:

  1. We need to rethink the nav logic because we can't rely on the global context to gives informations about currentPage...Etc. Currently the currentPage is 1 when printing, but this causes issue with the <toc/> and can cause issue with global components used in global-top.vue or global-bottom.vue. I propose we use provide/inject to give access to all those informations in child components. This way we can inject the correct values for each slides when we print them all together.
  2. We need to duplicate some slides if we want to keep the --with-clicks print feature. It will need some work but I don't think this is an issue if we can use the previous proposal and send the click information with provide/inject.

@antfu What is your though about this ?

Thanks in advance for your answer.

opened Mar 9, 2022 by tonai 14
Closed

fix: markdown parsing in toc title

I didn't create an issue about that but there is still some issues with the title content. For exemple if you use an image in the title and then build with the --base option, the base won't be injected in the title displayed inside the toc.

To fix this I used the same mechanism you use for building the slides. I created custom imports:

  • @/slidev/titles: returns an object matching the slide number and the Vue component to use as title
  • @slidev/title/*.md: returns the Vue component which will be targeted by the same vite plugins as the slides @slidev/slides/*.md

Then the additionnal div and p get stripped by a new slidev:title-transform:pre transformer.

This way we ensure the title used in the TOC will be the same as the title in the slides.

opened Feb 15, 2022 by tonai 10
Closed

howto achieve same layout for different resolutions?

Describe the bug When displaying slides the layout is different depending on the screen resolution. I'm not sure if this is a bug. If it's not a bug: what would be the recommended best-practice to deal with this situation?

To Reproduce Steps to reproduce the behavior:

  1. Create a new folder
  2. npm init [email protected]
  3. Replace slides.md with minimal example (sse below)
  4. Repeat on machine with different screen resolution

Screenshot with resolution 3840x2160:

slidev-4k-3840x2160

Screenshot with resolution 1920x1080:

slidev-non-4k-1920x1080

Minimal slides.md file:

---
theme: default
layout: default
---

# This is a long title, but it's on a single line with 4k

There are 13 bullet points

- foo01
- foo02
- foo03
- foo04
- foo05
- foo06
- foo07
- foo08
- foo09
- foo10
- foo11
- foo12
- foo13

Desktop

  • OS: Arch Linux x86_64
  • Browser: Chromium Version 91.0.4472.77 (Official Build) Arch Linux (64-bit)
  • Slidev version: 0.20.1
needs reproduction os:linux 
opened Jun 9, 2021 by draptik 10
Closed

SPA Build for `npm init slidev` does not render correctly

Describe the bug When using the documentation's starter workflow with npm init [email protected] - a project is scaffolded. When this project is built using the provided npm run build script, a dist folder is produced. When served statically with something like npx serve ./dist or github pages it does not appear to render the CSS correctly. See a freshly created project from npm init - image

Expected Behavior: When running npm run build on the main starter project it should render correctly as it does when running in dev mode. Dev Mode for same project: image

opened May 25, 2021 by wolfejw86 10
Closed

Providing Official GitHub Actions to host on GitHub Pages quickly

Is your feature request related to a problem? Please describe. Thanks for this Great Project! Currently, slidev is providing SPA that user can host it on GitHub Pages. If slidev providing GitHub Actions to host on GitHub Pages, it would be more convenient I think.

Describe the solution you'd like Providing GitHub Actions to host in GitHub Pages.

Describe alternatives you've considered Nothing. I'll do this :)

enhancement pr welcome 
opened May 23, 2021 by skanehira 10
Open

How can i get the code in monaco editor.

Is your feature request related to a problem? Please describe.

As Slidev has integrated a convenient code editor Monaco, I want to develop a jupyter REPL (Read–eval–print loop) component that supports Python, Julia, and some other languages for education purposes. By changing the code in the Monaco editor, you can execute the code and get the result on slidev immediately, which is similar to codepen. But I came to an issue that it seems I can`t get the code in Monaco once it was modified.

In Monaco Editor, the code value is synced with Editor.

https://github.com/slidevjs/slidev/blob/5fd401d8327762371eb89951c44552aaed6dc2a5/packages/client/builtin/Monaco.vue#L123

But it seems that I can`t get it outside the Monaco Component.

Describe the solution you'd like

Maybe we can use an Emit or Expose to get the code. I prefer Emit because I think it is simpler. We can use a callback to inform the code.

const emit = defineEmits<{
  (e: 'change', code: string): void
}>()

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

enhancement 
opened Jun 29, 2022 by InEase 0
Open

Can't access public directory after publishing

Repo: https://github.com/anburocky3/Javascript-DOM-in-Tamil/tree/50-javascript-dom-interview-questions

I'm deploying to github and i have used the following code to build.

slidev build --base /Javascript-DOM-in-Tamil/

And i can able to access it properly here:

but in the slides, i have used the following path:

 <a href="/practices/A37.html" target="_blank">Live Demo</a>

This is pointing to https://anburocky3.github.io/ instead of https://anburocky3.github.io/Javascript-DOM-in-Tamil/ (even after specifying --base, it didn't worked.)

I have placed the practices folder inside public.

opened Jun 28, 2022 by anburocky3 0
Open

Support github style checkboxes

Is your feature request related to a problem? Please describe.

I use checkboxes to indicate when something as to be done, when writing slides for courses/practical applications.

According to GitHub, this belongs to their "tasklist" extension: https://github.github.com/gfm/

Describe the solution you'd like This syntax:

- [ ] My text
- [X] Checked

Should translate to:

<li><input type="checkbox" /> My text </li>
<li><input type="checkbox" checked/> My text </li>

and render like this (in the web version but also when exported in PDF/PNG):

  • [ ] My text
  • [X] Checked

I am not sure about the bullet point though, however GitHub works this way currently (just using [ ] without a dash does nothing).

Describe alternatives you've considered

  • Adding - <input type="checkbox" /> manually. Not sure how it will behave after export. It doesn't render very well however, because you need a bullet point to have correct line jumps, and the text won't support inline code anymore

  • Using a square emoji also works https://emojipedia.org/search/?q=square but is not interactive

enhancement pr welcome 
opened Jun 28, 2022 by eric-burel 5
Open

How to run terminal commands

How do I run the terminal command and return the results in real time? For example, run git status on a slide and return the results.

opened Jun 28, 2022 by lyzhang1999 1
Open

Auto install peer deps with pnpm

/!\ I haven't actually tested this PR, I've made the edit from GitHub UI based on pnpm error message, see #630

Closes #630

opened Jun 28, 2022 by eric-burel 0
Open

Can't run after global install

Describe the bug Can't run after global install

err:

/usr/local/lib/node_modules/@slidev/cli/dist/chunk-IP7ZGKHI.js:121
    throw new Error(`Failed to resolve package "${importName}"`);
          ^

Error: Failed to resolve package "/home/bradford/workspace/slidev/package.json"
    at resolveImportPath (/usr/local/lib/node_modules/@slidev/cli/dist/chunk-IP7ZGKHI.js:121:11)
    at getPackageJson (/usr/local/lib/node_modules/@slidev/cli/dist/chunk-LIMOCTLS.js:9516:51)
    at getAddons (/usr/local/lib/node_modules/@slidev/cli/dist/chunk-LIMOCTLS.js:9522:33)
    at resolveOptions (/usr/local/lib/node_modules/@slidev/cli/dist/chunk-LIMOCTLS.js:9604:24)
    at async initServer (/usr/local/lib/node_modules/@slidev/cli/dist/cli.js:82:21)

Node.js v18.4.0

Appreciate for help

To Reproduce Steps to reproduce the behavior:

  1. sudo npm i -g @slidev/cli
  2. sudo slidev test.md

Desktop (please complete the following information):

  • OS: Ubuntu 22.04
  • Browser: Microsoft Edge 104.0.1287.1 dev (64)
  • Slidev version: 0.33.1

image

opened Jun 24, 2022 by SkyTeamWater 2

v0.34.1(Jun 30, 2022)

Bug Fixes

v0.34.0(Jun 30, 2022)

Features

  • support UnoCSS via css: unocss in frontmatter (c51e0d0)
  • upgrade cypress (f35700e)

v0.33.1(Jun 19, 2022)

Features

  • expose go() for dynamic slide navigation (#631) (dab3660)

v0.33.0(Jun 2, 2022)

Bug Fixes

  • display notes for static builds (no edition) (#620) (77d7cd7)
  • display remote info compatibility with node 18 (#623) (d5b0f41)

Features

  • extend vite config from themes and addons (#621) (2c1b6e7)
  • update presenter mode styles for mobile (#624) (4fabb5d)

v0.32.4(Jun 1, 2022)

Bug Fixes

  • bypass scoped theme package (#605) (05a9344)
  • error with global installation (when no package.json) (#618) (176a52d)
  • when slide content is only a note (and last.index = 0) (#617) (fb8054f)

Features

v0.32.3(May 23, 2022)

Features

Contents

    jonhoo Superimposer — combine presentation videos with slides
    websiddu Sync your Sketch artboards to Google Slides with ease
    slidevjs Presentation slides for developers 🧑‍💻👩‍💻👨‍💻
    googleworkspace Generate Google Slides from markdown
    trishume Use the Google speech-to-text API to generate presentation slides as you talk!
    alyssaxuu Convert Figma frames into a Google Slides presentation 🍭
    maxonthegit A PowerPoint add-in that splits slides according to slideshow-time animation effects
    orangetw Collections of Orange Tsai's public presentation slides.
    nzufelt Resources and slides from my 2021 presentation on surveillance to the 9/11s colloquium
    slidevjs VS Code extension for Slidev
    bketelsen create, live-preview, edit, and publish reveal.js slide decks
    singularseclab A collection of slides from Singular Security Lab.
    rupl Unfolding the Box Model — interactive slides exploring CSS 3D Transforms
    topepo Slides and code for "Cooking Your Data with Recipes"
    supachai-j Webinar NGINX Automation Demo
    justin-vanwinkle A simplistic way to create stunning presentations with speed using Reveal.js and Docker.
    icyphox :framed_picture: a slide deck presentation tool written in pure bash
    adithyan-ak The repo contains all the slide deck that was used during my presentation at various webinars, conferences, and meetups.
    edublancas 🐍 Material for PyData Global 2021 Presentation: Effective Testing for Machine Learning Projects
    jessesquires Custom presenters and better view controller presentation for iOS
    bespokejs DIY Presentation Micro-Framework
    Share this repo

    Related Repos


    Sliders
    17
    Super fast carousel and slider with touch for optimized websites running in modern browser...
    dynamicweb Swiffy Slider Super fast lightweight carousel and slider with touch for optimized websites running in modern browsers. Explore Swiffy Slider docs » Se
     
    Sliders
    0
    Pure JavaScript Slider without using any third party library
    piyalidas10 Pure JavaScript Slider without using any third party library
     
    Sliders
    25
    A button card with integrated slider for light, switch, fan, cover, input_boolean entities...
    mattieha A button card with integrated slider for light, switch, fan, cover, input_boolean entities.
     
    Sliders
    35
    A minimalist generative art thing – press the buttons and play with the sliders!
    doersino A minimalist generative art thing – press the buttons and play with the sliders!
     
    Sliders
    94
    Presentation Slides for Developers (Alpha)
    slidevjs Presentation slides for developers 🧑‍💻 👩‍💻 👨‍💻 Status: Closed Alpha Early access available for Sponsors 💖 Source Repo Features 📝 Text-based -
     
    Sliders
    17
    📽 An opinionated presentation framework. Just write what you want to present and it will ...
    kbariotis 📽 An opinionated presentation framework. Just write what you want to present and it will do the rest.
     
    Sliders
    19
    a modular and customizable, collapsible sidebar, ready to plug and play.
    hauntarl A repository containing UI elements for a Collapsible Sidebar inspired from dribbble
     
    Sliders
    160
    An interactive sticky item inspired by Facebook Stories.
    gorhom An interactive sticky item inspired by Facebook Stories.
     
    Sliders
    45
    Slider for creating one page website
    elansx Slider for creating one page website
     
    Sliders
    3.4k
    The HTML touch slider carousel with the most native feeling.
    rcbyr The HTML touch slider carousel with the most native feeling.
     
    Sliders
    6.5k
    A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast....
    glidejs Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can convince you: Dependency-free. Everything included, ready for action. L
     
    Sliders
    5.9k
    Create HTML presentations in seconds —
    webslides WebSlides = Create stories with Karma Finally, everything you need to make HTML presentations, landings, and longforms in a beautiful way. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journa
     
    Sliders
    3.4k
    The responsive CSS animation framework for creating unique sliders, presentations, banners...
    IanLunn Sequence.js The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications. Sequence.js provides all of the JavaScript functionality you need for step-based a
     
    Sliders
    680
    A super simple slideshow plugin for jQuery.
    austenpayan skippr A fast &amp; light jQuery plugin for creating tasteful slideshows. Demo &amp; Instructions Install via bower bower install skippr ====== The Setup. Include jquery.skippr.css inside your h
     
    Sliders
    27.5k
    the last carousel you'll ever need
    kenwheeler slick the last carousel you'll ever need Demo http://kenwheeler.github.io/slick CDN To start working with Slick right away, there's a couple of CDN choices availabile to serve the files as close, and fast