# Loading Plainkit

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from PUBLISHING.md, dist/js/plainkit.js and dist/js/loader.js. Do not edit: change the source and run the generator.

This bundle is for Plainkit 0.28.0. Pinned versions come from the GitHub release zips (`plainkit-dist-0.28.0.zip` is the runtime; `plainkit-modules-0.28.0.zip` is the dev tools, unzipped into the same folder, so it lands at `dist/modules/`) or the NuGet package (both units); the Pages site is the latest `main` and is not pinned.

## Ways to get it

| Way | Version | Notes |
|---|---|---|
| Link from the Pages site: `https://skulmunkie.github.io/plainkit/dist/plainkit.min.css` (modules, elements and the gallery sit next to it) | latest `main` | Pages serves one deployment, so it is "latest", not pinned |
| Download `plainkit-dist-<version>.zip` from the GitHub release and copy it anywhere | pinned | the runtime SDK; `manifest.json` (attached too) lists every file with an SRI hash |
| Or take only what you use (**core + modules**, packages.json, #1656): `plainkit-<version>.zip` (core) plus `plainkit.tools-<version>.zip` (the dev tools: the modules, the helper files only they import, and `elements/api.json`, the element API only they read; the npm package and core alone do not carry it) and, for the canvas, `plainkit.canvas-<version>.zip` (`pk-canvas`, its viewport and logic helpers and the SVG toolkit `js/svg/`; core alone has no `<pk-canvas>`) and for Markdown, `plainkit.markdown-<version>.zip` (`pk-markdown`, `pk-markdown-editor` and `js/markdown/`; core alone has neither tag) and for the dock, `plainkit.dock-<version>.zip` (`pk-dock` and the `js/dock-*.js` files; core alone has no `<pk-dock>`) and for editors, `plainkit.ide-<version>.zip` (`elements.d.ts`, `elements.vue.d.ts`, `custom-elements.json`, `web-types.json`, `vscode.html-custom-data.json`; the npm package and core alone do not carry them); unzip the tools zip over the core folder, or load it from the Pages folder `packages/plainkit.tools/` (or `packages/plainkit.canvas/`, `packages/plainkit.markdown/`, `packages/plainkit.dock/`, `packages/plainkit.ide/`; core is `dist/`). `plainkit.audit-<version>.zip` is the conformance audit CLI (`audit.mjs`, `tools/audit/`, `tools/strict/`; plain Node, no core code at run time): unzip it anywhere and run `node audit.mjs <path>`, or take the Pages folder `packages/plainkit.audit/`; the tools zip requires it (js/quality.js imports its literal scanner). Each zip has its own `<id>.manifest.json` (SRI hashes, `requires` core at the exact version), attached to the release as `<id>-manifest-<version>.json`. `plainkit-dist-<version>.zip` stays the **full** shape, first class: everything in one download, every path unchanged | pinned | `node scripts/build-packages.mjs --zips <dir>` builds the zips locally and `node scripts/check-package.mjs --zips <dir>` checks them (what `release.yml` runs); nothing goes to npm |
| Download `plainkit-modules-<version>.zip` too when you want the dev tools (theme editor, logs, dock, ...) | pinned | its own unit, `modules/` at the top of the zip: unzip it into the runtime folder so it lands at `dist/modules/`; `dist/modules/manifest.json` (attached as `plainkit-modules-manifest-<version>.json`) lists its files with SRI hashes |
| `dotnet add package PlainKit.Blazor` | pinned | the package carries `dist` (the runtime, and the modules under `dist/modules/`, which the dock, theme editor and log viewer wrappers use) as static web assets; an app that declares `<PlainKitExtras>` publishes only the extras it lists, and the package carries the PKB001 analyzer (`analyzers/dotnet/cs`) |
| `npm install plainkit` | pinned | the runtime only (`dist` without `dist/modules`; the tools are the modules zip or the NuGet package, which need the layout the zip has); only if an npm token is configured (see PUBLISHING.md). Bundlers import through the `exports` map (`plainkit`, `plainkit/elements/<name>`, `plainkit/css`, `plainkit/skills/*`); `plainkit/dist/*` stays mapped for one release; `sideEffects` names the element modules and CSS because each element registers itself on import |

The tag does not carry `core/dist` (it is generated, not committed), so there is no CDN link by tag and none is advertised. Pinned versions are the GitHub release zip and the NuGet package; the Pages site is the latest `main`. (A CDN over the npm package may come later.)

## Wire a page

Link one stylesheet and start the elements from a script file (an inline script is blocked under a strict CSP). `plainkit/` below is wherever you copied or serve `dist`. Importing the entry module is not enough: `initPlainkit()` must be called (a `<script src="plainkit/plainkit.js">` alone defines no element). `dist/js/init.js` is the small entry, `initPlainkit` alone; `dist/js/plainkit.js` (also reachable as `dist/plainkit.js`) is the same plus the dynamic-value, theming and colour helpers, in case a page uses those too. `modulepreload` links for the loader, its logger, the element registry and the base every element shares let the browser fetch them in parallel instead of one round trip at a time as each is discovered; worth adding on a page that uses `pk-*` elements.

```html
<link rel="stylesheet" href="plainkit/plainkit.min.css">
<link rel="modulepreload" href="plainkit/js/loader.js">
<link rel="modulepreload" href="plainkit/js/log.js">
<link rel="modulepreload" href="plainkit/elements/registry.js">
<link rel="modulepreload" href="plainkit/js/element.js">
<link rel="modulepreload" href="plainkit/js/element-core.js">
<script type="module" src="app.js"></script>
<pk-alert kind="info" heading="It works">No framework, no build.</pk-alert>
```

```js
import { initPlainkit } from './plainkit/js/init.js';
initPlainkit();
```

The full entry module `dist/js/plainkit.js` (also reachable as `dist/plainkit.js`), verbatim:

```text
Plainkit's full entry: initPlainkit (js/init.js has it alone, with nothing else) plus the dynamic-value, theming, colour and
page helpers, so one import wires all of it. A page that only calls initPlainkit() should import js/init.js instead: importing
this file also fetches dynamic.js, theme.js, colour.js and page.js, whether or not the page uses them.

  <script type="module">import { initPlainkit } from './plainkit/js/init.js'; initPlainkit();</script>
```

Exports of the full entry module: .

## How elements load

`initPlainkit(root = document)` installs the declarative openers, imports the modules of the `pk-*` tags found under `root` (each element is its own module, `dist/elements/<name>.js`, found by name: `pk-card` is `dist/elements/card.js`) and watches for tags added later. A tag with no module (usually a typo, checked against `registry.js`) is logged as a warning by the `loader` scope and stays inert. Exports of `dist/js/loader.js`: `loadElements`, `observeElements`, `planLoad`.

`dist/manifest.json` lists the runtime files with their size and SRI hash (`dist/modules/manifest.json` does the same for the modules unit, `dist/manifest.extras.json` for the files the npm package leaves out, which is also where the agent docs are); the SDK makes no runtime request to another origin. Editor support is generated into `dist/`: `custom-elements.json`, `vscode.html-custom-data.json`, `web-types.json`, `elements.d.ts`, `elements.vue.d.ts`. The npm package does not carry them; they are the package `plainkit.ide` (`plainkit.ide-<version>.zip`, the Pages folder `packages/plainkit.ide/`, and the full `plainkit-dist-<version>.zip` and `dist/`). `elements/api.json` (the element API the dev tools read) is in `plainkit.tools`, not in the npm package.