Examples

The 21 engine examples (layer 1) and the 7 component examples (layer 2) all run without a build, and each folder's README explains it. Every example follows the rules — CSP meta tag, external scripts, data-action / data-ref, vf.html, token-only CSS — and the repository's browser tests check for zero console errors or warnings and the main behaviour.

layer1/examples	What it shows
01-hello	The smallest vfunc.js page: one <script> tag and one component. esm.html shows the same component as an ES module.	source
02-counter	Production: <script src="https://cdn.jsdelivr.net/npm/vfunc@1.2.0/dist/vfunc.min.js" integrity="sha384-yTR0o8US3nk+D1XIBAsv1O/lMFA5tV3V021xPo8yxyqnBNSxi1rqINVvBOykAEkK" crossorigin="anonymous"></script> · ESM: import vf from 'vfunc'	source
03-todo	A list with one delegated listener per event type for all rows, and escaping of user input.	source
04-methods-refs	Production CDN and ESM lines: see [01 hello](../01-hello/README.md).	source
05-composition	Production CDN and ESM lines: see [01 hello](../01-hello/README.md).	source
06-attach-published-html	"Keep your HTML, control only what you need." The page is a publisher's static HTML. vfunc controls two areas and leaves everything else alone.	source
07-form	Production CDN and ESM lines: see [01 hello](../01-hello/README.md).	source
08-fetch-list	Production CDN and ESM lines: see [01 hello](../01-hello/README.md).	source
09-spa-hash-router	With npm: import vf from 'vfunc'. Script tag: see [01 hello](../01-hello/README.md).	source
10-spa-app	index.html <div id="app"> + <script type="module" src="app.js">	source
11-css-tokens-theme		source
12-with-bootstrap	Existing Bootstrap markup keeps its classes; vfunc only adds behaviour.	source
13-with-tailwind		source
14-before-after-conversion	The AI prompt kit in action: layer1/ai/en/prompt-html-to-vfunc.md (Korean: ko/) applied to a publisher's dashboard.	source
15-with-chartjs	Any library can live inside a vfunc component with four pieces.	source
16-legacy-ie	The same engine as everywhere else, from dist/vfunc.legacy.min.js (ES5 + a Promise polyfill).	source
17-i18n		source
18-extend-plugin	Extend vfunc without editing it (plan section I, EXTENDING.md).	source
19-design-apply	One app, three skins, no JS change (plan section K).	source
20-merge-published	A common case in agency projects: the screen already works, then the publisher's HTML arrives (plan K-4 ⑤). Keep the logic, replace only the render markup, and put the existing hooks back.	source
21-cache-update	Web views, kiosks, installed PWAs and in-app browsers never reload by themselves. Four layers solve it (plan section O, D-013).	source

layer2/examples	What it shows
custom-component	A cart made of the app's own vsPriceTag (vsBadge + vf.fmt) and vfCartLine (vfNumberInput + vsPriceTag), with a brand color and rounder buttons from CSS only.	source
dashboard	Key figures, an order grid and a sales chart; one switch swaps the built-in grid and chart for the Tabulator and Chart.js adapters.	source
gallery	Every layer 2 component on one page, in English and Korean: the static vs markup, the vf instances and their keyboard behavior.	source
landing	A marketing page in plain HTML and CSS, with components only where they add something: cards, figures, a carousel, an FAQ accordion and a sign-up form.	source
legacy-ie	A branch report in ES5 on vfunc-all.legacy.min.js: stat cards, vfGrid with a vfModal on row click, a vfChart, English and Korean.	source
settings-form	vs fields in one form component, validation with the error prop, vfConfirm before a reset, vfToast after saving, in English and Korean.	source
third-party-custom	The same Leaflet map as L0 (direct use in one component), L1 (an app wrapper) and L2 (a contract adapter made from the template).	source

Layer 1's 12, 13 and 15 and layer 2's dashboard and third-party-custom load Bootstrap, Tailwind, Chart.js, Tabulator and Leaflet from a CDN with exact versions and SRI (network needed).
Layer 1's 16 and layer 2's legacy-ie are for IE11 / Edge IE mode: reopen them in IE mode in Edge to check. legacy-ie is a dashboard with layer 2 instances that also runs in IE.
Layer 1's 14 is a published dashboard converted with the AI prompt; before/ is the page exactly as delivered.
Layer 2's custom-component shows your own components built from the official ones (extension level C3).

To run them yourself, clone the repository, run python -m http.server 8080 at its root and open http://localhost:8080/layer1/examples/ and http://localhost:8080/layer2/examples/.