Instant Demos

Browser Text Playground

The fastest proof that Data Network works live in the browser.

Hosted in appRun online nowText Event

What this demo proves

A new user can connect in the browser, publish structured or plain-text payloads, and watch live events move instantly across tabs.

Platforms

Browser JavaScript

Payload types

StringJSON / object

Channel names

demo.text.basicCanonical text channel for browser-first and two-tab demos.

Example payload

{
  "text": "hello world",
  "label": "greeting"
}

Compatibility notes

Browser JavaScriptNative

Node.jsNative

PythonNative

p5.jsNative

ProcessingNative

ArduinoJSON wrapped

ESP32 / ESP8266JSON wrapped

Serial bridgeAdapter required

TouchDesignerNot yet supported

Run online

Open the live playground below.
Paste a valid API key and keep the default demo channel or choose your own.
Open a second tab to prove two-browser realtime behavior.

Run locally

Start the web app and open /demo/browser-text-playground.
Use the hosted or local browser SDK bundle already exposed under /sdk.

Expected output

Connected tabs receive each other’s messages in real time.
Plain text sends as strings and valid JSON sends as parsed objects.

Troubleshooting

If the SDK does not load, confirm the web app is serving /sdk/datanet.browser.js.
If connection fails, verify the API key and gateway URLs.

Source files

apps/web/app/demo/DemoPlayground.tsx

Open Download

apps/web/public/sdk/datanet.browser.js

Open Download

Live browser demo

This preserves the current instant-demo flow while the broader gallery and hero demos are being rolled out.

Session

Server-issued public demo session

Channel

Not connectedServer-issued public demo token

The public demo is pinned to demo.text.basic so the sketch below always responds. Switch to Use your own key to test any other project or channel.

Start the public demo to begin receiving messages.

SDK code

This is the same browser SDK flow surfaced as a canonical instant demo.

<script src="/sdk/datanet.browser.js"></script>
<script>
  const client = new DataNet({
    apiKey: "public-demo-session",
    apiUrl: "/api/demo",
    wsUrl: "wss://ws.datanet.art",
  });

  client.on("connect", () => {
    client.subscribe("demo.text.basic", (data, meta) => {
      console.log("received:", data);
    });
  });

  await client.connect();

  client.publish("demo.text.basic", { x: 0.5, y: 0.5 });
</script>