Mosaic
Accelerate your UI development
Mosaic allows authors to write once and run anywhere
Mosaic enables UI behaviour to be described using a combination of functional programming and declarative configuration, separating behaviour from presentation to ensure maximum reusability.
Mosaic enables teams to focus on UI presentation
Get a head start on UI development by leveraging UI behaviour that is highly performant, accessible, and fully tested straight out of the box, letting you focus on your project presentation.
Example
The following configuration implements the Accordion pattern:
let counter = 0
export const Accordion = () => {
const id = counter++
return {
state: {
openPanel: 0,
},
actions: {
togglePanel: (state, i) => ({
...state,
openPanel: state.openPanel === i ? -1 : i,
}),
},
elements: [
{
selectAll: "button[accordion-toggle]",
attribute: (state, i) => ({
id: `trigger_${id}_${i}`,
ariaControls: `panel_${id}_${i}`,
ariaExpanded: state.openPanel === i,
}),
on: {
click: "togglePanel",
},
},
{
selectAll: "[accordion-panel]",
attribute: (state, i) => ({
id: `panel_${id}_${i}`,
ariaLabelledby: `trigger_${id}_${i}`,
hidden: state.openPanel !== i,
role: "region",
}),
},
],
}
}
Install
cdn
import { define } from "https://unpkg.com/mosaic"
npm
> npm i mosaic
Roadmap
The current plan is that the Mosaic project will broadly consist of two parts:
- The core library, which can be used to configure and define Mosaics behavioural components
- A suite of behavioural components implementing the most common Web UI patterns