Import a config.json

JBrowse Web auto-loads a config.json from the current directory (or the ?config= URL parameter). The embedded react-app2 component does not — it makes no assumptions about URLs and lets you control how and when the config is loaded.

If your config is part of your app bundle, use a regular ES import. Bundlers handle the JSON natively and the config ships alongside your JavaScript, with no runtime fetch:

import config from './config.json'

const state = createViewState({ config })

One gotcha: URIs inside a config.json are resolved relative to wherever the file was downloaded from. When you bundle a config authored for another host, tag each location with a baseUri (as this example does) so JBrowse resolves them correctly. To load the config from a server at runtime instead, see Fetch a config.json.

The top-level shape (assemblies, tracks, configuration, defaultSession) is documented in JBrowseRootConfig, and the global configuration block in JBrowseConfiguration.

import { useState } from 'react'

import { JBrowseApp, createViewState } from '@jbrowse/react-app2'

import config from '../volvox-config.json' with { type: 'json' }
import { addRelativeUris } from '../volvoxConfig.ts'

// The config's URIs are relative to where it was downloaded from. addRelativeUris
// tags each with a baseUri so JBrowse resolves them against that directory.
const configUrl =
  'https://jbrowse.org/code/jb2/main/test_data/volvox/config.json'
addRelativeUris(config, configUrl)

export default function WithImportConfigJson() {
  const [state] = useState(() => createViewState({ config }))
  return <JBrowseApp viewState={state} />
}