Docmino MDX Documentation

Data and Embeds

Created by

docminoDocmino

Data and Embeds

Use data components when a page needs hidden source data, charts, calculations, maps, embeds, or generated speech.

Data

Data stores structured source data for charts or other components.

Prop⇅

Type⇅

Notes⇅

label

string

Source label.

hidden

boolean

Hide the source from readers.

source

expression

Structured data.

visibleWhen

expression

Optional conditional visibility.

<Data
  label="Weekly signups"
  hidden
  source={[
    { week: "Week 1", signups: 12 },
    { week: "Week 2", signups: 18 },
    { week: "Week 3", signups: 27 }
  ]}
/>

Charts

Use Chart.Bar, Chart.Line, Chart.Area, or Chart.Pie to visualize a Data source.

Prop⇅

Type⇅

Notes⇅

string

Stable chart ID.

label

string

Chart title.

dataId

string

ID or label of the data source.

visibleWhen

expression

Optional conditional visibility.

Select a Data component to power this chart

<Chart.Bar
  id="data-chart-bar"
  label="Weekly signups"
  dataId="Weekly signups"
/>

<Chart.Line
  id="data-chart-line"
  label="Trend"
  dataId="Weekly signups"
/>

<Chart.Area
  id="data-chart-area"
  label="Cumulative trend"
  dataId="Weekly signups"
/>

<Chart.Pie
  id="data-chart-pie"
  label="Share"
  dataId="Weekly signups"
/>

Result

Use Result for calculated outputs.

Hours

Total minutes

0 minutes

<Input.Number
  id="data-result-hours"
  name="hours"
  label="Hours"
  minimum={0}
  maximum={40}
  value={4}
/>

<Result
  id="data-result-total"
  label="Total minutes"
  formula="hours * 60"
  suffix=" minutes"
/>

Map and Embed

Use Map for a location and Embed for external web content.

Docmino HQ

External guide

<Map
  id="data-map"
  label="Docmino HQ"
  latitude={40.7128}
  longitude={-74.006}
  zoom={12}
/>

<Embed
  id="data-embed"
  label="External guide"
  url="https://docmino.com"
/>

Speech and markdown media

Use Speech to read text aloud. Use normal markdown image and link syntax for image, video, audio, and file references inserted by the editor.

Sample Video

Download sample file

<Speech
  id="data-speech"
  text="Docmino turns documents into live guides."
  language="en"
/>

![Sample Video](https://cdn.example.com/video.mp4 "A sample video")

[Download sample file](https://example.com/sample.pdf)