Demos

Every demo of the monorepo is built with yarn workspace @ribajs/doc build:demos and can be run right here in the browser. The status comes from the manifest of this build.

accessibility

accessibility-gamepad Demo

Renders a visual SNES controller that receives real-time gamepad input via the Gamepad API and interactively highlights the currently pressed buttons (A, B, X, Y, D-pad, etc.).

live519 kB

accessibility-keyboard Demo

Shows a virtual on-screen keyboard that supports numerous international layouts (English, German, Arabic, Japanese and many more), which can be switched via a dropdown menu.

live520 kB

bs5

bs5-accordion Demo

Demonstrates the Bootstrap 5 accordion component in two variants: one with static <template> child nodes and one with dynamic data binding via the items attribute as well as a separate bs5-collapse block.

live822 kB

bs5-dropdown Demo

Shows four variants of the Bootstrap 5 dropdown: the bs5-dropdown component and the rv-bs5-dropdown binder, each of them with a simple list selection and with an integrated real-time search function based on the fuse-search component.

live854 kB

bs5-form Demo

Demonstrates the bs5-form component with a fully validated contact form (name, address, username, terms and conditions checkbox) that automatically outputs Bootstrap 5 toast notifications on success, on error or on invalid input.

live839 kB

bs5-notifications Demo

Shows the notification system with Bootstrap 5 toasts and modals, which can be triggered both programmatically from a component and declaratively via the rv-show-toast-on-[event] binder – including access to the $event and $context objects in the toast content.

live842 kB

bs5-photoswipe Demo

Demonstrates a photo gallery lightbox with random images from picsum.photos, which are laid out in a masonry grid and open a full-screen capable lightbox with zoom, share and navigation controls on click.

live944 kB

bs5-responsive-components Demo

Shows the responsive Bootstrap 5 binders rv-bs5-attr-[breakpoint]-[attribute] and rv-bs5-co-[breakpoint]-[attribute], which set attribute values (e.g. the source or the size of an icon) depending on the currently active viewport breakpoint. In addition, a sidebar is demonstrated that automatically hides on small screens and is shown again on large ones.

live839 kB

bs5-slider Demo

Demonstrates the bs5-slider in three configurations: with default settings, with custom settings (2 columns, drag, infinite loop) and with video slides and autoplay – all of them with previous/next controls and indicators.

live847 kB

bs5-slideshow Demo

Demonstrates the bs5-slideshow component as a flexible Bootstrap 5 carousel with various configurations: single image, several slides visible at the same time, variable widths, autoplay, captions, responsive behaviour, custom templates for controls and indicators as well as passing slides in as an attribute.

live862 kB

bs5-tagged-image Demo

Demonstrates the bs5-tagged-image component, which allows images to be marked with clickable position tags that open Bootstrap 5 popovers with titles and contents. The demo shows different variants such as responsive cover/contain layouts, Bootstrap colors, different shapes as well as the integration into a carousel and a slideshow context.

live13073 kB

bs5-theme Demo

Demonstrates the light/dark theme system of Riba.js with Bootstrap 5, consisting of a fixed navbar with a hamburger menu, a collapsible sidebar and theme toggle buttons. The page automatically reacts to the operating system theme and lets the user switch between light and dark mode.

live837 kB

bs5-toggle-button-sidebar Demo

Demonstrates how bs5-toggle-button, bs5-sidebar and bs5-navbar work together, with a left and a right sidebar that are shown and hidden at the press of a button. The behaviour is responsive: on small screens the sidebars are displayed in overlap mode, on larger breakpoints they push the main content aside.

live838 kB

content

content-slider Demo

Demonstrates the content-slider component, a slider in which each slide contains a background image as well as arbitrary HTML content (title, text, links). Two configurations are shown: one with default values and one with custom column classes and custom arrow icons, to illustrate the customizability of the slider.

live36274 kB

core

core-components Demo

Shows bidirectional data binding between multiple custom elements via the rv-co- and rv-parent binders. A shared input variable is kept in sync between different child components and a parent scope – thus demonstrating how attributes are passed between components.

live240 kB

core-each-item Demo

Demonstrates the rv-each-item binder using a reactive list that can be manipulated with buttons for all standard array methods (push, pop, shift, unshift, splice, sort, reset). Every state change is immediately mirrored in the DOM.

live238 kB

empty

empty-template Demo

Shows the pattern in which a component only renders its own template if it does not yet contain any child nodes. This makes it possible to use the component either with its own content or with content supplied from outside.

live240 kB

extras

extras-game-loop Demo

Demonstrates the Gameloop class from @ribajs/extras, which provides a game-like update-render loop with a fixed logic rate and interpolated rendering. Concretely, a red box moves back and forth at a constant speed while the current FPS count is displayed.

live246 kB

extras-image-events Demo

Demonstrates image load events (load, error, binder-changed) via Riba's binding system by displaying an image that can be replaced with a random one at the press of a button. All triggered events are logged with a timestamp in a live console.

live593 kB

extras-scroll-events Demo

Demonstrates the rv-scroll-events binder from @ribajs/extras, which extends a scroll area with custom scroll events such as scrollstart, scrollended, scrollleft, scrollright, scrollup, scrolldown and scrolling. All triggered events are displayed together with the current scroll position in a live console on the side.

live593 kB

extras-touch-events Demo

Demonstrates the rv-touch-events binder from @ribajs/extras, which enriches a touch zone with touch and gesture events such as tap, doubletap, taphold, swipe (in all four directions) as well as tapstart/tapend. All triggered events appear with coordinates and a timestamp in a live console.

live502 kB

fuse

fuse-search Demo

Demonstrates the fuse-search component from @ribajs/fuse, which is based on the fuzzy search library Fuse.js and provides a real-time search filter feature for lists. The demo shows two use cases: a standalone search list and a filter search integrated into a Bootstrap 5 dropdown with selection feedback.

live850 kB

i18n

i18n-static Demo

Demonstrates the internationalization system (@ribajs/i18n) with statically embedded translations for German and English. A language switcher allows the texts, HTML content, input field values and placeholders of a newsletter form to be switched live between the languages via binding.

live600 kB

leaflet

leaflet-map Demo

Demonstrates the integration of the Leaflet.js map library into Riba.js via the leaflet-map component. An interactive map with configurable center, zoom level and a marker with popup is rendered.

live621 kB

monaco

monaco-editor Demo

Shows the integration of the Monaco editor (the editor from VS Code) as a Riba.js component for rich text HTML input. A simple form with a title field and a full-fledged code editor for HTML content with a save button is demonstrated.

live470 kB

Other

iconset Demo

Demonstrates the @ribajs/iconset package by displaying all available SVG icons as bs5-icon components in a responsive grid. Via an integrated bs5-colorpicker the color of all icons can be adjusted interactively using HSL color selection.

live1210 kB

jsx Demo

Shows how Riba.js components are created with JSX/TSX as template language, including a Bootstrap 5 page navigation with sidebar, navbar and dark mode toggle. Additionally, an embedded component demonstrates loading Markdown files as component template.

live836 kB

lottie Demo

Shows the various configuration options of the Lottie animation player (@ribajs/lottie) in Riba.js. The demo covers playing animations by URL or JSON object, different playback modes (Bounce, Hover, Loop), background colors, custom styling and event handlers.

live719 kB

luxon Demo

Documents all Riba.js formatters of the @ribajs/luxon module for the Luxon date library. The formatter prefixes lx- (DateTime), lx-duration- (Duration) and lx-interval- (Interval) are illustrated with live outputs of the respective methods such as lx-now, lx-local, lx-utc and lx-from-seconds.

live642 kB

moment Demo

Demonstrates the Moment.js formatters of the Riba.js moment module for date formatting and time calculation. The demo shows formatters like toMoment, dateFormat, duration, humanize, asSeconds/Minutes/Hours/Days as well as a moment-timer component as countdown timer.

live527 kB

podcast Demo

Demonstrates the Podlove Web Player as a Riba.js component (@ribajs/podcast) with real podcast episode data. The demo contains a fully embedded player with chapter marks, transcripts and contributors as well as a podlove-play-button to start another episode.

live1009 kB

podcast

podcast-fixed-player Demo

Shows the podlove-fixed-web-player variant, where the podcast player is displayed as a fixed footer at the bottom of the screen. A podlove-play-button in the page content starts playback in the fixed player.

live1009 kB

router

Router Slide Transition Demo

This demo shows directional page transitions (next/prev) with the new declarative transition API in @ribajs/router.

live499 kB

router-view Demo

Shows client-side navigation with the router-view component from @ribajs/router across several HTML pages. A shared navigation bar is kept across page changes, while the main content is replaced dynamically, without reloading the page.

live768 kB

rv

rv-video Demo

Shows the rv-video component for responsive video streaming with automatic source switching depending on the viewport width (mobile vs. desktop). Additionally, the demo demonstrates dynamically selecting a video source via dropdown as well as custom video controls (play/pause, mute) with Bootstrap 5 icons.

live38077 kB

tw

tw-accordion Demo

Demonstrates the tw-accordion component in two variants – with show-only-one="true" so only a single panel is open at a time, and with show-only-one="false" so several <template> panels stay expanded together – plus the standalone tw-collapse, configured through its title, content and collapsed attributes and filled with arbitrary HTML.

live519 kB

tw-basics Demo

Collects the small building blocks of the Tailwind module in one page: tw-alert, tw-badge, tw-avatar, tw-card, tw-kbd, tw-skeleton, tw-progress, tw-rating, tw-breadcrumb, tw-button, tw-tooltip, tw-swap, tw-pagination, tw-colorpicker and tw-collapse, each shown with its size, type and state attributes and, where the element needs no interaction markup, in its Tailwind-styled default. The standalone collapse sections are opened with the rv-on-click binder on the trigger button.

live531 kB

tw-dropdown Demo

Demonstrates the tw-dropdown component – a basic menu, four variants that differ only in their placement attribute, one that is operated with the keyboard and one with icon-decorated items – where the trigger is marked with data-dropdown-trigger and the panel with data-dropdown-menu. The first section adds a tw-navbar whose mobile menu is toggled through the rv-on-click binder, and the keyboard example annotates its shortcuts with tw-kbd.

live530 kB

tw-form Demo

Wraps plain HTML forms in the tw-form component, which collects the field values automatically via auto-set-form-data and, on submit, scrolls to and highlights the first invalid field when scroll-to-invalid-element and animate-invalid-element are set – a registration form, a contact form and a gallery of validation states. Native Tailwind utilities including invalid: variants style the required, email, minlength and pattern cases.

live533 kB

tw-interactive Demo

Groups the interactive Tailwind components into one documentation-style page: a tw-tagged-image with tag children that reveal a caption per pin, a tw-share button that falls back to a dropdown where the Web Share API is missing, a tw-slider with drag scrolling and a tw-collapse FAQ driven by the rv-on-click binder. A tw-scrollspy reads the h2 headings of the main area and renders a sticky table of contents beside it.

live533 kB

tw-notifications Demo

Demonstrates tw-notification-container, which listens on the channel named by channel-name and renders every show-notification event it receives, stacking toasts of each type in the corner and showing a modal dialog with a backdrop. Buttons bound with the rv-on-click binder dispatch those events through an EventDispatcher from @ribajs/events, with kind and type set per notification, while one error toast is kept on screen with timeout: 0; static inline variants of tw-alert close the page.

live520 kB

tw-sidebar Demo

Builds a dashboard layout from three tw-sidebar instances that differ in their position and mode: a left and a right panel in overlap mode, which float above the content behind a dark backdrop, and a left panel in side mode, which pushes the main content aside instead. Each trigger is a tw-toggle-button with a target-id pointing at the sidebar and a nested button bound with the rv-on-click binder, and the main area is laid out with tw-card.

live526 kB

tw-slideshow Demo

Demonstrates the sliding components of the Tailwind module over Tailwind snap-x scroll rows: a full-width tw-slideshow with controls, indicators and drag scrolling, a three-column tw-carousel that advances itself every three seconds, and a tw-slider for card rows. A tw-slide-video inside a slideshow starts and pauses its playback according to the active slide via autoplay-on-active.

live522 kB

tw-tabs Demo

Demonstrates the tw-tabs component, whose panels are declared as <template> children carrying a title attribute, together with the tw-steps wizard in its horizontal and vertical orientation, whose steps likewise come from <template> children with title and description. Both work from those templates alone – no extra binder markup is needed, a step circle is clicked to navigate to it and passed steps show a checkmark.

live521 kB

tw-theme Demo

Demonstrates the light, dark and system theme switching of the Tailwind module through tw-theme-button in its dropdown and icon mode, and then puts the other components under the resulting dark: variant classes: tw-sidebar in overlap mode, tw-notification-container with its modal and toasts, tw-collapse, tw-accordion, tw-dropdown and tw-alert. The backdrop test sections exist to compare the overlay colours while the theme is toggled.

live537 kB