Possibility to arrange slides on a grid as in reveal.js

Sequential arrangement of slides
Right now the slides are simply arranged sequentially

Slides arranged on a grid
It would be nice to have slides arranged on a grid, as implemented in reveal.js. It would be very useful when teaching classes. With slides on a grid, the first slide of a column would be the one with the teaching content, and the ones below could be used as a virtual whiteboard.

Possible alternative
A possible alternative would be to have a whiteboard plugin. With the possibility to pull up a whiteboard associated with each slides.

I like the idea, but one limitation I found in Reveal.js grid is that you can only append them down or right, since all slides are arranged in a 2D space. I would like to be able to add them to the left too, also if they would "overlap" in a 2D space, and maybe move to anywhere else when doing a transition, not only to the close slides.

How should this be implemented, as a vue component?

I use this feature to design presentations where I can go into more details only if needed. The top slides are the main content and if I get questions or feel I need to go deeper then I move down.

That would be good to have.

I'd very much like this as well, this is my favorite design decision from reveal.js and it saddened me to see it not implemented in slidev.

To clarify though for my use-case, a whiteboard plugin does not help at all. The value for me is being able to organize topics logically into "chapters" such that every section or chapter starts in a new column. This helps not only when creating slides because I can lay out my thoughts better, but because I can more easily organize/move around slides by topics.

Additionally, while presenting it's much faster for me to navigate to any other specific slide because I first identify the column by scrolling horizontally, and then I scroll vertically within that column to the specific slide. Less clicks to get to where I need to which is super important when presenting live!

Count my vote for this feature!

My use case involves incorporating additional content "under" a slide. I use the same deck to present to different audiences. When addressing business people, I stay at the top level and do not need to skip slides. When presenting to a technical audience, I include the additional content.

The same presentation, adapted to the audience.

Thanks for slidev, love it !

I also vote for this feature!
It's the only thing that I miss from reveal.js and I think it's very useful, as it has already been noted, for bonus slides or to organize the flow of a presentation.

@psifertex

Yep, vertical slides would be great. My company gives a lot of courses, we make our material in Markdown and have our own presentation CLI to make a presentation out of it. We organize the chapters/modules of our course the same way @psifertex explained.

Would be great if Slidev got it. Reveal.js is getting less appealing every day. I'm hoping we can switch to Slidev.

This feature might need big changes to how Slidev handles slide switching. It would be great if someone could share real slide examples as use cases :)

And here's jsut a brainstorming idea (still very raw)

syntax example:

---
src: ./pages/imported-slides.md
---

# Navigation

Hover on the bottom-left corner to see the navigation's controls panel

In current version, this would only show content from imported-slides.md. The proposal is to:

First display the local content (# Navigation section)
Then show the imported slides
Client NavControls could switch to vertical mode
Imported slides would be collapsible under the # Navigation section for vertical mode

Benefits:

Keeps main markdown file clean and structured
Maintains backward compatibility
Future extensibility (e.g. more yaml config likeverticle-default: true)

Here's a few examples:

https://github.com/psifertex/breaking_decompilers
preview: http://psifertex.github.io/breaking_decompilers

https://github.com/psifertex/a-brief-history-of-ctf
preview: https://psifertex.github.io/a-brief-history-of-ctf/#/

(just press escape to see the 2d overview and see how navigation works)

Add grid slide navigation; resolves slidevjs#1187

This is a feature I've wanted for a long time. Had AI implement it, seems to work great but I'm not webscale enough to give it a proper review. Sharing it here if someone else would like to take it up. Diff is fairly small, ~400 lines: main...ElykDeer:slidev:main

Has docs, tests, and all that. Only note is that metadata between two slides in the same col might be a little weird.

Add grid slide navigation; resolves slidevjs#1187

@ElykDeer

@ElykDeer Why don't you create the PR?

I think we should use a YAML-friendly syntax instead of the -- separator. I tried rebasing the patch onto main, but I think the community needs to specify more precisely how we want to implement this feature.

EDIT: in my opinion if we want to recycle the idea we might be use ----.

@wbxl2000

@wbxl2000 idea is better! Maybe I can implement it and see if it works

Add grid slide navigation; resolves slidevjs#1187

@wbxl2000

Rebased my branch, I'll open a PR.

Changed from -- to ---- so there don't need to be any parser changes.

---- is basically a shortcut for nested: true; if you have a normal metadata block with nested: true and a src: include in there it should nest the whole sub-deck under the slide above it. If you have nested: true on just a single slide, it'll nest under the slide above it. Could change it to/add verticle-default: from @wbxl2000's suggestion if that's strongly desired.

I don't think the right way to do this is to put slides in 2d space. The right way to this feature is have slides organized as a hierarchy.

Category 1
- Sub category a
- Sub category b
Category 2
- Sub category c
- Sub category d
Category 3
- Sub category e
- Sub category f
  - Sub-sub g
  - Sub-sub h
Category 4

Then every time you have a sub-category you have a children you project that as a pivot. So for examine.

Slides arrange like this

[1] -> [2] -> [3] -> [4]

But then you pivot for the sub categories.

[1] -> [2] -> [3] -> [4]
[a]    [c]    [e]
[b]    [d]    [f]  -> [g] - > [h]

Order: 1ab2cd3efgh4

This gives you the advange of being able to pivot again for the next level, if desired -- if not you lose nothing. It turns a presentation gimmick into a hierarchal organization.

Anther great thing about it is, it's not not a seperate mode. Everything become a hierarchal slide show, but the older slide shows merely render child-less.

No, we want rows and cols. Not an arbitrary web of slides. Sub categories for subcategories makes this needlessly complex.

Agreed. The 2d arrangement is intentional and works very well for my needs.

@ElykDeer

For what it's worth, I've also been working on my own changes to implement this on top of @ElykDeer's branch. Happy to PR it if there's interest.

https://github.com/psifertex/slidev

Makes it simplier, not more complex. The proposed method introduces a new display mode and two modes of rendering a slide deck. It also requires you to manually structure your slides on a 2d grid, whereas that can be inferred if you just naturally structure your slide's hierarchy based on their content (which allows reflowing).

Navigation Menu

Repository navigation

Possibility to arrange slides on a grid as in reveal.js #1187

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Possibility to arrange slides on a grid as in reveal.js #1187

Description

Activity

piranna commented on Dec 19, 2023

Marco-Christiani commented on Oct 21, 2024

heyalexnet commented on Nov 13, 2024

sultaniman commented on Dec 30, 2024

psifertex commented on Jan 8, 2025

jpgehrig commented on Feb 19, 2025

encelo commented on Mar 10, 2025

JPtenBerge commented on Jun 6, 2025

wbxl2000 commented on Jul 15, 2025

psifertex commented on Jul 17, 2025

ElykDeer commented on May 12, 2026

watermarkhu commented on May 15, 2026

tiziodcaio commented on Sep 8, 2026

tiziodcaio commented on Sep 8, 2026

ElykDeer commented on Sep 16, 2026

EvanCarroll commented on Oct 14, 2026

ElykDeer commented on Oct 14, 2026

psifertex commented on Oct 14, 2026

psifertex commented on Oct 14, 2026

EvanCarroll commented on Oct 14, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions