feat: Quickstart and client for Plain JS Script Tags (#4161)

# Description of Changes

The PR implements the following updates:

- Create a quickstart guide and client support for using SpacetimeDB
directly in browser with script tags
- A template to easily work with/test the implementation and get started
with script tags

The bundle is served via
`https://unpkg.com/spacetimedb@latest/dist/browser.bundle.js`, which
only works after the package is published to npm, therefore to test
locally we can use the `browser-ts` template and local bundle:
1. Build local bundle
```
cd crates/bindings-typescript
pnpm install
pnpm build
```
2. Use local bundle built in template`index.html` (swap the URL from
`unpkg`)
```diff
- <script src="https://unpkg.com/spacetimedb@latest/dist/browser.bundle.js"></script>
+ <script src="../../crates/bindings-typescript/dist/browser.bundle.js"></script>
```
3. Open `browser-ts/index.html` directly in browser along with
`spacetime start` + publish the module `spacetime publish --project-path
spacetimedb browser-ts`

# Screenshots

<img width="1106" height="707" alt="image"
src="https://github.com/user-attachments/assets/715bea26-f54b-42be-97f9-79dcd57d153f"
/>

<img width="1490" height="855" alt="image"
src="https://github.com/user-attachments/assets/2b1aeaf9-22ba-4ae6-bc63-771805b8c2b9"
/>


<!-- Please describe your change, mention any related tickets, and so on
here. -->

# API and ABI breaking changes

<!-- If this is an API or ABI breaking change, please apply the
corresponding GitHub label. -->

# Expected complexity level and risk

<!--
How complicated do you think these changes are? Grade on a scale from 1
to 5,
where 1 is a trivial change, and 5 is a deep-reaching and complex
change.

This complexity rating applies not only to the complexity apparent in
the diff,
but also to its interactions with existing and future code.

If you answered more than a 2, explain what is complex about the PR,
and what other components it interacts with in potentially concerning
ways. -->

# Testing

<!-- Describe any testing you've done, and any testing you'd like your
reviewers to do,
so that you're confident that all the changes work as expected! -->

- [ ] <!-- maybe a test you want to do -->
- [ ] <!-- maybe a test you want a reviewer to do, so they can check it
off when they're satisfied. -->

---------

Co-authored-by: = <cloutiertyler@gmail.com>

Author: clockwork-tien

docs/docs/00100-intro/00200-quickstarts/00180-browser.md

@@ -0,0 +1,118 @@
+---
+title: Browser Quickstart
+sidebar_label: Browser
+slug: /quickstarts/browser
+hide_table_of_contents: true
+pagination_next: intro/quickstarts/typescript
+---
+
+import { InstallCardLink } from "@site/src/components/InstallCardLink";
+import { StepByStep, Step, StepText, StepCode } from "@site/src/components/Steps";
+
+Get a SpacetimeDB app running in the browser with inline JavaScript.
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/) 18+ installed
+- [SpacetimeDB CLI](https://spacetimedb.com/install) installed
+
+<InstallCardLink />
+
+---
+
+<StepByStep>
+  <Step title="Create your project">
+    <StepText>
+      Run the `spacetime dev` command to create a new project with a TypeScript SpacetimeDB module.
+
+      This will start the local SpacetimeDB server, publish your module, and generate TypeScript client bindings.
+    </StepText>
+    <StepCode>
+```bash
+spacetime dev --template browser-ts my-spacetime-app
+```
+    </StepCode>
+  </Step>
+
+  <Step title="Build the client bindings">
+    <StepText>
+      The generated TypeScript bindings need to be bundled into a JavaScript file that can be loaded in the browser via a script tag.
+    </StepText>
+    <StepCode>
+```bash
+cd my-spacetime-app
+npm install
+npm run build
+```
+    </StepCode>
+  </Step>
+
+  <Step title="Open in browser">
+    <StepText>
+      Open `index.html` directly in your browser. The app connects to SpacetimeDB and displays data in real-time.
+
+      The JavaScript code runs inline in a script tag, using the bundled `DbConnection` class.
+    </StepText>
+    <StepCode>
+```html
+<!-- Load the bundled bindings -->
+<script src="dist/bindings.iife.js"></script>
+
+<script>
+  const conn = DbConnection.builder()
+    .withUri('ws://localhost:3000')
+    .withModuleName('my-spacetime-app')
+    .withToken(localStorage.getItem('auth_token'))
+    .onConnect((conn, identity, token) => {
+      localStorage.setItem('auth_token', token);
+      console.log('Connected:', identity.toHexString());
+
+      // Subscribe to tables
+      conn.subscriptionBuilder()
+        .onApplied(() => {
+          for (const person of conn.db.person.iter()) {
+            console.log(person.name);
+          }
+        })
+        .subscribe(['SELECT * FROM person']);
+    })
+    .build();
+</script>
+```
+    </StepCode>
+  </Step>
+
+  <Step title="Call reducers">
+    <StepText>
+      Reducers are functions that modify data — they're the only way to write to the database.
+    </StepText>
+    <StepCode>
+```javascript
+// Call a reducer with named arguments
+conn.reducers.add({ name: 'Alice' });
+```
+    </StepCode>
+  </Step>
+
+  <Step title="React to changes">
+    <StepText>
+      Register callbacks to update your UI when data changes.
+    </StepText>
+    <StepCode>
+```javascript
+conn.db.person.onInsert((ctx, person) => {
+  console.log('New person:', person.name);
+});
+
+conn.db.person.onDelete((ctx, person) => {
+  console.log('Removed:', person.name);
+});
+```
+    </StepCode>
+  </Step>
+</StepByStep>
+
+## Next steps
+
+- See the [Chat App Tutorial](/tutorials/chat-app) for a complete example
+- Read the [TypeScript SDK Reference](/sdks/typescript) for detailed API docs

pnpm-lock.yaml

@@ -5,6 +5,7 @@ packages:
   - 'templates/react-ts'
   - 'templates/basic-ts'
   - 'templates/vue-ts'
+  - 'templates/browser-ts'
   - 'templates/svelte-ts'
   - 'modules/benchmarks-ts'
   - 'modules/module-test-ts'

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+{
+  "description": "Browser web app with TypeScript server",
+  "client_lang": "typescript",
+  "server_lang": "typescript"
+}

templates/browser-ts/.template.json

@@ -0,0 +1 @@
+../../licenses/apache2.txt