# Installation REALM loads from a CDN, so there is nothing to install or build. You need a text editor and a web browser. ## Add REALM from the CDN Put both tags in the `` of your HTML file: ```html ``` `realm.js` starts REALM when it loads. It defines every `` already in the page, watches for new ones, and registers ``. `realm.css` should load before anything renders. It does three things: - hides `` definitions and `` tags, - lays out ``, `` and `` with `display: contents`, - hides custom elements until they are defined (`:not(:defined) { visibility: hidden }`), so a page never flashes unstyled component content. ## Add REALM UI The `@realmorg/ui` package is a set of ready-made `ui-*` components and a theme. Load the theme once per page, after REALM itself. Then import the whole kit with one line: ```html ``` Or import only the components you use. Each one is a file in `components/`: ```html ``` Each file brings its own dependencies. `sheet.html`, for example, imports `dialog.html` for you. See [Components](/components/). ## A complete page ```html My REALM page Hello, REALM ``` Save it as `index.html` and open it in your browser. ## Pin a version `@alpha` is a tag that always points at the newest alpha release. It is the easiest way to try REALM, but jsDelivr caches what a tag points to for up to 12 hours, so a page can keep getting the previous release for a while after a new one comes out. In production, pin exact versions. An exact version never changes, so a release cannot change your pages, and jsDelivr caches it for a week: ```html ``` These are the current versions. Each release lists its changes in the package's `CHANGELOG.md`. ## Hosting the files yourself `` fetches component files with `fetch()`, so a file on another domain needs a CORS header that allows your page. jsDelivr sends `Access-Control-Allow-Origin: *` on every file, which is why the tags above work from any site. To host REALM yourself, install the packages from npm and serve their `dist/` (and, for REALM UI, `components/`) folders from your own domain, or from another domain that sends that header. ```shell npm install @realmorg/realm@alpha @realmorg/ui@alpha ``` ## Sharing JavaScript between components Shared JavaScript, such as a [store](/docs/stores/), is a plain module file. Import it from a component script with a path the browser can load: ```html 0 ``` To write `import { defineStore } from "@realmorg/realm"` in a module the browser loads directly, add an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) that points at the same file the page loads, so there is one runtime: ```html ``` ## Serving pages A page with inline definitions (a `` written directly in the page) works when you open the file straight from disk. `` loads component files with `fetch`, so pages that import your own component files must be served over HTTP rather than opened from `file://`. Any static file server works: your editor's live preview, `python3 -m http.server`, or the static hosting you deploy to. ## Optional: Vite plugin Load REALM from the CDN in a Vite project too. Component files are plain HTML that REALM fetches at runtime, so serve them as static files from `public/`. The [Vite plugin](/reference/tooling/vite-plugin/) is an optional dev tool. It pre-assembles components at build time for pages under a strict Content Security Policy, and writes a `custom-elements.json` manifest for editors. ## Next Continue with the [Quick start](/docs/quick-start/).