# The best way to create markdown-based data-rich stories

Write like you always do—then drop in live tables and charts. Flowershow renders local or external CSV files, so your posts stay readable _and_ explorable.

🧩 **MDX-first authoring**  Write in markdown; drop in table/plot components where you need them. Keep your content structure and frontmatter.

📊 **CSV to Table**  Render local or external CSVs as interactive tables with sorting, filtering, and pagination.

📈 **Quick Charts**  Line, bar, area, scatter—plot directly from CSVs with declarative props. No build steps or notebooks required.

🗂 **Zero configuration**  Keep your existing folder structure. Flowershow works with any markdown organization.

🔁 **Always up-to-date**  Point components at a CSV path or URL; update the file and your story updates with it.

🔍 **SEO-friendly**  Clean markup, meta tags, and social cards so your work is discoverable and shareable.

## Interactive tables

Point to a local or remote CSV and render a searchable, sortable table in one line of MDX.

```
<FlatUiTable
data={{ url: "/assets/global-co2-emissions.csv" }}
/>
```

| Year | Amount1 | Amount2 | Amount3 | Amount4 | Amount5 | Amount6 |
|------|---------|---------|---------|---------|---------|---------|
| 2010 | 9,167   | 1,702   | 3,114   | 3,842   | 450     |         |
| 2009 | 8,740   | 1,585   | 3,056   | 3,620   | 413     |         |
| 2008 | 8,783   | 1,631   | 3,122   | 3,571   | 388     |         |
| 2007 | 8,566   | 1,572   | 3,081   | 3,464   | 382     |         |
| 2006 | 8,370   | 1,525   | 3,089   | 3,339   | 356     |         |
| 2005 | 8,093   | 1,480   | 3,076   | 3,157   | 320     |         |
| 2004 | 7,807   | 1,437   | 3,053   | 2,967   | 298     |         |
| 2003 | 7,416   | 1,391   | 2,959   | 2,743   | 276     |         |
| 2002 | 6,996   | 1,344   | 2,831   | 2,521   | 252     |         |
| 2001 | 6,927   | 1,312   | 2,840   | 2,492   | 237     |         |
| 2000 | 6,765   | 1,288   | 2,838   | 2,367   | 226     |         |
| 1999 | 6,610   | 1,270   | 2,737   | 2,352   | 217     |         |
| 1998 | 6,643   | 1,243   | 2,766   | 2,391   | 209     |         |
| 1997 | 6,651   | 1,208   | 2,700   | 2,495   | 209     |         |

## Line charts

Visualize trends and continuous changes over time with simple line charts. Pull columns by name and you’re done.

```
<LineChart
 data={{ url: "/assets/global-co2-emissions.csv" }}
 title="Global CO2 Emissions from fossil-fuels"
 xAxis="Year"
 yAxis="Total"
/>
```

| Year | Total |  |
|------|-------|--|
| 2000 | 6,765 |  |
| 2001 | 6,927 |  |
| 2002 | 6,996 |  |
| 2003 | 7,416 |  |
| 2004 | 7,807 |  |
| 2005 | 8,093 |  |
| 2006 | 8,370 |  |
| 2007 | 8,566 |  |
| 2008 | 8,783 |  |
| 2009 | 8,740 |  |
| 2010 | 9,167 |  |

## Bar charts

Compare discrete data points across different categories or groups with a bar chart.

```
<PlotlyBarChart
 data={{
  url: '/assets/global-co2-emissions-2010.csv'
}}
 title="Emissions distribution in 2010"
 xAxis="Type"
 yAxis="Amount"
/>
```

| Type          | Amount |
|---------------|--------|
| Gas Fuel     | 0      |
| Liquid Fuel  | 0      |
| Solid Fuel   | 0      |
| Cement       | 0      |
| Gas Flaring  | 0      |

## And more!

Check out other available data-rich components and start using them today!

## Start using Flowershow today.

Publish an elegant markdown-based website in a breeze.