💡 Highlights
Slidev v0.48.0 is one of the biggest changes and improvements released since it launched. Huge thanks to our new team member @KermanX, who pushed a lot of aspects of Slidev and made a lot of cool new features.
🎩 Shiki Magic Move
Shiki Magic Move allows you to do morphing animation between codes, making it smoother to compare code changes in your slides
Screen.Recording.2024-03-10.at.15.53.03.mov
Learn more at https://sli.dev/guide/syntax#shiki-magic-move
✍️ v-mark
Rough Notation
We also integrated Rough Notation to Slidev, making it easier to highlight and notation sections you might want to emphasize.
Screen.Recording.2024-02-24.at.17.29.05.mov
Learn more at https://sli.dev/guide/animations#rough-markers
🧑💻 Runable Monaco Editor
Monaco Editor integrations get refreshed! It is much more performant and robust. In addition, we also introduced the Runnable Monaco that you can edit and execute the code in your slide:
Screen.Recording.2024-03-07.at.23.11.59.mov
Learn more at https://sli.dev/guide/syntax#monaco-editor
📋 New Overview View
We introduced a new /overview
screen for you to review all your slides and notes together:
Screen.Recording.2024-03-08.at.00.45.53.mov
Learn more at https://sli.dev/guide/overview
👆 Clicks Sliders
We introduced the click sliders in both the Overview
and Presenter
views so that you can quickly see the clicks you have for each slide by dragging them to preview each click.
Screen.Recording.2024-03-10.at.15.24.37.mov
📝 Notes Markers
To make your notes (that might be long) in sync with the progress of your presentation, we introduced that [click]
marker to separate your notes into sections so you can follow your notes more easily as you go forward:
Screen.Recording.2024-03-10.at.15.37.23.mov
Learn more at https://sli.dev/guide/syntax#click-markers
🔍 Slide Zooming
You can now have a zooming option for each slide via frontmatter to resize the canvas:
---
zoom: 1.5
---
Your content
Learn more at #1322
🚨 Breaking Changes
Click System Rework
See #1279. This would give the v-click
system a much more reliable behavior and better API to work with. It shouldn't affect most usages unless you are using programmatic conditional heavily — try going through your slides after the upgrade to make sure. You should be good to go!
Monaco Editor Rework
See #1330. At the very beginning, Slidev integrated Monaco Editor in an iframe because of the limitation of hover positioning with scaled slides. @KermanX took a deep look and figured out a solid way to make Monaco aware of the current scaling of the slide. Now, Monaco Editors will directly render in the DOM without iframe - this gives us a much more efficient and robust Monaco experience.
Meanwhile, since this approach makes Monaco components, if you don't use Monaco, it will not ship into your production bundle, and you don't need to turn Monaco on and off anymore explicitly. In that case, Monaco support is on by default for both dev and build now.
We also have a new runnable Monaco Editor that can serve as REPL in your presentation, check the docs for more.
Internal Refactorings
If you are using direct import from @slidev/client/**
, those might break because we took a huge internal refactor to make the code base future-proof. We suggest you import from @slidev/client
(new in v0.48) to use only the public API:
<script setup>
import { useDarkMode, useNav, useSlidevContext } from '@slidev/client'
const { $slidev } = useSlidevContext()
const { currentSlideRoute } = useNav()
const { isDark } = useDarkMode()
// ...
</script>
See https://sli.dev/custom/vue-context#composable-usage
🗺️ Future Plans
We created a few RFC (Request for Comments) issues to address the plans we have for the future:
The major one is that we have a long-term plan to migrate Slidev to use Nuxt as the underlying framework. It would allow us to have built-in server support for production, as well as reusing the rich ecosystem Nuxt has (like installing a module, etc).
Check them out if you are interested. We look forward to hearing from you! Thank you and hope you enjoy Slidev!
Generated changelogs
🚨 Breaking Changes
🚀 Features
two-cols-header
- by @btea in #135 (e83fc)
$page
and $renderContext
context - by @antfu (234e7)
untun
instead of localtunnel
- by @KermanX and @antfu in #1225 and #1286 (d6bb5)
--bind
option - by @KermanX in #1302 (d23d5)
zoom
option in page frontmatter - by @KermanX in #1322 (faef3)
useSlidevContext
, refactor injections - by @antfu (3e55a)
none
for out side of slides - by @antfu (10eb1)
v-mark
powered by Rough Notation - by @antfu in #1331 (61d3f)
forward:
and backward:
variant in UnoCSS for direction-based styling - by @antfu (cf80a)
slideAspect
and slideWidth
ref, resolve #1366 - by @antfu in #1366 (a3fdf)
v-mark
- by @antfu (ff88e)
@slidev/client
- by @antfu (6ece4)
🐞 Bug Fixes
codemirror
import error, again - by @KermanX in #1290 (315f4)
<v-clicks/>
wrapping - by @antfu (aa0ca)
defineProps
- by @KermanX in #1300 (6b633)
defineEmits
caused warnings - by @KermanX in #1306 (28863)
hide
option in frontmatter - by @KermanX in #1314 (2aba0)
VClicks
component - by @KermanX in #1321 (3671d)
{{
in code - by @KermanX in #1316 and #1317 (900b3)
useSlidevContext
to useSlideContext
, use provideLocal
everywhere - by @antfu (061a2)
list overview
button - by @antfu (9490e)
backward:
UnoCSS variant - by @KermanX in #1332 (77c61)
lz-string
- by @KermanX in #1343 (d6fd8)
CodeBlockWrapper
transform generates incorrect ranges
- by @antfu (8f45f)
useTweetScript
- by @KermanX in #1344 (daa61)
Tweet
component - by @KermanX in #1345 (6452c)
lz-string
- by @KermanX in #1348 (a61e2)
monacoTypesAdditionalPackages
from demo - by @KermanX in #1352 (6e9ee)
context.ts
- by @KermanX in #1368 (c917b)
{at:x}
for magic move - by @antfu (14041)
monaco.editor.remeasureFonts()
after editor mounted - by @KermanX in #1376 (4b99d)
findPkgRoot
- by @kamuiiiii in #1396 (65668)
🏎 Performance