HyperSync Query Builder

A React component library and standalone web app for visually building HyperSync queries. Construct complex blockchain data queries through an intuitive UI without writing code.

Live at builder.hypersync.xyz.

What is HyperSync?

HyperSync is Envio's high-performance blockchain data retrieval layer, a purpose-built alternative to JSON-RPC endpoints that offers up to 2000x faster data access across 70+ EVM-compatible networks.

Features

• Visual query building: Construct HyperSync queries through a UI instead of writing JSON by hand
• Multi-chain support: Select from all networks supported by HyperSync
• Log, transaction, and block filtering: Configure filters for any combination of data types
• Field selection: Choose exactly which fields to return in your queries
• Query export: Generate ready-to-use cURL commands and JSON queries to copy into your code
• Real-time execution: Run queries directly from the UI and inspect the response

Use as Standalone Website

pnpm i
pnpm dev

Other commands:

• pnpm res:build - build the ReScript source
• pnpm res:dev - watch and rebuild ReScript on changes
• pnpm build:site - build the production site

Use as a React Library

Installation

npm install hypersync-query-builder-component

Basic Usage

import { HyperSyncQueryBuilder } from 'hypersync-query-builder-component';
import 'hypersync-query-builder-component/styles';

function App() {
  return <HyperSyncQueryBuilder />;
}

Individual Components

import {
  ChainSelector,
  QueryResults,
  LogFilter,
  TransactionFilter,
  FieldSelector
} from 'hypersync-query-builder-component';

Requirements

• React 16.8 or newer
• Modern browser with ES6 support

Built With

• ReScript - type-safe functional source language
• React - UI layer
• Tailwind CSS - styling
• Vite - build tooling

Documentation

• HyperSync Docs
• Query Reference
• Supported Networks
• Live Query Builder

License

MIT

Support

• Discord community
• Envio Docs