Media Block
The Media block displays a set of images and videos as a gallery — a grid or list of tiles that open in a full-screen viewer on click. Content comes in two modes: Static (you supply URLs or bind an array) and Mapped (each media attribute is extracted from fields in your bound data).
Media Source Modes
| Mode | How data is provided | Use case |
| Static | Supply URLs directly or bind an array of URLs | Fixed asset lists, simple bound arrays from APIs |
| Mapped | Point each media attribute (URL, name, caption, file type) at fields of bound objects | Records with attachment arrays, custom data shapes where URL/type/name are separate fields |
Media — Content Properties
| Property | Type | Default | Appears When | Description |
| type | "STATIC" | "MAPPED" | STATIC | Always | Whether media items come from direct URLs or from mapped object fields |
| src | URL string, array of URLs, or array of objects (bindable) | — | type = STATIC | The media data. Accepts a single URL, a URL array, or an array of media objects |
| dataSource | array of objects (bindable) | — | type = MAPPED | The bound data array. One gallery tile per item |
| mappings.url | field path | — | type = MAPPED | Field path to the media URL within each object |
| mappings.name | field path | — | type = MAPPED | Field path to the media item's display name/caption |
| mappings.fileType | field path | — | type = MAPPED | Field path indicating whether an item is an image or video |
| interactions | event list | — | Always | On Click event handler for gallery tile clicks |
| permissions | permission rule | — | Always | Restrict who sees the block |
Media — Appearance Properties
| Property | Type | Default | Description |
| layout | grid | list | grid | Grid shows tiles in columns; List shows one tile per row |
| columns | number | 2 | Number of columns in grid layout |
| aspectRatio | ratio token (1:1, 16:9, 4:3, etc.) | 1:1 | Aspect ratio for gallery tiles |
| showCaption | boolean | true | Show the media item's name/caption below the tile |
| styles | style set | — | Width, height, margin, padding, gap between tiles |
| visibility | conditions | — | Show/hide the block |
Video Block
The Video block embeds a single video player. It supports hosted video URLs, autoplay, loop, muted start, poster image, and controls visibility. Use it for a full standalone video experience; for a mixed gallery of images and videos, use the Media block instead.
Video — Key Properties
| Property | Type | Default | Description |
| src | URL string (bindable) | — | The video file URL. Supports mp4, WebM, and other browser-supported formats |
| poster | URL string (bindable) | — | Thumbnail image shown before the video plays |
| autoplay | boolean | false | Start playing automatically on load. Most browsers require muted = true for autoplay to work |
| loop | boolean | false | Loop the video when it reaches the end |
| muted | boolean | false | Start the video muted. Required for autoplay in most browsers |
| controls | boolean | true | Show browser-native video controls (play/pause, volume, fullscreen) |
| objectFit | cover | contain | fill | contain | How the video fits within its container box |
| interactions | event list | — | On Click, On Play, On Pause, On End event handlers |
| visibility | conditions | — | Show/hide the block |
Note: Autoplay requires muted = true in most browsers: Browser autoplay policies block autoplay with sound. Set both autoplay and muted to true for silent autoplay to work reliably.
Audio Player Block
The Audio Player block embeds an audio player for playback of audio files. Use it for voice recordings, music clips, or any audio content bound from your data.
Audio Player — Key Properties
| Property | Type | Default | Description |
| src | URL string (bindable) | — | The audio file URL (mp3, WAV, OGG, etc.) |
| autoplay | boolean | false | Start playing automatically on load |
| loop | boolean | false | Loop the audio when it reaches the end |
| controls | boolean | true | Show built-in playback controls |
| title | string (bindable) | — | Display name for the audio track shown above the player |
| interactions | event list | — | On Play, On Pause, On End, On Time Update handlers |
| visibility | conditions | — | Show/hide the block |
PDF Viewer Block
The PDF Viewer block embeds a PDF document directly in the page, allowing users to read, scroll, and navigate pages without leaving the app. Supports URL-sourced and uploaded PDFs, page navigation controls, and zoom.
PDF Viewer — Key Properties
| Property | Type | Default | Description |
| src | URL string (bindable) or uploaded file | — | The PDF source. Can be a URL from your data or an uploaded file from the builder |
| initialPage | number | 1 | Which page to show when the viewer first loads |
| showToolbar | boolean | true | Show the built-in toolbar with page navigation, zoom, and download controls |
| fitMode | "width" | "page" | "height" | width | How the PDF page fits in the viewer area |
| styles | style set | — | Width, height (set an explicit height for the viewer to have a scrollable area) |
| interactions | event list | — | On Page Change event handler |
| permissions | permission rule | — | Restrict who sees the block |
Warning: Set an explicit height: The PDF Viewer needs a defined height to create a scrollable viewing area. Without a height, it may collapse to zero or show only a single page. Use Styles → Height (e.g., 600px or 80vh).
PDF Viewer — Examples
Lottie Animation Block
The Lottie Animation block renders Lottie JSON animations — lightweight, scalable vector animations — directly in the page. Control playback speed, looping, autoplay, and direction. Use for loading animations, success celebrations, empty-state illustrations, or any motion graphic.
Lottie Animation — Key Properties
| Property | Type | Default | Description |
| src | URL string or uploaded JSON (bindable) | — | The Lottie JSON animation file. Supports a URL to a .json file or an uploaded file |
| autoplay | boolean | true | Start the animation automatically when loaded |
| loop | boolean | number | true | Loop the animation. Set to a number to repeat a specific number of times |
| speed | number | 1 | Playback speed multiplier. 1 = normal, 2 = double speed, 0.5 = half speed |
| direction | "forward" | "backward" | forward | Playback direction |
| hover | boolean | false | Play animation only while the mouse hovers over it |
| styles | style set | — | Width and height of the animation canvas. Lottie scales to fit |
| visibility | conditions | — | Show/hide the block |
| permissions | permission rule | — | Restrict who sees the block |
Lottie Animation — Methods
| Method | Description |
play | Start or resume the animation |
pause | Pause the animation at the current frame |
stop | Stop and reset to the first frame |
goToAndPlay(frame) | Jump to a specific frame and play from there |
goToAndStop(frame) | Jump to a specific frame and pause |
Lottie — Examples
Which Block to Use for Media
| You want to… | Use |
| Display a browsable gallery of images and videos | Media |
| Show one standalone video with a full player | Video |
| Play an audio file with controls | Audio Player |
| Embed a PDF document in the page | PDF Viewer |
| Display a Lottie JSON vector animation | Lottie Animation |
| Show one static image | Image |
| Display a swipeable set of media slides | Carousel |
Frequently Asked Questions
My PDF Viewer shows only a blank area. What is wrong?
The most common cause is a missing explicit height. PDF Viewer does not auto-size to its content — you must set a fixed height (e.g., 600px or 80vh) on the block or its parent container. The second common cause is a CORS restriction on the PDF URL; host the PDF on the same origin or a CDN that sets permissive CORS headers.
Why doesn't my video autoplay?
Modern browsers block autoplay with audio. Set Muted to true alongside Autoplay — muted autoplay is allowed by all major browsers. If you need audio to start immediately (e.g., a news clip), prompt the user to interact first (a play button overlay), then start playback on their tap/click using JavaScript or an On Click action.
How do I trigger a Lottie animation from a button click?
Expose the Lottie block's methods by giving it a block ID. On the button's On Click event, add a Control block action, select the Lottie block, and choose the Play method. To reset it, call Stop first (which returns to frame 0), then call Play. Set Autoplay to false if you only want the animation to run on demand.
Can I show a thumbnail image before a Video block loads?
The Video block does not have a native poster/thumbnail property. As a workaround, overlay an Image block on top of the Video (both in the same container with the Image positioned absolutely) and hide the Image on the video's On Click or On Play event, revealing the video underneath.