diff --git a/README.md b/README.md
index 4cf406e2..0b63a57c 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ C H A R T I F A C T
Chartifact is a low-code document format for creating interactive, data-driven pages such as reports, dashboards, and presentations. It travels like a document and works like a mini app. Designed for use with your LLM to produce a shareable artifact of your analytic conversations.
-• [Examples](https://microsoft.github.io/chartifact/examples) • [Try with Copilot in VsCode](https://marketplace.visualstudio.com/items?itemName=msrvida.chartifact)
+• [Examples](https://microsoft.github.io/chartifact/examples) • [Try now with your LLM](https://microsoft.github.io/chartifact/prompt) • [Try with Copilot in VsCode](https://marketplace.visualstudio.com/items?itemName=msrvida.chartifact)
## Ecosystem
diff --git a/docs/assets/chartifact-examples-json.zip b/docs/assets/chartifact-examples-json.zip
new file mode 100644
index 00000000..0a5607d3
Binary files /dev/null and b/docs/assets/chartifact-examples-json.zip differ
diff --git a/docs/assets/chartifact-examples-markdown.zip b/docs/assets/chartifact-examples-markdown.zip
new file mode 100644
index 00000000..0c7649d8
Binary files /dev/null and b/docs/assets/chartifact-examples-markdown.zip differ
diff --git a/docs/assets/chartifact-examples.zip b/docs/assets/chartifact-examples.zip
index e8437589..4be9b712 100644
Binary files a/docs/assets/chartifact-examples.zip and b/docs/assets/chartifact-examples.zip differ
diff --git a/docs/assets/examples/examples.json.folder.json b/docs/assets/examples/examples.json.folder.json
new file mode 100644
index 00000000..5843c483
--- /dev/null
+++ b/docs/assets/examples/examples.json.folder.json
@@ -0,0 +1,36 @@
+{
+ "$schema": "../../schema/folder_v1.json",
+ "title": "Interactive documents",
+ "docs": [
+ {
+ "title": "Why Chartifact",
+ "description": "Discover the capabilities and benefits of Chartifact for creating interactive data documents.",
+ "href": "json/why-chartifact.idoc.json"
+ },
+ {
+ "title": "Sales Dashboard",
+ "description": "A comprehensive sales dashboard with interactive charts and data visualization.",
+ "href": "json/sales-dashboard.idoc.json"
+ },
+ {
+ "title": "Sales Report",
+ "description": "A detailed sales report with tabular data and analysis.",
+ "href": "json/sales-report.idoc.json"
+ },
+ {
+ "title": "Grocery List",
+ "description": "An interactive grocery list demonstrating form controls and data management.",
+ "href": "json/grocery-list.idoc.json"
+ },
+ {
+ "title": "Mermaid Org Chart",
+ "description": "An organizational chart created using Mermaid diagrams with dynamic data.",
+ "href": "json/mermaid-org-chart.idoc.json"
+ },
+ {
+ "title": "Habit Tracker",
+ "description": "A minimal habit tracker with editable data and heatmap visualization.",
+ "href": "json/habit-tracker.idoc.json"
+ }
+ ]
+}
diff --git a/docs/assets/examples/features.json.folder.json b/docs/assets/examples/features.json.folder.json
new file mode 100644
index 00000000..6fd19976
--- /dev/null
+++ b/docs/assets/examples/features.json.folder.json
@@ -0,0 +1,58 @@
+{
+ "$schema": "../../schema/folder_v1.json",
+ "title": "Core capabilities",
+ "docs": [
+ {
+ "title": "Primer",
+ "href": "./json/features/1.primer.idoc.json"
+ },
+ {
+ "title": "Data Source: Inline JSON Data",
+ "href": "json/features/2.1.inline-json-data.idoc.json"
+ },
+ {
+ "title": "Data Source: CSV from URL",
+ "href": "json/features/2.2.csv-from-url.idoc.json"
+ },
+ {
+ "title": "Data Source: Dynamic URL Variables",
+ "href": "json/features/2.3.dynamic-url-variables.idoc.json"
+ },
+ {
+ "title": "Data Source: Inline CSV Data",
+ "href": "json/features/2.4.inline-csv-data.idoc.json"
+ },
+ {
+ "title": "Chart",
+ "href": "json/features/3.chart.idoc.json"
+ },
+ {
+ "title": "Table",
+ "href": "json/features/4.table.idoc.json"
+ },
+ {
+ "title": "Styling",
+ "href": "json/features/5.styling.idoc.json"
+ },
+ {
+ "title": "Data Transformations",
+ "href": "json/features/6.data-transformations.idoc.json"
+ },
+ {
+ "title": "Dynamic Dropdown",
+ "href": "json/features/7.dropdown.idoc.json"
+ },
+ {
+ "title": "Presets",
+ "href": "json/features/8.presets.idoc.json"
+ },
+ {
+ "title": "Mermaid",
+ "href": "json/features/9.mermaid.idoc.json"
+ },
+ {
+ "title": "Images",
+ "href": "json/features/10.images.idoc.json"
+ }
+ ]
+}
diff --git a/docs/dist/v1/chartifact-toolbar.css b/docs/dist/v1/chartifact-toolbar.css
index 402c025c..58e17e2b 100644
--- a/docs/dist/v1/chartifact-toolbar.css
+++ b/docs/dist/v1/chartifact-toolbar.css
@@ -57,6 +57,11 @@
margin-top: 0;
}
+.chartifact-toolbar .toolbar-mode {
+ font-size: smaller;
+ opacity: 0.8;
+}
+
/* Default: stack toolbar sections vertically */
.chartifact-toolbar .toolbar-item {
margin: 6px 0;
diff --git a/docs/dist/v1/chartifact.host.umd.js b/docs/dist/v1/chartifact.host.umd.js
index 903ea0a3..28a44f99 100644
--- a/docs/dist/v1/chartifact.host.umd.js
+++ b/docs/dist/v1/chartifact.host.umd.js
@@ -2576,6 +2576,8 @@ ${guardedJs}
if (setHash) {
setHashParam("page", docIndex + 1);
}
+ const mode = folder.docs[docIndex].href.endsWith(".idoc.md") ? "markdown" : "json";
+ host.toolbar.mode = mode;
host.toolbar.addChildren(/* @__PURE__ */ createElement(FolderDisplay, { ...{ ...props, docIndex } }));
const pageSelect = document.querySelector("#pageSelect");
if (pageSelect) {
@@ -3283,9 +3285,15 @@ ${htmlJsonJs}
createElement(
"div",
{ className: "toolbar-item" },
- createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"),
- createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"),
- createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")
+ createElement(
+ "span",
+ { className: "toolbar-mode" },
+ displayMode,
+ " mode "
+ ),
+ createElement("button", { type: "button", style: { display: restartDisplay }, onClick: restartClick }, "start over"),
+ createElement("button", { type: "button", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"),
+ createElement("button", { type: "button", style: { display: downloadDisplay }, onClick: downloadClick, id: "download" }, "download")
),
createElement(
"div",
@@ -3338,7 +3346,7 @@ ${htmlJsonJs}
throw new Error("Toolbar element not found");
}
this.props = {
- mode: this.mode,
+ mode: null,
restartClick: () => window.location.reload(),
tweakClick: () => {
this.options.textarea.style.display = this.options.textarea.style.display === "none" ? "" : "none";
@@ -3405,7 +3413,7 @@ ${htmlJsonJs}
this.render();
}
render() {
- mount(ToolbarElement(this.props), this.toolbarElement);
+ mount(ToolbarElement({ ...this.props, mode: this.mode }), this.toolbarElement);
this.downloadButton = this.toolbarElement.querySelector("#download");
this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
}
diff --git a/docs/dist/v1/chartifact.toolbar.umd.js b/docs/dist/v1/chartifact.toolbar.umd.js
index fd4aafae..6e684f19 100644
--- a/docs/dist/v1/chartifact.toolbar.umd.js
+++ b/docs/dist/v1/chartifact.toolbar.umd.js
@@ -313,7 +313,7 @@ ${htmlJsonJs}
const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml, children } = props;
const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
const displayMode = mode === "json" ? "json" : "markdown";
- return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", style: { display: children ? "" : "none" } }, children), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
+ return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", style: { display: children ? "" : "none" } }, children), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("span", { className: "toolbar-mode" }, displayMode, " mode "), /* @__PURE__ */ createElement("button", { type: "button", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", style: { display: downloadDisplay }, onClick: downloadClick, id: "download" }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
position: "absolute",
display: "none",
padding: "12px 16px",
@@ -338,7 +338,7 @@ ${htmlJsonJs}
throw new Error("Toolbar element not found");
}
this.props = {
- mode: this.mode,
+ mode: null,
restartClick: () => window.location.reload(),
tweakClick: () => {
this.options.textarea.style.display = this.options.textarea.style.display === "none" ? "" : "none";
@@ -403,7 +403,7 @@ ${htmlJsonJs}
this.render();
}
render() {
- mount(ToolbarElement(this.props), this.toolbarElement);
+ mount(ToolbarElement({ ...this.props, mode: this.mode }), this.toolbarElement);
this.downloadButton = this.toolbarElement.querySelector("#download");
this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
}
diff --git a/docs/examples-json.html b/docs/examples-json.html
new file mode 100644
index 00000000..d26f2cdd
--- /dev/null
+++ b/docs/examples-json.html
@@ -0,0 +1,49 @@
+---
+layout: default
+title: Chartifact Examples
+---
+Chartifact home
+GitHub Repository
+
+Chartifact Examples (json format)
+
+Explore these interactive documents to see what's possible with Chartifact. Want to create your own? Use AI to get started!
+
+Interactive documents
+view all
+
+- Why Chartifact: Discover the capabilities and benefits of Chartifact for creating interactive data documents.
+- Sales Dashboard: A comprehensive sales dashboard with interactive charts and data visualization.
+- Sales Report: A detailed sales report with tabular data and analysis.
+- Grocery List: An interactive grocery list demonstrating form controls and data management.
+- Mermaid Org Chart: An organizational chart created using Mermaid diagrams with dynamic data.
+- Habit Tracker: A minimal habit tracker with editable data and heatmap visualization.
+
+Core capabilities
+view all
+
+
+Downloads
+
+
+Want to see Markdown examples? Click here for Markdown format examples
+
+
\ No newline at end of file
diff --git a/docs/examples.html b/docs/examples.html
index d6ea2d05..2b17b92c 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -5,9 +5,9 @@