Instant Demos
Online Editor Demos
Run DataNet from browser coding sandboxes like p5.js Web Editor, CodePen, and JSFiddle.
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.
Source-backedText Event
Reproduce it
Copy these files to run the demo in your own project.
Take it further — SDK docs
Each platform has a canonical SDK reference with install steps, auth, and full API.
Technical details — compatibility, payload & channel names
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.