Vanilla web with ATMX

Start before mounting application code

Treat startup as asynchronous. atmx.init is idempotent and concurrent calls share one initialization. Check its structured result before code issues a query.

import { atmx } from '@axiomcore/atmx';
import { sdk, AxiomDefaultConfig } from './generated/sdk';

const result = await atmx.init(AxiomDefaultConfig);
if (!result.ok) {
  throw new Error(result.error?.message ?? 'Axiom runtime failed to start');
}

mountApplication({ sdk });

Separately loaded code can await atmx.whenReady(). Calling it before any initialization has started rejects rather than silently booting an unknown configuration.

Configuration

Each contract config provides contractUrl and baseUrl. A signature and public key are optional only as a pair. wasmUrl lets an application self-host the engine and pin it with the JavaScript facade.

const config = {
  contracts: {
    service: {
      contractUrl: '/contracts/service.axiom',
      baseUrl: 'https://api.example.com',
      contractSignature: releaseProof.signature,
      contractPublicKey: releaseProof.publicKey,
    },
  },
  wasmUrl: '/assets/axiom_runtime.wasm',
  debug: false,
};

Use generated configuration where possible so endpoint metadata and proof material stay aligned.

Imperative operations

The public ATMX facade includes query, mutate, mutateBytes, targeted invalidate, getCachedQueryData, setQueryData, namespace cache clearing, and full cache purging. It also exposes stream connect, disconnect, and send operations where the contract declares a compatible endpoint.

const profile = await atmx.query('service.users.getUser', { id: 42 });
await atmx.mutate('service.users.updateUser', { id: 42 }, { name: 'Ada' });
atmx.invalidate('service.users.getUser', { id: 42 });

Route strings and payload shapes above are illustrative; use generated symbols for your contract.

Declarative HTML

The DOM scanner recognizes ax-query and ax-mutate scopes, observes added nodes, and connects state-aware descendants. Install the temporary SDK placeholder before a declarative framework hydrates if the generated module loads asynchronously.

<script src="/assets/atmx.umd.js"></script>
<script>atmx.installSDKPlaceholder()</script>
<script type="module">
  import { AxiomDefaultConfig } from '/generated/sdk.js';
  const result = await atmx.init(AxiomDefaultConfig);
  if (!result.ok) console.error(result.error);
</script>

Some declarative argument expressions are evaluated by the ATMX integration. Treat authored attributes as application code, enforce a suitable Content Security Policy, and never render untrusted strings into ax-* attributes.

Authentication and cache

Use setAuthToken, setNamespaceAuthToken, or setGlobalAuthToken for in-memory credentials, then clear them on logout. Cookie sessions follow browser cookie and same-site policy. ATMX query snapshots use sessionStorage; purge sensitive namespaces as part of session teardown.