FAQ

Assets Handling

You may use static assets like images and videos in your slides. Since Slidev is based on Vite, you can import them directly in your markdown files.

URLs that can be statically analyzed as assets can use relative paths:

![alt](./image.png)
<img src="./image.png" />

In the above case, the URLs will be resolved to /BASE_URL/assets/image.png after build.

However, relative paths in frontmatter and other components will be broken after build:

---
background: ./image.png  # Broken after build
---

<Comp src="./image.png" />

In the above case, the URLs are not statically analyzable and will be preserved as-is, which will result in 404 errors after build.

To solve this, you can place these assets in the public folder and use an absolute path to import them:

---
background: /image.png
---

<Comp src="/image.png" />

For more details, refer to Vite's documentation.

Positioning

Since Slidev is web-based, CSS is the primary way to position elements. Here are some useful tips for position elements:

Grids And Flexboxes

You can use CSS Grids to create complex layouts:

Two columns

<div class="grid grid-cols-2 gap-4">
  <div>
    The first column
  </div>
  <div>
    The second column
  </div>
</div>

Complex case

<div class="grid grid-cols-[200px_1fr_10%] gap-4">
  <div>
    The first column (200px)
  </div>
  <div>
    The second column (auto fit)
  </div>
  <div>
    The third column (10% width to parent container)
  </div>
</div>

And use Flexboxes to create more responsive layouts:

Horizontal

<div class="flex items-center">
  <div>
    First block
  </div>
  <div>
    Second block
  </div>
</div>

Vertical

<div class="flex flex-col items-center">
  <div>
    Centered content
  </div>
</div>

Learn more: CSS Grids, flexboxes, or even Masonry.

Absolute Position

You can use UnoCSS to position elements absolutely:

<div class="absolute left-30px bottom-30px">
  This is a left-bottom aligned footer
</div>

Or use the draggable elements feature:

✨ Draggable Elements

Adjust Sizes

• Adjust all slides's size:

✨ Slide Canvas Size

• Adjust several slides' size:

✨ Zoom Slides

• Adjust some elements' size:

✨ The `Transform` Component