`, or use a `pk-workspace` with that id); the demo pages wrap it in a demo shell (`chrome.js`), which you should not copy: build your own frame from `pk-app-shell` with `pk-side-nav` or `pk-navbar` (see `elements-navigation.md`, and the `overlays-nav` template, which shows one). To start from a template: put its markup in your page, keep the page script if one is shown (it is what the demo runs after the shell; its imports assume `plainkit/` is a copy of `dist` next to your page), and change the text and data. ## page: Page Breadcrumbs, title with optional back button, page actions, content, footer. Elements used: `pk-button` `pk-card` `pk-field-list` `pk-stack` `pk-text`. ```html

The page template is breadcrumbs, a title with an optional back button (both in the top bar), page actions, content and a footer. Content goes in cards or any block inside the container.

Slots: crumbs, title, actions, content, footer.

Name

Item one

Status

Active

Created

Sep 12

Amount

$12.00

``` ## app: App shell A whole app from one config: mountApp builds the chrome and each module supplies routes of built-in page types: an overview (dashboard) and an inbox (master-detail). Start here for an app with several areas: `mountApp(el, { brand, modules })`, each module a `defineModule({ id, title, nav, routes })`, each route a page type with its config. `master-detail` shows a list and the open record on one route; it is not the default for a list and its record (two routes, `routed-pair`). `rowHref` and `listHref` only navigate; `mountDetail(pane, id, ctx)` returns a handle with `destroy()`. Elements used: . The full text is long (3143 characters): it is in `references/full/templates.md`, section `app` (kept apart so the group files stay short). ## workspace: Workspace A nav rail, one tab strip over a content pane and a docked inspector. Fills the viewport; rail and pane scroll on their own. Elements used: `pk-button` `pk-field-list` `pk-input` `pk-stack` `pk-tab` `pk-tab-panel` `pk-tabs` `pk-text` `pk-toolbar` `pk-tree` `pk-tree-item` `pk-workspace`. ```html

First item

Second item

Inspector

First item

The pane shows what the active tab selects.

Name

Item one

Status

Active

Created

Sep 12

Amount

$12.00

Second item content.

A docked inspector covers the pane, not the page.

``` Page script: ```js // The inspector is the workspace's docked aside; its toggle and its close button keep asideOpen and the pressed state together. const workspace = document.getElementById('content'); const toggle = document.getElementById('inspector-toggle'); toggle.addEventListener('pk-toggle', e => { workspace.asideOpen = e.detail.pressed; }); document.getElementById('inspector-close').addEventListener('click', () => { workspace.asideOpen = false; toggle.pressed = false; }); // Closing a tab removes it and its panel; the strip then selects a neighbour. const tabs = document.querySelector('pk-tabs'); tabs.addEventListener('pk-tab-close', e => { const tab = e.target.closest('pk-tab'); const panel = tabs.querySelector('pk-tab-panel[value="' + tab.value + '"]'); const all = [...tabs.querySelectorAll('pk-tab')]; const neighbour = all[all.indexOf(tab) + 1] ?? all[all.indexOf(tab) - 1]; tab.remove(); panel?.remove(); if (neighbour) tabs.value = neighbour.value; }); ``` ## routed-pair: List page and record page The canonical list-and-record shape: a list page (search, filter, sort, paging) and a record page (form, save, dirty guard) as two separately routed pages. A row click navigates to the record; Save navigates back. Use this one by default. It is a mountApp module of two page types: `list` (a pk-data-table: search, status filter, sort, paging, empty and error states, all from one `load(query)` callback) and `record` (a form with Save; `load(id)` for an existing record, none for `/new`). The record route is a child of the list route, so the list's nav entry stays current and the breadcrumbs read Things > Thing 7. A row click is `rowHref` (a route change) and Save calls `ctx.navigate('/')`, so a deep link, a refresh and the back button all land in the right place and the route is the only state. The record page marks itself dirty and asks before the tab closes with unsaved edits. Do not put a list and its record on one page (a list with the record stacked below or beside it): it scrolls three ways and the record is off screen while the list is in view. When the record is only a peek at context, open a flyout over the list instead. A tool shell with panes (`routed-list-detail`) is the workspace variant, not the default. Elements used: . The full text is long (4284 characters): it is in `references/full/templates.md`, section `routed-pair` (kept apart so the group files stay short). ## dashboard: Dashboard Stat tiles, a chart area and a table. Elements used: `pk-badge` `pk-card` `pk-grid` `pk-icon` `pk-progress` `pk-stack` `pk-stat` `pk-table`. ```html

Active

Draft

Review

Active

``` ## form: Form and settings Sectioned form with help and validation states and a sticky save bar. Elements used: `pk-button` `pk-card` `pk-field` `pk-form-actions` `pk-grid` `pk-input` `pk-range` `pk-select` `pk-stack` `pk-switch` `pk-text`. ```html ``` ## wizard: Wizard A stepper, one card per step, Back and Next. Elements used: `pk-button` `pk-card` `pk-field` `pk-grid` `pk-input` `pk-stack` `pk-step` `pk-stepper` `pk-toolbar`. ```html

Back

``` Page script: ```js // The stepper, the card title and the Back and Next buttons stay in step: the elements do the rest. const titles = ['Step one', 'Step two', 'Review']; const stepper = document.querySelector('pk-stepper'); const card = document.getElementById('step-card'); const back = document.getElementById('back'); const next = document.getElementById('next'); function update(n) { card.heading = titles[n]; back.disabled = n === 0; next.disabled = n === titles.length - 1; } function show(n) { stepper.current = n; update(n); } back.addEventListener('click', () => show(stepper.current - 1)); next.addEventListener('click', () => show(stepper.current + 1)); // A click on a reached step: the event fires before the stepper moves, so it carries the target index. stepper.addEventListener('pk-step-change', e => update(e.detail.index)); show(stepper.current); ``` ## states: Empty, error and loading What a region shows with no data, on failure and while loading. Elements used: `pk-alert` `pk-button` `pk-card` `pk-cluster` `pk-empty-state` `pk-grid` `pk-skeleton` `pk-spinner` `pk-stack` `pk-text`. ```html

Add one

Explain it and offer a way out.

Two items are queued.Retry now

Loading…

``` ## auth: Auth (sign in) A centred card on a centred shell. Elements used: `pk-button` `pk-card` `pk-checkbox` `pk-field` `pk-input` `pk-stack` `pk-text`. ```html

Keep me signed in

Back to the templates

Product name

One sentence that says what it does

A second sentence for who it is for and why it is better.

Get started

See how it works

Features

One line on the benefit, not the mechanism.

Pricing

$0 per month

One project

Community support

Start free

Popular

$12 per seat, per month

Unlimited projects

Email support

Choose Team

Talk to us

Single sign-on

Named contact

Contact sales

Questions

Yes, at any time; billing adjusts on the next invoice.

Say what the trial includes and how long it lasts.

``` Page script: ```js import { loadElements, observeElements } from './plainkit/js/loader.js'; import { setTheme } from './plainkit/js/theme.js'; setTheme(document.documentElement, new URLSearchParams(location.search).get('theme') === 'light' ? 'light' : 'dark'); loadElements(document); observeElements(document); ``` ## overlays-nav: Overlays and navigation An app page built from the overlay, feedback and navigation elements: app shell with a filterable side nav, breadcrumb, banner, stepper, on-this-page list, dropdown, select, tooltip, confirm popover, drawer, dialog, context menu, loading overlay, pager, command palette and back to top. Elements used: `pk-alert` `pk-app-shell` `pk-back-to-top` `pk-breadcrumb` `pk-button` `pk-card` `pk-cluster` `pk-command-palette` `pk-context-menu` `pk-dialog` `pk-drawer` `pk-dropdown` `pk-grid` `pk-loading-overlay` `pk-menu-item` `pk-nav-item` `pk-pager` `pk-popover` `pk-scroll-progress` `pk-select` `pk-side-nav` `pk-skip-link` `pk-stack` `pk-step` `pk-stepper` `pk-text` `pk-toc` `pk-tooltip`. The full text is long (7336 characters): it is in `references/full/templates.md`, section `overlays-nav` (kept apart so the group files stay short). ## routed-list-detail: Workspace list and record The workspace (tool shell) variant, not the default list-and-record shape (see "List page and record page"): a pk-data-table (search, status filter, sort, pager) in the main pane and the open record in the aside, driven by the route. Use this only for a tool or workspace shell where the list and one record share a screen on purpose (an inspector, a console). A list with its record as two routes is `routed-pair`, the default; a list with the record stacked or beside it on an ordinary page is not offered (it scrolls three ways and the record is off screen while the list is in view). Put the list in the main pane and the record in the aside. The route is the only state: a record active means `aside-open`, `active-pane="aside"`, `aside-label` set to the record's name and `current-row` set to its id; no record means the list alone. A row click, Back, Close, Cancel and Save only change the route, and a handler sets the properties from it, so a deep link, a refresh and the back button all land in the same place. On a phone the workspace shows one pane at a time with a tab strip (list, record) and the header's back arrow (shown below 641px only) returns to the list; a tap on the list tab raises a cancelable `pk-pane-change` that the page vetoes with `preventDefault()` before changing the route. The aside has no header of its own: build one from `pk-page-header` (`variant="section"`, Back and Close in its `actions` slot). The list is one `pk-data-table`: it owns the query (search, status filter, sort, pager), the loading, empty and error states, and the page only answers `load(query)`; `js/list-query.js` is a generic filter/search/sort/paginate function, not page-specific logic. The page-level titlebar's New-thing action is an icon-only `Actions` button (`pk-dropdown` + `pk-menu-item`, the same pattern the shell uses for its own User menu). In Blazor the same page is a `@page` component over `PkWorkspace` and `PkTable` (`CurrentRow`), with the route as the only state (the tabs, search and pager are omitted here for brevity; wire them the same way as the SDK sample: filter/sort/page the list in code, and pass the result as `Items`): ```razor @page "/things" @page "/things/{Id}" @inject NavigationManager Nav Back @code { [Parameter] public string? Id { get; set; } private readonly List _things = [new("1", "Blue widget"), new("2", "Red widget")]; private readonly IReadOnlyList> _columns = [new() { Key = "name", Label = "Name" }]; private Thing? _thing; private string? _name; private string _title = "Thing"; private WorkspacePane _pane = WorkspacePane.Main; private bool _open; // The route is the only state: it says which record is open, and this handler derives everything else from it. protected override void OnParametersSet() { _thing = _things.FirstOrDefault(t => t.Id == Id); _name = _thing?.Name; _title = _thing?.Name ?? "Thing"; _open = _thing is not null; _pane = _open ? WorkspacePane.Aside : WorkspacePane.Main; } private void Open(PkTableRowClickArgs row) => Nav.NavigateTo($"/things/{row.Id}"); private void Close() => Nav.NavigateTo("/things"); private void PaneChanged(PkPaneChangeEventArgs e) { if (e.Pane == "main") Close(); } private record Thing(string Id, string Name); } ``` Elements used: `pk-button` `pk-data-table` `pk-dropdown` `pk-field` `pk-form` `pk-form-actions` `pk-icon` `pk-input` `pk-menu-item` `pk-page-header` `pk-select` `pk-stack` `pk-workspace`. The full text is long (6456 characters): it is in `references/full/templates.md`, section `routed-list-detail` (kept apart so the group files stay short).