Skip to main content

Render participant videos

To display the videos of all participants you need to show on the screen, you can either render each participant tile manually or choose from our pre built video tile grid components

Render each participant manually

But in the real world, a video tile grid is more complex, it is responsive, tile sizes are dynamic, there are different layouts, the grid handles screensharing etc.

Dyte has ready to use grid components, that you can use out of the box

Grid Components

There are two types of grid components, so that the grid can be easily extended and modularized.

  • Parent Grid component - DyteGrid
  • Child Grid components each having a different layour - DyteSimpleGrid, DyteMixedGrid, DyteSpotlightGrid

Parent Grid Component

The DyteGrid component is a monolith component which handles all grid related events and data on it's own and passes the following props to it's children.

participants[]Active Participants
pinnedParticipants[]Pinned Participants
screenShareParticipants[]Participants who are screen sharing
plugins[]Active Plugins

These props are passed to it's children which it computes from the UI Config which is passed to it. By default it will use the default UI Config.


Try editing the aspectRatio and gap props.

Normal Grid Components

These components just accept the props mentioned above and render the UI.

Read more about them in their Reference pages.


Accepts: participants, pinnedParticipants.

This grid renders just the ParticipantTiles of the participants you pass to it. It also brings pinnedParticipants to the start of the grid.


Accepts: participants, pinnedParticipants.

This grid renders the ParticipantTiles of the participants and pinnedParticipants in separate grids.

Pinned participants are in spotlight area, i.e; larger grid.


Accepts: participants, pinnedParticipants, screenShareParticipants, plugins.

This grid renders screenshares as well as plugins in the main larger view and renders a smaller grid on the right side which is configurable via the UI Config. You can use SimleGrid or SpotlightGrid here.

If you just want to render self twice in a SimpleGrid:

Example for SimpleGrid