IPLD Explorer at explore.ipld.io

Explore the Merkle Forest from the comfort of your browser.

Background

This repo is responsible for standalone tool that lives at https://explore.ipld.io Component code lives in a separate repo at ipld-explorer-components

The ipld-explorer-components library uses @helia/http to query any local IPFS node, and the network, for content. See https://github.com/ipfs/ipld-explorer-components/blob/8718cd07cd27a82fdeaa25b92c6809ba3cec489c/src/providers/helia.tsx and https://github.com/ipfs/ipld-explorer-components/blob/8718cd07cd27a82fdeaa25b92c6809ba3cec489c/src/lib/init-helia.ts#L23 for specifics.

The app is built with Vite. Please read the docs.

Install

With node and npm installed, run

npm install

Usage

When developing you can run the dev server, the unit tests, and the storybook component viewer and see the results of your changes as you save files.

In separate shells run the following:

# Run the unit tests
npm test

# Run the dev server @ http://localhost:5173
npm start

# Run the UI component viewer @ http://localhost:9009
npm run storybook

Build

To create an optimized static build of the app, output to the build directory:

# Build out the html, css & jss to ./build
npm run build

Analyze

To inspect the built bundle for bundled modules and their size, first build the app then:

# Run bundle
npm run analyze

Test

The following command will run the app tests, watch source files and re-run the tests when changes are made:

npm test

The app uses Vitest to run the isolated unit tests. Unit test files are located next to the component they test and have the same file name, but with the extension .test.js

Linting

The following command will perform linting on the code using aegir:

npm run lint

Coverage

To do a single run of the tests and generate a coverage report, run the following:

npm run test:coverage

Translations

The translations are automatically handled by Vite's build process. The app uses a two-tier translation system:

1. Primary translations: Loaded from ipld-explorer-components package (namespace: explore)
2. Fallback translations: Local translations in ./public/locales (namespace: app)

Automatic Translation Handling

Translations are automatically processed during the build:

• Vite static copy: The viteStaticCopy plugin automatically copies ipld-explorer-components/dist/locales to the build directory
• Fallback system: The i18n configuration uses app.json files as fallback when primary translations fail to load
• Language detection: The app automatically detects user language and falls back through language variants (e.g., en-US → en)

Translation Structure

The build process copies explore.json files from ipld-explorer-components/dist/locales/{lang}/ to build/locales/{lang}/explore.json, while local app.json files in public/locales/{lang}/ serve as fallbacks.

Contributing Translations

If you're interested in contributing a translation, go to our page on Transifex, create an account, pick a language and start translating.

You can read more on how we use Transifex and i18next in this app at https://github.com/ipfs-shipyard/ipfs-webui/blob/master/docs/LOCALIZATION.md

Contribute

Feel free to dive in! Open an issue or submit PRs.

To contribute to IPFS in general, see the contributing guide.

License

MIT © Protocol Labs