Blockchain data components,open source and query-driven.

How you use it

Write a query. Point a widget at it.

Every widget takes the same three things: an initialised client, a GraphQL query, and the path to the result set you want drawn. This is the real API, from the repository's own demo.

<link rel="stylesheet" href="dist/assets/css/widgets.css">
<div id="eth-blocks"></div>

<script src="dist/widgets.js"></script>
<script>
  widgets.init(
    'https://streaming.bitquery.io/graphql',
    'https://ide.bitquery.io',
    '',
    { accessToken: 'YOUR_ACCESS_TOKEN' }
  );

  var query = new widgets.query(`
    query {
      EVM(network: eth) {
        Blocks(limit: {count: 10}) {
          Block { Number Time Hash }
        }
      }
    }
  `);

  widgets.table('#eth-blocks', query, 'EVM.Blocks', {
    title: 'Recent Ethereum blocks',
    dataOptions: [
      { title: 'Block', path: 'Block.Number' },
      { title: 'Time',  path: 'Block.Time' }
    ]
  });
</script>

What you can build

Nine chart types, one pattern underneath.

These are the shapes people build with the library — each one is a renderer plus a query. Swap the network or token in the query and the same component works wherever the data exists. The previews below are illustrative, not live data.

Proof

An entire explorer, built from these widgets.

explorer.bitquery.io — multi-chain address, transaction, token and DEX pages across 40+ networks — is composed entirely of these components, and its source is open too. If you want to know what the library can carry in production, read that repository.

Styling

It should look like your product, not ours.

The bundle ships dist/assets/css/widgets.css. Load it first, then override from your own stylesheet — the components render ordinary DOM (list groups, tables, chart containers), so you target them the way you would any third-party widget.

/* load widgets.css first, then win on specificity */
#eth-blocks .list-group-item {
  background: #0c121c;
  color: #aab0bc;
  border-color: rgba(255, 255, 255, .08);
}

#eth-blocks table th {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* the veil the widget shows while a query is in flight */
#eth-blocks .widgets-loading { background: rgba(6, 9, 13, .6); }

There is no CSS custom-property theme API today — no --widget-* token layer to set. Theming is plain CSS specificity against the shipped stylesheet, which is worth knowing before you plan a design system around it. The wiki has the per-widget markup.

Pricing

FAQ

Before you clone it.

Further reading

Build it deeper.