Instant Demos

Online Editor Demos

Run DataNet from browser coding sandboxes like p5.js Web Editor, CodePen, and JSFiddle.

Source-backedRun online nowText Event

What this demo proves

Creative coders and frontend developers can paste the hosted DataNet SDK into an online editor, configure a browser key for that editor's runtime preview origin, and subscribe or publish without a local server.

Platforms

p5.jsCodePenJSFiddleBrowser JavaScript

Payload types

JSON / object

Channel names

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 ready p5.js Web Editor example at https://editor.p5js.org/jshaw3/sketches/JjHwfpmdq.
  • Create or edit a browser API key whose allowed origin includes https://preview.p5js.org.
  • Paste that browser key into API_KEY, save, stop, and run the sketch.
  • Use the same pattern for CodePen and JSFiddle once their runtime preview origins are verified.

Run locally

  • Use the global-mode p5 example in packages/sdk-p5/examples/sketch-global.
  • For local browser keys, use an allowed origin such as http://localhost.

Expected output

  • The DataNet script loads from https://datanet.art/sdk/datanet-p5.js.
  • The sketch authenticates from the p5 preview origin and connects to the configured channel.
  • Pressing space, clicking, tapping, or dragging publishes a test point to the channel.

Troubleshooting

  • The p5 editor UI lives at editor.p5js.org, but sketches run from https://preview.p5js.org; browser keys must allow the preview origin.
  • CodePen and JSFiddle also run code in preview frames; use the frame origin shown in browser devtools, not just the editor URL.
  • Origin restrictions do not include sketch paths. Use narrow channel scopes for browser keys embedded in public sketches.
  • If the SDK script changes, add a query string such as ?v=YYYYMMDD to avoid iframe cache while testing.

Source files