Effortlessly visualize cross-chain data ⛓️

Following guide contains information about XCM Visualizer. It is designed to inform both interface users and developers about the possibilities and use cases they can enhance with this tool.

User startup guide

The XCM Visualizer is available at the following URL: https://xcm-visualizer.paraspell.xyz/

Application usage instructions are available in the documentation: User Guide

Developer startup guide

1. Install dependencies:

   • Node.js ^24
   • PostgreSQL

2. Configure environment variables:

   • In the backend directory, create a .env file based on .env.example
   • Update it with your local PostgreSQL credentials

3. Initialize the database:

   • Import the xcm_database_dump_2023_2024 file into your PostgreSQL database to load example data for the XCM Visualizer

4. Run the following commands:

Before you begin with any commands make sure to run following from monorepository root:

pnpm install
pnpm build

Then run backend from backend folder:

cd ./apps/visualizer-be
pnpm start

And run frontend from frontend folder:

cd ./apps/visualizer-fe
pnpm dev

Both front-end and back-end must run in their own terminal at the same time.