mashlib-next examples

Static HTML pages with embedded JSON-LD data, rendered by mashlib panes. View source on any page to see how it works.

Built-in panes

👤
Profile
Person with photo, email, and role
foaf:Person
📅
Event
Online conference with date and organizer
schema:Event
📦
Product
Product with price, rating, and brand
schema:Product
📰
Article
Blog post with author, date, and full text
schema:BlogPosting
🏢
Organization
Company with address, team, and founding date
schema:Organization
🔖
Bookmarks
Curated reading list with descriptions and dates
bookmark:BookmarkList
📅
Schedule
Series of monthly events on a timeline
schema:EventSeries
✈
Trip
Train journey with itinerary legs
schema:Trip
📇
Contacts
Address book with team members
vcard:AddressBook
🖼
Gallery
Photo gallery from community events
schema:ImageGallery
🎵
Playlist
Video playlist with prev/next navigation
olo:OrderedList
💬
Chat
Team conversation with avatars and timestamps
mee:LongChat

External panes

🍳
Recipe
Custom pane loaded via <script data-pane>
data-pane
🛡
Credential
Verifiable Credential with issuer and subject
data-pane
🔷
solid-ui
solid-ui widgets lazy-loaded from CDN
data-pane
⚛️
React
React 19 component with useState, lazy-loaded
data-pane
⚡
Preact
Preact + HTM standalone, no build step
data-pane
💚
Vue
Vue 3 with ref(), computed, templates from CDN
data-pane
📝
JSON Schema
Auto-generated form with live validation & JSON-LD output
data-pane

Embedding

🪟
Headless
No header chrome — just the pane viewer via data-chrome="hidden"
data-chrome