LiveBlocks

This is a basic LiveBlock:

This is another LiveBlock with a label and a different unit:

Here, a LiveBlock with a chart showing previous values:

Showing a beautiful, responsive dashboard with these LiveBlocks is easy, just browse...

You prefer to embbed them in your own website? Easy peasy:

OK, now this how you update your LiveBlock "pYd12Rh13" in real time and for all viewers:

  curl -H 'Authorization: Bearer <secret-key>' \
        -d '{"value": 99}' \
        -X POST https://blocks.live/pYd12Rh13

Of course, you can change other attributes as well:

  curl -H 'Authorization: Bearer <secret-key>' \
        -d '{"value": 11, "label": "Average load", background_color: "#FC8181"}' \
        -X POST https://blocks.live/pYd12Rh13

You want to update the "value" of a LiveBlock through a third-party app webhook that spits JSON? No prob! Just tell the LiveBlock how to fetch the data in the JSON payload:

  // Webhook payload
  {
    orders: [
      {"order_id": 1, "customer_id": 123, "amount": 299},
      {"order_id": 2, "customer_id": 456, "amount": 110}
    ]
  }

{
  "label": "Most recent order",
  "unit": "€",
  "computed_value": "orders[:first].amount",
}

That's great to look at a nice dashboard. It's even better when the dashboard warns us that something is wrong! :

{
  label: "Temperature",
  unit: "°C",
  background_color: "green",
  alerts: [{
    "name": "Too hot",
    "when": ">=35",
    "email": "pierre.hurtevent@gmail.com",
    "sms": "+336736024242",
    "background_color": "red"
  }]
}

LiveBlocks also have memory!

  {
    "label": "Last songs",
    "background_color": "auto",
    "update": "append",
    "max_size": 5
  }

LiveBlocks are browsable!

  {
    "background_color": "auto",
    "value": "Click Me"
    "href": "https://www.youtube.com/watch?v=AHCPGCIu7O4"
  }

LiveBlocks can be merged!

LiveBlocks can have a goal!

    {
      label: "Revenue",
      unit: "€",
      background_color: "green",
      goal: 1000
    }