diff --git a/R/lib.R b/R/lib.R
index da742b7..f2cdebf 100644
--- a/R/lib.R
+++ b/R/lib.R
@@ -42,6 +42,39 @@ fd_save = function(fdObj) {
     unlock(lock)
 }
 
+fd_str_data = function(fdObj, id) {
+    fd_update(fdObj)
+    status = "error"
+    message = "Figure does not exist"
+    if (id %in% names(fdObj$env)) {
+        data = fdObj$env[[id]]$data
+        status = "ok"
+        message = capture.output(str(data)) |> paste(collapse = "\n")
+    }
+    return(list(
+        status = status,
+        message = message
+    ))
+}
+
+fd_generate_data = function(fdObj, id) {
+    fd_update(fdObj)
+    status = "error"
+    if (id %in% names(fdObj$env)) {
+        g = fdObj$env[[id]]$g_updated
+        fig_name = fdObj$env[[id]]$name
+        csv_file = file.path(fdObj$dir, "tmp", paste0(fig_name, ".csv"))
+        data = fdObj$env[[id]]$data
+        write.csv(data, csv_file, row.names = FALSE)
+        status = "ok"
+        print(paste0("The csv file is saved to ", csv_file))
+    }
+    return(list(
+        status = status,
+        message = status
+    ))
+}
+
 fd_generate_pdf = function(fdObj, id) {
     fd_update(fdObj)
     status = "error"
diff --git a/R/server.R b/R/server.R
index 4c3fc60..12b6707 100644
--- a/R/server.R
+++ b/R/server.R
@@ -1,5 +1,45 @@
 # font_list = sort(unique(sysfonts::font_files()$family))
 
+response_fd_str_data = function(fo, req) {
+    # print("response_fd_str_data")
+    parsed_qeury = parse_url(req$QUERY_STRING)$query
+    figure_id = parsed_qeury$id
+    res = fd_str_data(fo, figure_id)
+    if (res$status == "error") {
+        list(
+            status = 400L,
+            headers = list('Content-Type' = "text/plain"),
+            body = res$message
+        )
+    } else {
+        list(
+            status = 200L,
+            headers = list('Content-Type' = "text/plain"),
+            body = res$message
+        )
+    }
+}
+
+response_fd_download_data = function(fo, req) {
+    # print("response_fd_download_data")
+    parsed_qeury = parse_url(req$QUERY_STRING)$query
+    figure_id = parsed_qeury$id
+    res = fd_generate_data(fo, figure_id)
+    if (res$status == "error") {
+        list(
+            status = 400L,
+            headers = list('Content-Type' = "text/plain"),
+            body = res$message
+        )
+    } else {
+        list(
+            status = 200L,
+            headers = list('Content-Type' = "text/plain"),
+            body = res$message
+        )
+    }
+}
+
 response_fd_download_pdf = function(fo, req) {
     print("response_fd_download_pdf")
     parsed_qeury = parse_url(req$QUERY_STRING)$query
@@ -147,6 +187,10 @@ fd_server = function(dir, port = 8080) {
                 response_fd_change_name(fo, req)
             } else if (path == "/fd_download_pdf") {
                 response_fd_download_pdf(fo, req)
+            } else if (path == "/fd_download_data") {
+                response_fd_download_data(fo, req)
+            } else if (path == "/fd_str_data") {
+                response_fd_str_data(fo, req)
             } else {
                 list(
                     status = 404L,
diff --git a/inst/www/css/style.css b/inst/www/css/style.css
index 39b7fc9..b8f8598 100644
--- a/inst/www/css/style.css
+++ b/inst/www/css/style.css
@@ -154,15 +154,12 @@ hr {
 }
 
 .tab_container {
-    display: flex;
-    flex-direction: column;
-}
-
-#tab_canvas {
     display: none;
+    flex-direction: column;
 }
 
 #tab_ggplot {
+    display: flex;
 }
 
 
diff --git a/inst/www/index.html b/inst/www/index.html
index 12c0efe..93851b8 100644
--- a/inst/www/index.html
+++ b/inst/www/index.html
@@ -27,6 +27,7 @@ <h1>ggfigdone [Making ggplot figure done quickly]</h1>
 
                 <h2 id="et_figure_name"></h2>
                 <div id="div_update_buttons">
+                    <button class="btn_download_data" onclick="downloadData()" title="Download the data as CSV.">Download Data</button>
                     <button class="btn_download_pdf" onclick="downloadPDF()" title="Download the figure as PDF.">Download PDF</button>
                     <button class="btn_change_name" onclick="changeFigureName()" title="Change the figure name.">Change Name</button>
                     <button class="btn_delete" onclick="deleteFigure()" title="Remove figure. NOT reversible!">Delete</button>
@@ -39,8 +40,9 @@ <h2 id="et_figure_name"></h2>
                 <hr>
 
                 <div class="tab_button_container">
-                    <button id="bt_ggplot" class="tablinks tab_active">Update ggplot code</button>
-                    <button id="bt_canvas" class="tablinks">Update Canvas</button>
+                    <button id="bt_ggplot" class="tablinks tab_active" title="Update ggplot by editing the code.">Update ggplot code</button>
+                    <button id="bt_canvas" class="tablinks" title="Update figure canvas size.">Update Canvas</button>
+                    <button id="bt_data" class="tablinks" title="View the dataset">Dataset structure</button>
                 </div>
 
 
@@ -78,10 +80,14 @@ <h2 id="et_figure_name"></h2>
                     <div class="et_options_h4">
                         <p> Please use `data` variable as dataset in ggplot code. </p>
                         <!--<textarea id="code" rows = "20"></textarea>-->
-                        <div id="editor"></div>
+                        <div id="editor_code"></div>
                     </div>
                     <button id="btn_change_figure" title="Apply the changes of ggplot2 code">Apply Changes</button>
                 </div>
+                <div class="tab_container" id="tab_data">
+                    <p>Dataset structure generated by `str(data)` in R:</p>
+                    <div id="editor_data"></div>
+                </div>
                 <div id="error_window">
                     <p id="error_message"></p>
                 </div>
diff --git a/inst/www/js/ace-configure.js b/inst/www/js/ace-configure.js
index 5222684..d614aa2 100644
--- a/inst/www/js/ace-configure.js
+++ b/inst/www/js/ace-configure.js
@@ -1,7 +1,10 @@
 // Ace editor configuration options:
 // https://github.com/ajaxorg/ace/wiki/Configuring-Ace#editor-options
 
-var editor = ace.edit("editor");
+//////////////////////////////////////////////
+// Configure of the ggplot code editor
+
+var editor_code = ace.edit("editor_code");
 
 //editor.session.setMode("ace/mode/javascript");
 // pass options to ace.edit
@@ -11,7 +14,7 @@ var editor = ace.edit("editor");
 //    })
 
 // use setOptions method to set several options at once
-editor.setOptions({
+editor_code.setOptions({
     mode: "ace/mode/r",
     selectionStyle: "text",
     maxLines: 36,
@@ -25,14 +28,14 @@ editor.setOptions({
     highlightActiveLine: false,
 });
 // use setOptions method
-editor.setOption("mergeUndoDeltas", "always");
+editor_code.setOption("mergeUndoDeltas", "always");
 
 // set wrap limit range
-editor.session.setUseWrapMode(true);
+editor_code.session.setUseWrapMode(true);
 
 // some options are also available as methods e.g. 
 //editor.setTheme("ace/theme/github_light_default");
-editor.setTheme("ace/theme/tomorrow_night");
+editor_code.setTheme("ace/theme/tomorrow_night");
 
 // to get the value of the option use
 //editor.getOption("optionName");
@@ -42,8 +45,8 @@ fetch("./js/ggplot2.json")
     .then(response => response.json())
     .then(data => {
         //console.log(data);
-        editor.completers.push({
-            getCompletions: function(editor, session, pos, prefix, callback) {
+        editor_code.completers.push({
+            getCompletions: function(editor_code, session, pos, prefix, callback) {
                 callback(null, 
                     data
                 );
@@ -51,13 +54,23 @@ fetch("./js/ggplot2.json")
         })
     });
 
-//editor.completers.push({
-//    getCompletions: function(editor, session, pos, prefix, callback) {
-//        callback(null, 
-//            [
-//            {value: "foo", score: 1000, meta: "custom"},
-//            {value: "bar", score: 1000, meta: "custom"}
-//            ]
-//        );
-//    }
-//})
+//////////////////////////////////////////////
+// Configure of the dataset editor
+
+var editor_data = ace.edit("editor_data");
+
+// The dataset editor is read-only
+editor_data.setReadOnly(true);
+
+editor_data.setOptions({
+    mode: "ace/mode/r",
+    selectionStyle: "text",
+    maxLines: 36,
+    minLines: 12,
+    autoScrollEditorIntoView: true,
+    copyWithEmptySelection: true,
+    showGutter: false,
+    //highlightActiveLine: false,
+});
+
+editor_data.setTheme("ace/theme/tomorrow_night");
diff --git a/inst/www/js/main.js b/inst/www/js/main.js
index 57cb5e6..5194383 100644
--- a/inst/www/js/main.js
+++ b/inst/www/js/main.js
@@ -1,5 +1,40 @@
 // Jquery is enabled in the html file
 
+function strData() {
+    // Get the figure id
+    let figure_id = $("#et_figure_id").text();
+    let figure_name = $("#et_figure_name").text();
+    let baseUrl = window.location.origin;
+    let url = baseUrl + "/fd_str_data?id=" + figure_id;
+    $.ajax({
+        url: url,
+        type: "GET",
+        success: function (data) {
+            console.log(data);
+            // Show the data in the #editor_data
+            //$("#editor_data").val(data);
+            editor_data.setValue(data, -1);
+        },
+    });
+}
+
+function downloadData() {
+    // Get the figure id
+    let figure_id = $("#et_figure_id").text();
+    let figure_name = $("#et_figure_name").text();
+    let baseUrl = window.location.origin;
+    let url = baseUrl + "/fd_download_data?id=" + figure_id;
+    $.ajax({
+        url: url,
+        type: "GET",
+        success: function (data) {
+            console.log(data);
+            // Force the browser to download the file
+            window.open(baseUrl + "/tmp/" + figure_name + ".csv");
+        },
+    });
+}
+
 function downloadPDF() {
     // Get the figure id
     let figure_id = $("#et_figure_id").text();
@@ -172,7 +207,7 @@ function updateEditToolHtml(figure) {
     $("#et_update_date").text(figure.updated_date);
     // Update code
     //$("#code").val(figure.code_updated);
-    editor.setValue(figure.code_updated[0], 1);
+    editor_code.setValue(figure.code_updated[0], 1);
 
 
     // Update figure labels
@@ -390,7 +425,7 @@ function closeEditContainer() {
 
     // Delete the code in the textarea
     //$("#code").val("");
-    editor.setValue("");
+    editor_code.setValue("");
 
     // Hide the mask
     $("#mask").css("display", "none");
@@ -460,7 +495,7 @@ for (let i = 0; i < global_figureList.length; i++) {
         // Load the previous code
         //$("#code").val(figure.code_updated[0]);
         //editor.setValue(figure.code_updated[0]);
-        editor.setValue(figure.code_updated[0], 1);
+        editor_code.setValue(figure.code_updated[0], 1);
 
 
         loadFigure(figure_id, global_figureList);
@@ -483,7 +518,7 @@ $("#btn_add_to_code").click(function () {
 
     if (gg_code != "") {
         //$("#code").val(gg_code);
-        editor.setValue(gg_code);
+        editor_code.setValue(gg_code);
     }
 });
 
@@ -527,7 +562,7 @@ $("#btn_change_figure").click(function () {
 
     // If code textarea is not empty, update the figure
     //let gg_code = $("#code").val();
-    let gg_code = editor.getValue();
+    let gg_code = editor_code.getValue();
     
     if (gg_code != "") {
         global_figureList = updateFigurePost(figure_id, gg_code, global_figureList);
@@ -547,13 +582,28 @@ document.addEventListener("keydown", function(event) {
 $("#bt_canvas").click(function () {
     $("#tab_canvas").css("display", "flex");
     $("#tab_ggplot").css("display", "none");
+    $("#tab_data").css("display", "none");
     $("#bt_canvas").addClass("tab_active");
     $("#bt_ggplot").removeClass("tab_active");
+    $("#bt_data").removeClass("tab_active");
 });
 
 $("#bt_ggplot").click(function () {
     $("#tab_canvas").css("display", "none");
     $("#tab_ggplot").css("display", "flex");
+    $("#tab_data").css("display", "none");
     $("#bt_canvas").removeClass("tab_active");
     $("#bt_ggplot").addClass("tab_active");
+    $("#bt_data").removeClass("tab_active");
+});
+
+$("#bt_data").click(function () {
+    $("#tab_canvas").css("display", "none");
+    $("#tab_ggplot").css("display", "none");
+    $("#tab_data").css("display", "flex");
+    $("#bt_canvas").removeClass("tab_active");
+    $("#bt_ggplot").removeClass("tab_active");
+    $("#bt_data").addClass("tab_active");
+    strData();
 });
+