Aurelia without a build step

# Browser without a build step You can run Aurelia from a plain HTML page by importing the framework as a browser ES module. This works well for CodePen demos, reduced bug reproductions, documentation examples, and small pages where a Vite or Webpack setup would be more ceremony than value. For application development, the scaffolded Vite setup is still the recommended path. A build tool gives you TypeScript, file-based templates, CSS imports, optimized output, and local package management. ## What to include A no-build Aurelia page needs these pieces: * A host element, such as ``. * A ` ``` In CodePen, put the host element and the ` ``` The `t` attribute writes translated text by default. Use `t="[html]key"` only when the translated value is trusted HTML that you intentionally want inserted as markup. ## Enhance existing HTML Use `enhance(...)` when the page already contains the markup you want Aurelia to bind. This is useful for progressive enhancement, server-rendered HTML, or a small demo that does not need a custom root element definition. ```html Aurelia without a build step

${message}

``` Use `.app(...)` when Aurelia owns a component host such as ``. Use `.enhance(...)` when Aurelia should bind markup that is already in the document. ## Browser-only constraints No-build examples run as plain browser JavaScript. Keep these constraints in mind: * Browsers do not run TypeScript directly. Use JavaScript in the page, or use a build tool for TypeScript examples. * Decorator syntax needs transpilation. Prefer `CustomElement.define(...)` for no-build examples. * Local `.html`, `.css`, and `.json` imports are bundler features in most Aurelia apps. Inline small templates in the component definition, or fetch external data over HTTP. * If your example fetches local files, serve it from `http://localhost` instead of opening it with `file://`. Browser security rules block many `file://` fetches. * Keep CDN package versions aligned across `aurelia`, `@aurelia/*` packages, and any plugin packages used by those integrations. When an example grows beyond a single page, move it to the normal project setup from the [Quick Install Guide](/getting-started/quick-install-guide.md). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.aurelia.io/getting-started/browser-no-build.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.