Muban

Writing components for server-rendered HTML

Backend agnostic

Muban components only care about the rendered HTML, and will bind to that. During development it can render its own templates using lit-html, and are fully typed. Never be slowed down by waiting on backend setup and integration, use mock data to preview all your components.

Component based

Create small reusable components by keeping the template, style and script together, and compose them to build blocks that make up your site. When the HTML is rendered on the server, Muban will attach components to the DOM and manage interaction between them.

Modern setup

Muban uses Typescript to write your components and templates, uses the Vue reactivity API to manage component states, and has an easy way to setup bindings to your components to make them interactive, following a data-first approach.

export default defineComponent({
  name: 'toggle-expand',
  props: {
    isExpanded: propType.boolean.validate(optional(isBoolean)),
  },
  refs: {
    expandButton: refElement('expand-button'),
    expandContent: 'expand-content',
  },
  setup({ props, refs }) {
    const [isExpanded, toggleExpanded] = useToggle(props.isExpanded ?? false);
    const expandButtonLabel = computed(() => getButtonLabel(isExpanded.value));

    return [
      bind(refs.expandButton, { text: expandButtonLabel, click: () => toggleExpanded() }),
      bind(refs.self, {
        css: { isExpanded },
      }),
    ];
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21