Demos

Every page here is served by Markout and rendered before it reaches the browser. View source on any of them: the markup you see is the markup that arrived — and every card links what was written, in the repository, beside it.

bootstrap-kit

Kitchen Sink

Every component in @markout-lang/bootstrap-kit, on one page, in use.

source

application

Orbit

An operations console built out of the kit. Its data is a directory of JSON files, fetched while the page renders — no back end, and the browser asks for nothing.

source

application

Desk

The other half of Orbit: a small support desk with a service of its own. A search the server answers, a thread that cannot be asked for until the list has replied, a reply that POSTs, and one value it refuses to publish.

source

bootstrap-kit

Before and after

The same marketing page written twice: once by hand, once with the kit. All the difference is in the first 35 lines.

the hand-written twin source

std-kit

Data sources

@markout-lang/std-kit: a page that reads its data on the server and ships it rendered. Read the source of what is served — that is the point.

source

language

The README, running

Every example from the README as a page you can open.

source

application

Setlist

A small application with a kit of its own — components that are not a CSS framework wrapper.

source

web components

Shoelace

Web components instead of CSS classes: `:prop-` and `:on-` against a custom-element library.

source

css framework

Tailwind

A utility framework has no components to wrap, so the kit is a `<link>`. The palette is a value instead: one reactive rule retunes every `brand` utility on the page.

source

web components

Web Awesome

The same idea again, against a different component library.

source