datanet-examples

Standalone example projects for the DataNet realtime platform. Each directory is self-contained and uses published SDK packages — no monorepo setup needed.

---

Examples

Path	SDK	What it shows
browser/basic-subscribe	@datanet/core	Browser pub/sub — connect, subscribe, publish JSON
browser/binary-dmx	@datanet/core	Browser DMX sender — 4-fixture sliders sending binary/dmx frames
node/pubsub	@datanet/core	Node.js publisher + subscriber — JSON messages, env-based config
node/binary-dmx	@datanet/core	Node.js rainbow DMX sweep over a binary channel
p5/live-scatter	@datanet/p5	p5.js live scatter plot — global mode, pub/sub, touch/mouse input
react-basic	@datanet/core	Beginner Vite + React pub/sub — connect, publish JSON, and receive messages
react	@datanet/core	Advanced / full application Vite + React Live Room
nextjs	@datanet/core	Advanced / full application Next.js 14 Live Room
react-native	@datanet/core	Advanced / full application bare React Native Live Room for iOS and Android
python/sensor-publisher	datanet-sdk	Simulated sensor publisher in Python
arduino/serial-sensor	—	Arduino sketch emitting JSON readings over USB serial
arduino/serial-bridge	@datanet/core / datanet-sdk	Node.js and Python bridges forwarding serial JSON to DataNet

---

Quick start

Get an API key

Sign up at app.datanet.art and create a project. Your API key looks like ak_... and your channel looks like project.<pid>.demo.

Browser examples

Open index.html directly in a browser — no build step required. The CDN script tag loads the SDK automatically.

<!-- @datanet/core — JSON pub/sub -->
<script src="https://cdn.jsdelivr.net/npm/@datanet/core@0/dist/datanet.browser.min.js"></script>

<!-- @datanet/p5 — p5.js addon (load after p5.js) -->
<script src="https://cdn.jsdelivr.net/npm/@datanet/p5@0/dist/datanet-p5.min.js"></script>

Node.js examples

cd node/pubsub          # or node/binary-dmx
cp .env.example .env    # add your DATANET_API_KEY and DATANET_CHANNEL
npm install
node publish.mjs        # or: node subscribe.mjs

Requires Node.js ≥ 20. Node 22+ has WebSocket built in; Node 20–21 uses the ws package (listed in each example's package.json).

Beginner React example

Start here if you are learning DataNet with React. This example keeps the complete connection and pub/sub flow in one component.

cd react-basic
npm install
npm run dev

Open the local URL, enter an API key and channel, connect, then publish a JSON message. Open a second browser tab on the same channel to see the message arrive in both places.

Advanced React Live Room

The full-application React example adds presence, shared drawing and clearing, pulse events, persistence, and a raw message console. It requires @datanet/core 0.1.2 or newer for the presence helper.

cd react
npm install
npm run dev

Open the local URL and enter a Display Name, a canonical project channel such as project.<pid>.live-room, and an API key with presence access.

Advanced Next.js Live Room

cd nextjs
npm install
npm run dev

The UI is client-rendered so browser storage and the WebSocket SDK never run during server rendering. This example intentionally targets Next.js 14 to match the accompanying spec; review the current Next.js support policy before using that version in a production deployment.

Advanced React Native Live Room

cd react-native
npm install

Continue with the platform setup and CocoaPods steps in the react-native/README.md, then run npm run ios or npm run android.

p5.js examples

Open p5/live-scatter/index.html in a browser, or paste sketch.js into the p5.js Web Editor after adding the DataNet script tag in Sketch → HTML:

<script src="https://cdn.jsdelivr.net/npm/@datanet/p5@0/dist/datanet-p5.min.js"></script>

Python examples

cd python/sensor-publisher
pip install datanet-sdk
cp .env.example .env    # add your credentials
python publish.py

---

SDK references

SDK	npm / PyPI	Source
@datanet/core	npmjs.com/package/@datanet/core	datanet-js
@datanet/p5	npmjs.com/package/@datanet/p5	datanet-js
datanet-sdk	pypi.org/project/datanet-sdk	datanet-python