Gallery

The page builder, feature by feature. Click a picture for the full size. The screenshots are from the example subtheme (frame_demo) on the Umami demo content; the page was composed by the AI assistant and then changed by hand, as in the video.

Building a page

AI assistant — AI assistantA chat that composes the page from the components of the theme, looks at the result and corrects it. AI assistant

Blocks — BlocksWhat can be placed, by group: components, layouts, fields of the page, views, Drupal blocks, paragraphs, saved blocks.

Search that forgives typos — Search that forgives typos"acordion" finds Accordion.

Structure — StructureThe tree of the layout, to select and reorder what is hard to hit on the canvas.

History — HistoryEvery change since the page was opened or saved; click a step to go back or forward to it.

A component

Fields from the component's props — Fields from the component's propsEach prop of the *.component.yml is a field, with its description as help. Components

Tokens — TokensTyping [ in a text field suggests Drupal tokens of the page.

Media library — Media libraryImages and backgrounds are picked from Drupal's media library, with an image style or a responsive image style.

Layout and style — Layout and styleSpacing, alignment and text for every component, from the scales the theme declares. Tokens, features and styling

Background — BackgroundA colour of the theme's palette, or an image. There is no free colour.

Library — LibrarySave a block and use it on other pages, linked or as a copy. Library of saved blocks

Drupal content

Paragraphs — ParagraphsA paragraph type is a block, edited with the paragraph's own form and saved as you type. Paragraphs

Content — ContentThe fields of the page are Drupal's node form, with every widget; the canvas follows what is typed.

Page settings — Page settingsWith nothing selected: title, state, revision, meta tags, translation, URL alias, authoring.

The result

Preview — PreviewThe page with the unsaved changes, at the widths of the theme's breakpoints.

Preview on a phone — Preview on a phoneA real page in a frame of that width, so the theme's media queries apply.

The published page — The published pageRendered by Drupal as Single Directory Components. No editor code is loaded.

The whole page — The whole pageHero, cards, a quote, an FAQ, a paragraph and a call to action.