JavaScript / CDN

Load Revo UI from a URL with a standard browser import, or use a classic script and the RevoUI global. Both browser builds bundle the rendering runtime and shared utilities: no npm install, JSX compiler, import map or framework runtime is required. Modern browsers are required.

The examples below target version 4.0.9. These new browser files become available on jsDelivr and unpkg after that npm version is published. Keep JavaScript and CSS pinned to the same version; use a local HTTP server rather than opening an HTML file directly.

Browser ES module import

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Revo UI without a build step</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@revolist/[email protected]/styles.css">
<body class="rv-ui">
<div id="report-action"></div>
<script type="module">
import { createFrameworkMount, uiComponents } from 'https://cdn.jsdelivr.net/npm/@revolist/[email protected]/browser/revo-ui.js';
const mount = createFrameworkMount(document.querySelector('#report-action'), () => {});
let count = 0;
function update() {
  mount.render(uiComponents.Button, {
    variant: 'primary',
    children: 'Create report · ' + count,
    onClick: () => { count++; update(); },
  });
}
update();
// For a single-page app, call mount.destroy() before removing this view.
window.addEventListener('pagehide', () => mount.destroy(), { once: true });
</script>
</body>
</html>

Classic script tag

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Revo UI without a build step</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@revolist/[email protected]/styles.css">
<body class="rv-ui">
<div id="report-action"></div>
<script src="https://cdn.jsdelivr.net/npm/@revolist/[email protected]/browser/revo-ui.global.js"></script>
<script>
const { createFrameworkMount, uiComponents } = RevoUI;
const mount = createFrameworkMount(document.querySelector('#report-action'), () => {});
let count = 0;
function update() {
  mount.render(uiComponents.Button, {
    variant: 'primary',
    children: 'Create report · ' + count,
    onClick: () => { count++; update(); },
  });
}
update();
// For a single-page app, call mount.destroy() before removing this view.
window.addEventListener('pagehide', () => mount.destroy(), { once: true });
</script>
</body>
</html>

For unpkg, replace the prefix with https://unpkg.com/@revolist/[email protected] and keep the same file paths. Self-hosting the published files uses the same API. Call mount.render to update a control and mount.destroy() when its host view is disposed. Your labels and callbacks stay in ordinary JavaScript.

The complete browser bundles include the component catalog and PDF engine. For smaller, tree-shaken application builds, use the npm framework entries above. React, Vue, Angular and Svelte adapters still require their own framework.

Optional PDF viewer setup

Also load browser/pdf-viewer.css. Copy browser/pdf.worker.min.mjs from the same package version to your own origin and pass its URL as workerSrc. The worker must be served over HTTP(S); a cross-origin CDN worker URL cannot be passed directly to the browser Worker constructor. Your PDF files and additional PDF assets must allow access from your page.