StackLayout adds whitespace (margin) between flow (block) elements along a vertical axis. Documentation →


BoxLayout is a custom element for generic containers of things. Documentation →


CenterLayout ensures a block-level element is horizontally centered with a max-width value representing the typographic measure. Documentation →


ClusterLayout groups items together with control for the margin between them. Documentation →

NOTE — if flex-gap isn't supported, items will appear flush


SidebarLayout places two elements side-by-side. If space permits it, the sidebar has a set width and the content fills up the rest of the space. If there is not enough space, the elements collapse into a single column, taking up all of the horizontal space.. Documentation →


SwitcherLayout places elements horizontally if there is space, or vertically if not. Documentation →


CoverLayout covers a block-layout element vertically with a centered principle element and accessory elements at the top or bottom. Documentation →


GridLayout creates a responsive grid using CSS Grid. Documentation →


FrameLayout displays an element with an aspect ratio. Documentation →


ReelLayout places elements horizontally and facilitates scrolling overflow. Documentation →


ImposterLayout positions an element over any other element. Documentation →


IconLayout lays out icons inline nicely. Documentation →


Create a global stylesheet under an identifier so it is only added once. If a style with the same id is requested again, it will not be added.


Trim all the whitespace from a CSS template literal.



processHtml takes a HTML string, looks through it for Alembic usage and modifies the HTML to include custom element styles (e.g. for the layouts).

You can optionally provide options to inject extra HTML into the inputHtml too at either the script or style location. This is useful to automatically add the Alembic base styles / scripts from getBaseStyles and getBaseScripts. Your build process could write these files somewhere then make sure they are linked to from the HTML here.

const options = {
extraStyles: [`<link rel="stylesheet" href="/alembic/style.css">`],
extraScripts: [`<script type="module" src="/alembic/script.js"></script>`],

You control where the styles and scripts are injected using a special HTML comments <!-- @openlab/alembic inject-css --> and <!-- @openlab/alembic inject-js -->. You opt in to those features by adding the comment to your HTML.


getStyles takes a HTML string, looks through it for Alembic usage and returns the styles to satisfy it. This is useful for SSR when you have something that has already generated style ids on custom elements and need to get the styles for a whole document in one go.


Get the base styles for non-dynamic Alembic. Useful for creating a stylesheet during SSG to be linked to from a HTML document.

const sourcecode = await getBaseStyles()


Get the scripts as a string to run Alembic in-browser. Useful for creating a script during SSG to be linked to from a HTML document.

const sourcecode = await getBaseScripts()