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
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.