`<bmx-xbrl-viewer>`

An inline XBRL (iXBRL) reader for financial filings: it opens an inline document, a plain instance, or a report package, shows the filing as its author laid it out with every tagged figure lit up, and lets a reader click a figure to see exactly what was reported - the concept, the context (whose, when, along which dimensions), the unit, and how the displayed text became the value. A fact table filters and searches every figure; the presentation outline arranges them into period columns; the checks panel verifies the calculation relationships from the taxonomy's linkbases. Everything can be taken away as xBRL-JSON or CSV. The file is read in the browser and nothing is sent anywhere.

9 properties · 4 events · 11 methods · 8 parts

Example

Try it with your own filings in confidence: they are opened by your browser, on your device. Nothing is uploaded, no copy reaches us or anyone else, and nothing is kept once you close this tab.

Opening…

Show markup

<bmx-xbrl-viewer id="ex-xbrl" label="Annual accounts" style="--bmx-xbrl-viewer-height: 32rem"></bmx-xbrl-viewer>
<p class="note" id="ex-xbrl-out" role="status" style="margin: 12px 0 0">Opening&hellip;</p>

<script type="module">
  await customElements.whenDefined('bmx-xbrl-viewer');
  const viewer = document.getElementById('ex-xbrl');
  const out = document.getElementById('ex-xbrl-out');

  // A made-up company's inline accounts. Click a highlighted figure to inspect it, switch to Facts,
  // Outline or Checks, and export. One total is deliberately out by a little, so the Checks panel has
  // something to show. Everything here is invented - no real filing, taxonomy or company.
  const EG = 'http://harbourlane.example/accounts';
  const filing = `<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ix="http://www.xbrl.org/2013/inlineXBRL"
 xmlns:xbrli="http://www.xbrl.org/2003/instance" xmlns:link="http://www.xbrl.org/2003/linkbase"
 xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:iso4217="http://www.xbrl.org/2003/iso4217"
 xmlns:xbrldi="http://xbrl.org/2006/xbrldi" xmlns:ixt="http://www.xbrl.org/inlineXBRL/transformation/2020-02-12"
 xmlns:hl="${EG}" xml:lang="en">
<head><ix:header><ix:references><link:schemaRef xlink:type="simple" xlink:href="hl.xsd"/></ix:references>
 <ix:resources>
  <xbrli:context id="y24"><xbrli:entity><xbrli:identifier scheme="http://companieshouse.example">00000001</xbrli:identifier></xbrli:entity><xbrli:period><xbrli:instant>2024-12-31</xbrli:instant></xbrli:period></xbrli:context>
  <xbrli:context id="y23"><xbrli:entity><xbrli:identifier scheme="http://companieshouse.example">00000001</xbrli:identifier></xbrli:entity><xbrli:period><xbrli:instant>2023-12-31</xbrli:instant></xbrli:period></xbrli:context>
  <xbrli:context id="p24"><xbrli:entity><xbrli:identifier scheme="http://companieshouse.example">00000001</xbrli:identifier></xbrli:entity><xbrli:period><xbrli:startDate>2024-01-01</xbrli:startDate><xbrli:endDate>2024-12-31</xbrli:endDate></xbrli:period></xbrli:context>
  <xbrli:unit id="gbp"><xbrli:measure>iso4217:GBP</xbrli:measure></xbrli:unit>
 </ix:resources></ix:header></head>
<body style="font-family: Georgia, serif; max-width: 44rem">
 <h1>Harbour Lane Studio Ltd</h1>
 <p>Annual report for the year ended 31 December 2024. Company number
    <ix:nonNumeric name="hl:CompanyNumber" contextRef="p24">00000001</ix:nonNumeric>.</p>
 <h2>Balance sheet</h2>
 <table border="1" cellpadding="6" cellspacing="0">
  <tr><th></th><th>2024</th><th>2023</th></tr>
  <tr><td>Non-current assets</td>
      <td><ix:nonFraction name="hl:NonCurrentAssets" contextRef="y24" unitRef="gbp" decimals="0" format="ixt:numdotdecimal">320,000</ix:nonFraction></td>
      <td><ix:nonFraction name="hl:NonCurrentAssets" contextRef="y23" unitRef="gbp" decimals="0" format="ixt:numdotdecimal">290,000</ix:nonFraction></td></tr>
  <tr><td>Current assets</td>
      <td><ix:nonFraction name="hl:CurrentAssets" contextRef="y24" unitRef="gbp" decimals="0" format="ixt:numdotdecimal">185,000</ix:nonFraction></td>
      <td><ix:nonFraction name="hl:CurrentAssets" contextRef="y23" unitRef="gbp" decimals="0" format="ixt:numdotdecimal">160,000</ix:nonFraction></td></tr>
  <tr><td><strong>Total assets</strong></td>
      <td><strong><ix:nonFraction name="hl:Assets" contextRef="y24" unitRef="gbp" decimals="0" format="ixt:numdotdecimal">504,000</ix:nonFraction></strong></td>
      <td><strong><ix:nonFraction name="hl:Assets" contextRef="y23" unitRef="gbp" decimals="0" format="ixt:numdotdecimal">450,000</ix:nonFraction></strong></td></tr>
  <tr><td>Profit for the year</td>
      <td><ix:nonFraction name="hl:Profit" contextRef="p24" unitRef="gbp" decimals="0" format="ixt:numdotdecimal">62,500</ix:nonFraction></td>
      <td></td></tr>
 </table>
 <p>These accounts were
    <ix:nonNumeric name="hl:Audited" contextRef="p24" format="ixt:booleanfalse">not audited</ix:nonNumeric>.</p>
</body></html>`;

  // The company's own taxonomy (invented for this example): the concepts, their labels, how they are
  // arranged, and which figures sum to which. A real filing names a published taxonomy; the viewer
  // reads whichever one comes in the package, or one you hand it like this.
  const schema = `<xsd:schema targetNamespace="${EG}" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xbrli="http://www.xbrl.org/2003/instance" xmlns:hl="${EG}">
   <xsd:element id="hl_Assets" name="Assets" type="xbrli:monetaryItemType" substitutionGroup="xbrli:item" nillable="true" xbrli:periodType="instant" xbrli:balance="debit"/>
   <xsd:element id="hl_CurrentAssets" name="CurrentAssets" type="xbrli:monetaryItemType" substitutionGroup="xbrli:item" nillable="true" xbrli:periodType="instant" xbrli:balance="debit"/>
   <xsd:element id="hl_NonCurrentAssets" name="NonCurrentAssets" type="xbrli:monetaryItemType" substitutionGroup="xbrli:item" nillable="true" xbrli:periodType="instant" xbrli:balance="debit"/>
   <xsd:element id="hl_Profit" name="Profit" type="xbrli:monetaryItemType" substitutionGroup="xbrli:item" nillable="true" xbrli:periodType="duration" xbrli:balance="credit"/>
   <xsd:element id="hl_CompanyNumber" name="CompanyNumber" type="xbrli:stringItemType" substitutionGroup="xbrli:item" nillable="true" xbrli:periodType="duration"/>
   <xsd:element id="hl_Audited" name="Audited" type="xbrli:booleanItemType" substitutionGroup="xbrli:item" nillable="true" xbrli:periodType="duration"/>
  </xsd:schema>`;
  const lab = label([
    ['hl_Assets', 'Total assets'], ['hl_CurrentAssets', 'Current assets'], ['hl_NonCurrentAssets', 'Non-current assets'],
    ['hl_Profit', 'Profit for the financial year'], ['hl_CompanyNumber', 'Company number'], ['hl_Audited', 'Audited'],
  ]);
  const links = `<link:linkbase xmlns:link="http://www.xbrl.org/2003/linkbase" xmlns:xlink="http://www.w3.org/1999/xlink">
   <link:presentationLink xlink:type="extended" xlink:role="http://www.xbrl.org/2003/role/link">
    ${loc('hl_Assets', 'A')}${loc('hl_CurrentAssets', 'CA')}${loc('hl_NonCurrentAssets', 'NCA')}
    <link:presentationArc xlink:type="arc" xlink:arcrole="http://www.xbrl.org/2003/arcrole/parent-child" xlink:from="A" xlink:to="NCA" order="1"/>
    <link:presentationArc xlink:type="arc" xlink:arcrole="http://www.xbrl.org/2003/arcrole/parent-child" xlink:from="A" xlink:to="CA" order="2"/>
   </link:presentationLink>
   <link:calculationLink xlink:type="extended" xlink:role="http://www.xbrl.org/2003/role/link">
    ${loc('hl_Assets', 'A')}${loc('hl_CurrentAssets', 'CA')}${loc('hl_NonCurrentAssets', 'NCA')}
    <link:calculationArc xlink:type="arc" xlink:arcrole="http://www.xbrl.org/2003/arcrole/summation-item" xlink:from="A" xlink:to="CA" order="1" weight="1"/>
    <link:calculationArc xlink:type="arc" xlink:arcrole="http://www.xbrl.org/2003/arcrole/summation-item" xlink:from="A" xlink:to="NCA" order="2" weight="1"/>
   </link:calculationLink></link:linkbase>`;

  function loc(id, lbl) {
    return `<link:loc xlink:type="locator" xlink:href="hl.xsd#${id}" xlink:label="${lbl}"/>`;
  }
  function label(pairs) {
    const body = pairs.map(([id, text], i) => `${loc(id, 'c' + i)}
     <link:label xlink:type="resource" xlink:label="l${i}" xlink:role="http://www.xbrl.org/2003/role/label" xml:lang="en">${text}</link:label>
     <link:labelArc xlink:type="arc" xlink:arcrole="http://www.xbrl.org/2003/arcrole/concept-label" xlink:from="c${i}" xlink:to="l${i}"/>`).join('\n');
    return `<link:linkbase xmlns:link="http://www.xbrl.org/2003/linkbase" xmlns:xlink="http://www.w3.org/1999/xlink">
     <link:labelLink xlink:type="extended" xlink:role="http://www.xbrl.org/2003/role/link">${body}</link:labelLink></link:linkbase>`;
  }

  viewer.taxonomy = [
    { href: 'hl.xsd', text: schema },
    { href: 'hl-lab.xml', text: lab },
    { href: 'hl-links.xml', text: links },
  ];
  viewer.addEventListener('bmxXbrlLoad', e => {
    out.textContent = `Read ${e.detail.facts} facts in ${e.detail.contexts} contexts. Switch to Checks to see the total that is out by £1,000.`;
  });
  viewer.addEventListener('bmxFactSelect', e => {
    out.textContent = `Selected ${e.detail.concept} = ${e.detail.value}`;
  });
  await viewer.load(filing);
</script>

No taxonomy is bundled: labels, the outline and the checks come from the taxonomy in the package, or from one supplied through taxonomy.

<bmx-xbrl-viewer src="accounts.xhtml"></bmx-xbrl-viewer>

Properties

Property	Attribute	Type	Default	Description
`allowExport`	`allow-export`	`boolean`	`true`	Allow the export buttons.
`highlight`	`highlight`	`boolean`	`true`	Light up the tagged figures in the document view.
`label`	`label`	`string`	—	A heading for the viewer, read out to assistive technology.
`locale`	`locale`	`string`	—	The locale for numbers and dates (defaults to the filing's language).
`requestInit`	property only	`RequestInit`	—	Options for the fetch of `src`.
`src`	`src`	`string`	—	A URL to open: an inline document, an instance, or a report package.
`strings`	`strings`	`Partial<BmxXbrlViewerStrings> \| string`	—	Text overrides, as an object or a JSON string.
`taxonomy`	`taxonomy`	`BmxXbrlTaxonomyInput[] \| string`	—	Taxonomy files (schema and linkbases) to read labels and calculations from, when the package has none.
`view`	`view`	`BmxXbrlView`	`'document'`	Which panel is shown.

Events

Event	Detail	Description
`bmxFactSelect`	`BmxXbrlFactSelectDetail`	Emitted when a fact is selected.
`bmxViewChange`	`{ view: BmxXbrlView; }`	Emitted when the shown panel changes.
`bmxXbrlError`	`{ message: string; }`	Emitted when a filing could not be opened.
`bmxXbrlLoad`	`BmxXbrlLoadDetail`	Emitted when a filing has been read.

Methods

Method	Signature	Description
`exportCsv`	`exportCsv() => Promise<string>`	The open report's facts as CSV.
`exportJson`	`exportJson() => Promise<string>`	The open report as xBRL-JSON.
`getCalculationChecks`	`getCalculationChecks() => Promise<readonly BmxXbrlCalcCheck[]>`	Check the open report's calculation relationships.
`getFacts`	`getFacts() => Promise<BmxXbrlFactRow[]>`	The facts of the open report, as table rows.
`getProblems`	`getProblems() => Promise<BmxXbrlReport["problems"]>`	The problems found in the open report.
`load`	`load(source: string \| ArrayBuffer \| Uint8Array \| File) => Promise<void>`	Open a filing from bytes, text, a File, or an ArrayBuffer.
`open`	`open(src: string) => Promise<void>`	Open a filing from a URL.
`openFiles`	`openFiles(files: FileList \| File[]) => Promise<void>`	Open a report, with any taxonomy files, from a set of dropped or chosen files.
`selectFact`	`selectFact(index: number \| null) => Promise<void>`	Select a fact by its index, showing it in the inspector.
`setFocus`	`setFocus() => Promise<void>`	Move focus into the viewer.
`setView`	`setView(view: BmxXbrlView) => Promise<void>`	Show a panel.

Slots

Slot	Description
`empty`	Shown when no filing is open.

CSS shadow parts

Part	Description
`demo-cap`
`document`	The rendered inline document.
`empty`
`fact`	A tagged figure in the document.
`inspector`	The fact inspector panel.
`tab`	A view tab.
`table`	The fact table.
`toolbar`	The bar of view tabs and actions.

CSS custom properties

Property	Description
`--bmx-xbrl-viewer-height`	How tall the viewer is.
`--bmx-xbrl-viewer-highlight`	The wash over a tagged figure.
`--bmx-xbrl-viewer-highlight-selected`	The wash over the selected figure.
`--bmx-xbrl-viewer-inspector-width`	How wide the fact inspector is.
`--bmx-xbrl-viewer-paper`	The background of the rendered document. @part toolbar - The bar of view tabs and actions. @part tab - A view tab. @part document - The rendered inline document. @part fact - A tagged figure in the document. @part table - The fact table. @part inspector - The fact inspector panel. @part empty - What is shown when no filing is open.