How do I install slidev?

Run these in Claude Code: /plugin marketplace add slidevjs/slidev then /plugin install slidev@slidev-plugins. Then prompt normally.

Does slidev auto-invoke its skills?

Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.

Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Content

Plugin

slidev

Presentation Slides for Developers

FLOW.md

slidevjs@slidevjs

GitHub

Plugin Signal73/100Solid

maintained97

capable14

documented100

adopted100

Install on Claude Code

> /plugin marketplace add slidevjs/slidev
> /plugin install slidev@slidev-plugins

Stats

TypeScript JavaScript Node Vue HTML

+7 tags

CSS Bash GitHub Markdown Mermaid LaTeX Vite

48,020

Stars

2,144

Forks

Active

Maintenance

TypeScript

Language

MIT

License

5d ago

Last commit

5y ago

Created

Repo: slidevjs/slidev

In this plugin

1 skill

- slidev

See everything inside

What's inside

Skills

/slidevCreate and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

Badges

README

Read on GitHub

Features

📝 Markdown-based - focus on content and use your favorite editor
🧑‍💻 Developer Friendly - built-in code highlighting, live coding, etc.
🎨 Themable - theme can be shared and used with npm packages
🌈 Stylish - on-demand utilities via UnoCSS.
🤹 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 using textual descriptions with Mermaid
🌟 Icons - access to icons from any icon set directly
💻 Editor - integrated editor, or the VSCode extension
🎥 Recording - built-in recording and camera view
📤 Portable - export into PDF, PNGs, or PPTX
⚡️ Fast - instant reloading powered by Vite
🛠 Hackable - using Vite plugins, Vue components, or any npm packages

Getting Started

Try it Online ⚡️

sli.dev/new

Init Project Locally

Install Node.js >= 20.12.0 and run the following command:

npm init slidev

Discord: chat.sli.dev

For a full example, you can check the demo folder, which is also the source file for my previous talk.

Tech Stack

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
UnoCSS - On-demand utility-first CSS engine, style your slides at ease
Shiki, Monaco Editor - First-class code snippets support with live coding capability
RecordRTC - Built-in recording and camera view
VueUse family - @vueuse/core, @vueuse/motion, etc.
Iconify - Icon sets collection.
Drauu - Drawing and annotations support
KaTeX - LaTeX math rendering.
Mermaid - Textual Diagrams.

License

File tree

772

slidevjs/slidevView on GitHub

.claude-plugin/
  marketplace.json
  plugin.json
.github/
  FUNDING.yml
  ISSUE_TEMPLATE/
    bug_report.md
    config.yml
    feature_request.md
  stale.yml
  workflows/
    autofix.yml
    cr.yml
    release.yml
    smoke.yml
    test.yml
.gitignore
.vscode/
  extensions.json
  launch.json
  settings.json
assets/
  assets/
    arrow-bottom-left.svg
  demo-cover.png
  favicon.png
  logo-circle.png
  logo-for-vscode.png
  logo-mono-dark.svg
  logo-mono.svg
  logo-square.png
  logo-title.png
  logo-triangle.png
  logo.png
  logo.svg
  og-image.png
  screenshots/
    cover.png
    covers.png
    integrated-editor.png
    navbar.png
    presenter-mode.png
    recording.png
    slides-overview.png
  showcases/
    composable-vue.png
  themes/
    default-1.png
    default-2.png
    default.png
    placeholder.png
    seriph.png
CODE_OF_CONDUCT.md
CONTRIBUTING.md
cypress/
cypress.config.ts
  basePathServer.ts
  e2e/
    examples/
      base-path.spec.ts
      basic.spec.ts
      presenter-resizer.spec.ts
      smoke.spec.ts
  fixtures/
    basic/
      components/
        DecorateWithLi.vue
        WrapInClicks.vue
        WrapInClicksDecorate.vue
        WrapInComponentInClicks.vue
      global.vue
      package.json
      slides.md
      sub/
        page1.md
        page2.md
      vite.config.ts
  tsconfig.json
demo/
  composable-vue/
    components/
      Connections.vue
      DarkToggle.vue
      Marker.vue
      MarkerCore.vue
      MarkerPattern.vue
      MarkerTips.vue
      NumBox.vue
      VueUse.vue
    index.html
    package.json
    setup/
      monaco.ts
    slides.md
  README.md
  starter/
    components/
      Counter.vue
    package.json
    pages/
      imported-slides.md
    README.md
    slides.md
    snippets/
      external.ts
    style.css
    vite.config.ts
  vue-runner/
    package.json
    setup/
      code-runners.ts
      shiki.ts
    slides.md
docs/
  .gitignore
  .vitepress/
    addons.ts
    config.ts
    customizations.ts
    pages.ts
    shims/
      VPMenuLink.ts
    showcases.ts
    sidebar-gen.ts
    theme/
      components/
        AddonGallery.vue
        AddonInfo.vue
        Demo.vue
        DemoEditor.vue
        DemoSlide.vue
        Environment.vue
        FeaturesAnimation.vue
        FeaturesAnimationInner.vue
        FeaturesOverview.vue
        FeatureTag.vue
        LandingPage.vue
        Layout.vue
        LinkCard.vue
        LinkInline.vue
        SeeAlso.vue
        ShowCaseInfo.vue
        ShowCases.vue
        SlideContainer.vue
        ThemeGallery.vue
        ThemeInfo.vue
        TheTweet.vue
      composables/
        dark.ts
      index.ts
      styles/
        custom.css
        demo.css
        vars.css
    themes.ts
    utils.ts
  builtin/
    cli.md
    components.md
    layouts.md
  components.d.ts
  custom/
    config-code-runners.md
    config-context-menu.md
    config-fonts.md
    config-highlighter.md
    config-katex.md
    config-mermaid-renderer.md
    config-mermaid.md
    config-monaco.md
    config-parser.md
    config-routes.md
    config-shortcuts.md
    config-transformers.md
    config-unocss.md
    config-vite.md
    config-vue.md
    directory-structure.md
    index.md
  features/
    block-frontmatter.md
    build-with-pdf.md
    bundle-remote-assets.md
    canvas-size.md
    click-marker.md
    code-block-line-numbers.md
    code-block-max-height.md
    code-groups.md
    comark.md
    direction-variant.md
    draggable.md
    drawing.md
    eject-theme.md
    frontmatter-merging.md
    global-layers.md
    icons.md
    import-snippet.md
    importing-slides.md
    index.data.ts
    index.md
    latex.md
    line-highlighting.md
    mcp.md
    mermaid.md
    monaco-editor.md
    monaco-run.md
    monaco-write.md
    notes-auto-ruby.md
    og-image.md
    plantuml.md
    prettier-plugin.md
    pwa.md
    recording.md
    remote-access.md
    rough-marker.md
    seo-meta.md
    shiki-magic-move.md
    side-editor.md
    slide-hook.md
    slide-scope-style.md
    slot-sugar.md
    timer.md
    transform-component.md
    twoslash.md
    vscode-extension.md
    zoom-slide.md
  guide/
    animations.md
    component.md
    exporting.md
    faq.md
    global-context.md
    hosting.md
    index.md
    layout.md
    syntax.md
    theme-addon.md
    ui.md
    why.md
    work-with-ai.md
    write-addon.md
    write-layout.md
    write-theme.md
  index.md
  netlify.toml
  package.json
  public/
    assets/
      arrow-bottom-left.svg
      code-groups-demo.png
    demo-cover.png
    favicon.png
    logo-circle.png
    logo-for-vscode.png
    logo-square.png
    logo-title.png
    logo-triangle.png
    logo.png
    logo.svg
    og-image.png
    screenshots/
      cover.png
      covers.png
      integrated-editor.png
      navbar.png
      presenter-mode.png
      recording.png
      slides-overview.png
    showcases/
      composable-vue.png
    theme-placeholder.png
  README.md
  resources/
    addon-gallery.md
    covers.md
    learning.md
    showcases.md
    theme-gallery.md
  tsconfig.json
  uno.config.ts
  vite.config.ts
eslint.config.js
LICENSE
netlify.toml
package.json
packages/
  client/
    .generated/
      unocss-tokens.ts
    App.vue
    assets/
      favicon.png
      logo-title-horizontal.png
      logo.png
      logo.svg
    builtin/
      Arrow.vue
      AutoFitText.vue
      BlueSky.vue
      CodeBlockWrapper.vue
      CodeGroup.vue
      katex-lines.ts
      KaTexBlockWrapper.test.ts
      KaTexBlockWrapper.vue
      LightOrDark.vue
      Link.vue
      Mermaid.vue
      Monaco.vue
      PlantUml.vue
      PoweredBySlidev.vue
      RenderWhen.vue
      ShikiMagicMove.vue
      SlideCurrentNo.vue
      SlidesTotal.vue
      SlidevVideo.vue
      Toc.vue
      TocList.vue
      Transform.vue
      Tweet.vue
      VAfter.ts
      VClick.ts
      VClickGap.vue
      VClicks.ts
      VDrag.vue
      VDragArrow.vue
      VSwitch.ts
      Youtube.vue
    composables/
      useClicks.ts
      useDarkMode.ts
      useDragElements.ts
      useDrawings.ts
      useEmbeddedCtrl.ts
      useHideCursorIdle.ts
      useIME.ts
      useMousePosInSlide.ts
      useNav.test.ts
      useNav.ts
      usePreloadImages.ts
      usePrintStyles.ts
      useSlideBounds.ts
      useSlideInfo.ts
      useSwipeControls.ts
      useTimer.ts
      useTocTree.ts
      useViewTransition.ts
      useWakeLock.ts
    constants.ts
    context.ts
    env.ts
    index.html
    index.ts
    internals/
      Badge.vue
      ClicksSlider.vue
      CodeRunner.vue
      ContextMenu.vue
      Controls.vue
      CurrentProgressBar.vue
      DevicesSelectors.vue
      DomElement.vue
      DragControl.vue
      Draggable.vue
      DrawingControls.vue
      DrawingLayer.vue
      DrawingPreview.vue
      ExportPdfTip.vue
      FormCheckbox.vue
      FormItem.vue
      FormSlider.vue
      Goto.vue
      IconButton.vue
      InfoDialog.vue
      LaserPointer.vue
      MenuButton.vue
      Modal.vue
      NavControls.vue
      NoteDisplay.vue
      NoteEditable.vue
      NoteStatic.vue
      PresenterMouse.vue
      PrintContainer.vue
      PrintSlide.vue
      PrintSlideClick.vue
      PwaIndicator.vue
      QuickOverview.vue
      README.md
      RecordingControls.vue
      RecordingDialog.vue
      ScreenCaptureMirror.vue
      SegmentControl.vue
      SelectList.vue
      Settings.vue
      ShadowRoot.vue
      ShikiEditor.vue
      SideEditor.vue
      SlideContainer.vue
      SlideLoading.vue
      SlidesShow.vue
      SlideWrapper.vue
... 487 more

FAQ

slidev is a Claude Code plugin with 1 hand-picked skill for content work, indexed on Flowy. Install it with the command on its page. It includes slidev. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.

What is slidev?: Presentation Slides for Developers
How do I install slidev?: Run these in Claude Code: /plugin marketplace add slidevjs/slidev then /plugin install slidev@slidev-plugins. Then prompt normally.
Does slidev auto-invoke its skills?: Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
Is slidev free?: Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.

Features

📝 Markdown-based - focus on content and use your favorite editor

🧑‍💻 Developer Friendly - built-in code highlighting, live coding, etc.

🎨 Themable - theme can be shared and used with npm packages

🌈 Stylish - on-demand utilities via UnoCSS.

🤹 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 using textual descriptions with Mermaid

🌟 Icons - access to icons from any icon set directly

💻 Editor - integrated editor, or the VSCode extension

🎥 Recording - built-in recording and camera view

📤 Portable - export into PDF, PNGs, or PPTX

⚡️ Fast - instant reloading powered by Vite

🛠 Hackable - using Vite plugins, Vue components, or any npm packages

Getting Started

Try it Online ⚡️

Init Project Locally

Install Node.js >= 20.12.0 and run the following command:

npm init slidev

For a full example, you can check the demo folder, which is also the source file for my previous talk.

Tech Stack

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

UnoCSS - On-demand utility-first CSS engine, style your slides at ease

Shiki, Monaco Editor - First-class code snippets support with live coding capability

RecordRTC - Built-in recording and camera view

VueUse family - @vueuse/core, @vueuse/motion, etc.

Iconify - Icon sets collection.

Drauu - Drawing and annotations support

KaTeX - LaTeX math rendering.

Mermaid - Textual Diagrams.

.claude-plugin/ marketplace.json plugin.json .github/ FUNDING.yml ISSUE_TEMPLATE/ bug_report.md config.yml feature_request.md stale.yml workflows/ autofix.yml cr.yml release.yml smoke.yml test.yml .gitignore .vscode/ extensions.json launch.json settings.json assets/ assets/ arrow-bottom-left.svg demo-cover.png favicon.png logo-circle.png logo-for-vscode.png logo-mono-dark.svg logo-mono.svg logo-square.png logo-title.png logo-triangle.png logo.png logo.svg og-image.png screenshots/ cover.png covers.png integrated-editor.png navbar.png presenter-mode.png recording.png slides-overview.png showcases/ composable-vue.png themes/ default-1.png default-2.png default.png placeholder.png seriph.png CODE_OF_CONDUCT.md CONTRIBUTING.md cypress/ cypress.config.ts basePathServer.ts e2e/ examples/ base-path.spec.ts basic.spec.ts presenter-resizer.spec.ts smoke.spec.ts fixtures/ basic/ components/ DecorateWithLi.vue WrapInClicks.vue WrapInClicksDecorate.vue WrapInComponentInClicks.vue global.vue package.json slides.md sub/ page1.md page2.md vite.config.ts tsconfig.json demo/ composable-vue/ components/ Connections.vue DarkToggle.vue Marker.vue MarkerCore.vue MarkerPattern.vue MarkerTips.vue NumBox.vue VueUse.vue index.html package.json setup/ monaco.ts slides.md README.md starter/ components/ Counter.vue package.json pages/ imported-slides.md README.md slides.md snippets/ external.ts style.css vite.config.ts vue-runner/ package.json setup/ code-runners.ts shiki.ts slides.md docs/ .gitignore .vitepress/ addons.ts config.ts customizations.ts pages.ts shims/ VPMenuLink.ts showcases.ts sidebar-gen.ts theme/ components/ AddonGallery.vue AddonInfo.vue Demo.vue DemoEditor.vue DemoSlide.vue Environment.vue FeaturesAnimation.vue FeaturesAnimationInner.vue FeaturesOverview.vue FeatureTag.vue LandingPage.vue Layout.vue LinkCard.vue LinkInline.vue SeeAlso.vue ShowCaseInfo.vue ShowCases.vue SlideContainer.vue ThemeGallery.vue ThemeInfo.vue TheTweet.vue composables/ dark.ts index.ts styles/ custom.css demo.css vars.css themes.ts utils.ts builtin/ cli.md components.md layouts.md components.d.ts custom/ config-code-runners.md config-context-menu.md config-fonts.md config-highlighter.md config-katex.md config-mermaid-renderer.md config-mermaid.md config-monaco.md config-parser.md config-routes.md config-shortcuts.md config-transformers.md config-unocss.md config-vite.md config-vue.md directory-structure.md index.md features/ block-frontmatter.md build-with-pdf.md bundle-remote-assets.md canvas-size.md click-marker.md code-block-line-numbers.md code-block-max-height.md code-groups.md comark.md direction-variant.md draggable.md drawing.md eject-theme.md frontmatter-merging.md global-layers.md icons.md import-snippet.md importing-slides.md index.data.ts index.md latex.md line-highlighting.md mcp.md mermaid.md monaco-editor.md monaco-run.md monaco-write.md notes-auto-ruby.md og-image.md plantuml.md prettier-plugin.md pwa.md recording.md remote-access.md rough-marker.md seo-meta.md shiki-magic-move.md side-editor.md slide-hook.md slide-scope-style.md slot-sugar.md timer.md transform-component.md twoslash.md vscode-extension.md zoom-slide.md guide/ animations.md component.md exporting.md faq.md global-context.md hosting.md index.md layout.md syntax.md theme-addon.md ui.md why.md work-with-ai.md write-addon.md write-layout.md write-theme.md index.md netlify.toml package.json public/ assets/ arrow-bottom-left.svg code-groups-demo.png demo-cover.png favicon.png logo-circle.png logo-for-vscode.png logo-square.png logo-title.png logo-triangle.png logo.png logo.svg og-image.png screenshots/ cover.png covers.png integrated-editor.png navbar.png presenter-mode.png recording.png slides-overview.png showcases/ composable-vue.png theme-placeholder.png README.md resources/ addon-gallery.md covers.md learning.md showcases.md theme-gallery.md tsconfig.json uno.config.ts vite.config.ts eslint.config.js LICENSE netlify.toml package.json packages/ client/ .generated/ unocss-tokens.ts App.vue assets/ favicon.png logo-title-horizontal.png logo.png logo.svg builtin/ Arrow.vue AutoFitText.vue BlueSky.vue CodeBlockWrapper.vue CodeGroup.vue katex-lines.ts KaTexBlockWrapper.test.ts KaTexBlockWrapper.vue LightOrDark.vue Link.vue Mermaid.vue Monaco.vue PlantUml.vue PoweredBySlidev.vue RenderWhen.vue ShikiMagicMove.vue SlideCurrentNo.vue SlidesTotal.vue SlidevVideo.vue Toc.vue TocList.vue Transform.vue Tweet.vue VAfter.ts VClick.ts VClickGap.vue VClicks.ts VDrag.vue VDragArrow.vue VSwitch.ts Youtube.vue composables/ useClicks.ts useDarkMode.ts useDragElements.ts useDrawings.ts useEmbeddedCtrl.ts useHideCursorIdle.ts useIME.ts useMousePosInSlide.ts useNav.test.ts useNav.ts usePreloadImages.ts usePrintStyles.ts useSlideBounds.ts useSlideInfo.ts useSwipeControls.ts useTimer.ts useTocTree.ts useViewTransition.ts useWakeLock.ts constants.ts context.ts env.ts index.html index.ts internals/ Badge.vue ClicksSlider.vue CodeRunner.vue ContextMenu.vue Controls.vue CurrentProgressBar.vue DevicesSelectors.vue DomElement.vue DragControl.vue Draggable.vue DrawingControls.vue DrawingLayer.vue DrawingPreview.vue ExportPdfTip.vue FormCheckbox.vue FormItem.vue FormSlider.vue Goto.vue IconButton.vue InfoDialog.vue LaserPointer.vue MenuButton.vue Modal.vue NavControls.vue NoteDisplay.vue NoteEditable.vue NoteStatic.vue PresenterMouse.vue PrintContainer.vue PrintSlide.vue PrintSlideClick.vue PwaIndicator.vue QuickOverview.vue README.md RecordingControls.vue RecordingDialog.vue ScreenCaptureMirror.vue SegmentControl.vue SelectList.vue Settings.vue ShadowRoot.vue ShikiEditor.vue SideEditor.vue SlideContainer.vue SlideLoading.vue SlidesShow.vue SlideWrapper.vue ... 487 more

slidev

Skills

Badges

README

Features

Getting Started

Try it Online ⚡️

Init Project Locally

Tech Stack

Sponsors

License

File tree

slidev

Skills

Badges

README

Features

Getting Started

Try it Online ⚡️

Init Project Locally

Tech Stack

Sponsors

License

File tree