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
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.