Examples

Plain HTML host

The Quickstart script tag is a complete host with no framework. Plain buttons drive the engine from there:

<button id="add-histogram" type="button">Add histogram</button>
<button id="export-png" type="button">Export PNG</button>
<script>
  // After the Quickstart code: `engine`, `view` and a 'rpm' column exist.
  document.getElementById('add-histogram').onclick = () => {
    const id = engine.charts.add('histogram', { title: 'RPM', settings: { histColumn: 'rpm', histBins: 40 } })
    const el = document.body.appendChild(Object.assign(document.createElement('div'), { style: 'height: 300px' }))
    engine.charts.mount(id, el)
  }
  document.getElementById('export-png').onclick = async () => {
    const blob = await view.exportPng()
    const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: 'rpm.png' })
    a.click()
    URL.revokeObjectURL(a.href)
  }
</script>

This website

The live demo on the home page is the SDK running in this site, in packages/sdk-site/src/home/LiveDemo.tsx.

The Kymoscope web app

The Kymoscope app is a complete UI built on the same public API: src/PlatformApp.tsx creates the engine with a cloud math-channel store, plan limits through setOptions and an upgrade dialog on the limit event; src/workspace/Workspace.tsx builds the source rail, datasets drawer, folder import, worksheet tabs, chart grid, status placeholders and context menus around <Chart>. Read it as a reference for every pattern in these docs.

Publishers

• packages/python/: the Python publishing package (pip install kymoscope).
• examples/synthetic_sender.py: a synthetic multi-channel publisher for load tests.
• examples/lmu_plugin/: a native C++ publisher for Le Mans Ultimate.

Next steps

Start from the Quickstart or go straight to the engine reference.