Script Tag

Sometimes you just want to get your data on a web page: no package manager, no build steps, no TypeScript. Subscribing to queries deployed to an existing Bijection deployment from a script tag is simple. The page loads the client from the Bijection SDK, which bijection init writes to your project’s node_modules/bijection. Browsers load module scripts over HTTP, so serve the project directory with any static file server, such as python3 -m http.server.

<!doctype html>
<script type="module">
  import { BijectionClient } from "./node_modules/bijection/dist/esm/browser/index.js";

  const BIJECTION_URL = "BIJECTION_URL_GOES_HERE";
  const client = new BijectionClient(BIJECTION_URL);
  client.onUpdate("messages:list", {}, (messages) =>
    console.log(messages.map((msg) => msg.body)),
  );
</script>

VS Code doesn’t support TypeScript autocompletion in HTML files so for better autocompletion you can split your code out into a script file:

<!doctype html>
<form>
  <input placeholder="type here" />
</form>
<div class="messages"></div>

<!--VS Code TypeScript autocompletion doesn't work in HTML files so use a file-->
<script type="module" src="./script.js"></script>

import { BijectionClient } from "./node_modules/bijection/dist/esm/browser/index.js";

const BIJECTION_URL = "BIJECTION_URL_GOES_HERE";
const client = new BijectionClient(BIJECTION_URL);

// Functions are named "file:export", like `api.messages.list` in TypeScript.
const api = {
  messages: { list: "messages:list", send: "messages:send" },
};

client.onUpdate(api.messages.list, {}, (messages) => {
  console.log(messages);
  const container = document.querySelector(".messages");
  container.innerHTML = "";
  for (const message of messages.reverse()) {
    const li = document.createElement("li");
    li.textContent = `${message.author}: ${message.body}`;
    container.appendChild(li);
  }
});

document.querySelector("form").addEventListener("submit", (e) => {
  e.preventDefault();
  const inp = e.target.querySelector("input");
  client.mutation(api.messages.send, {
    body: inp.value,
    author: "me",
  });
  inp.value = "";
});

See the Script Tag Quickstart for instructions for setting up a new Bijection project.

Get Started

Platform

Data and Operations

Guides

Client Libraries

Tools

API Reference