{"id":13426490,"url":"https://github.com/sheetdb/sheetsu-web-client","last_synced_at":"2026-01-28T22:40:48.428Z","repository":{"id":57375157,"uuid":"97148577","full_name":"sheetdb/sheetsu-web-client","owner":"sheetdb","description":"Sheetsu Web Client","archived":false,"fork":false,"pushed_at":"2018-01-15T11:01:37.000Z","size":1343,"stargazers_count":177,"open_issues_count":4,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-09T08:41:11.219Z","etag":null,"topics":["client-side","database","google","javascript","spreadsheets"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sheetdb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-13T17:25:03.000Z","updated_at":"2025-02-22T02:13:37.000Z","dependencies_parsed_at":"2022-09-05T13:21:02.983Z","dependency_job_id":null,"html_url":"https://github.com/sheetdb/sheetsu-web-client","commit_stats":null,"previous_names":["sheetsu/sheetsu-web-client"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheetdb%2Fsheetsu-web-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheetdb%2Fsheetsu-web-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheetdb%2Fsheetsu-web-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheetdb%2Fsheetsu-web-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sheetdb","download_url":"https://codeload.github.com/sheetdb/sheetsu-web-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243792375,"owners_count":20348634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["client-side","database","google","javascript","spreadsheets"],"created_at":"2024-07-31T00:01:36.049Z","updated_at":"2026-01-28T22:40:48.396Z","avatar_url":"https://github.com/sheetdb.png","language":"JavaScript","readme":"# Sheetsu Web Client\n\nGoogle Spreadsheets as a website database. Store, edit and analyse data even with no knowledge of SQL.\nWith few lines of code you can read and write data to Google Spreadsheets.\n\n\nQuick start\n1. [Read data from database](#read-data)\n2. [Search](#search)\n3. [Read and update HTML elements](#read-and-update-html-elements)\n4. [Save data](#save-data)\n5. [Plot chart](#plot-chart)\n\nOther\n- [Installation](#installation)\n- [What is Sheetsu?](#what-is-sheetsu)\n- [How to create Google Spreadsheets API?](#how-to-create-google-spreadsheets-api)\n- [Docs](#docs)\n\n[Go to Sheetsu website \u0026rarr;](https://sheetsu.com)\n\nAll examples shown below run on this [Google Spreadsheet file](https://docs.google.com/spreadsheets/d/1WTwXrh2ZDXmXATZlQIuapdv4ldyhJGZg7LX8GlzPdZw/edit?usp=sharing).\n\n## Read data\n\nRead data from Google Spreadsheets anywhere on the web. It works with ALL website builders, browsers, and front-end technologies.\n\n```html\n\u003chead\u003e\n  \u003c!-- Add Sheetsu Web Client script to the head --\u003e\n  \u003cscript src=\"//script.sheetsu.com/\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003cscript\u003e\n    // In this example data is saved to the window.users variable\n    // So it's available for use anywhere in the app/page\n    function successFunc(data) {\n      console.log(data);\n    }\n\n    function errorFunc(e) {\n      console.log(e);\n    }\n\n    // Use Sheetsu.read to get data from a spreadsheet.\n    // Pass callback function, which takes one argument - data\n    // It's triggered after getting data from API\n    Sheetsu.read(\"https://sheetsu.com/apis/v1.0/020b2c0f/\", {}).then(successFunc, errorFunc);\n\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n[Play with the live version of the code on CodePen](https://codepen.io/sheetsu/pen/QqKaOG?editors=1111)\n\n## Search\n\nSearch Google Spreadsheets for a record that matches your criteria.\n\n```html\n\u003chead\u003e\n  \u003c!-- Add Sheetsu Web Client script to the head --\u003e\n  \u003cscript src=\"//script.sheetsu.com/\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003cscript\u003e\n    // Print out data to the console\n    function successFunc(data) {\n      console.log(data);\n    }\n\n    function errorFunc(e) {\n      console.log(e);\n    }\n\n    // Use Sheetsu.read to get data from a spreadsheet.\n    // Pass search with JSON to perform a get only results matching your criteria\n    var searchQuery = { score: 42 };\n    // Pass callback function, which takes one argument - data\n    // It's triggered after getting data from API\n    Sheetsu.read(\"https://sheetsu.com/apis/v1.0/020b2c0f/\", { search: searchQuery }).then(successFunc, errorFunc);\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n[Play with the live version of the code on CodePen](https://codepen.io/sheetsu/pen/LzReOX?editors=1111)\n\n## Read and update HTML elements\n\nGet elements from Google Spreadsheets and show them on the web.\n\n```html\n\u003chead\u003e\n  \u003c!-- Add Sheetsu Web Client script to the head --\u003e\n  \u003cscript src=\"//script.sheetsu.com/\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003cul id=\"list\"\u003e\u003c/ul\u003e\n\n  \u003cscript\u003e\n    // API returns array of objects\n    // Iterate over them and add each element as a list element\n    function successFunc(data) {\n      data.forEach(function(item, i) {\n        document.getElementById(\"list\").innerHTML += \"\u003cli\u003e\" + item.name + \" \" + item.score + \"\u003c/li\u003e\";\n      });\n    }\n\n    function errorFunc(e) {\n      console.log(e);\n    }\n\n    Sheetsu.read(\"https://sheetsu.com/apis/v1.0/020b2c0f/\", {}).then(successFunc, errorFunc);\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n[Play with the live version of the code on CodePen](https://codepen.io/sheetsu/pen/veXppq?editors=1111)\n\n## Save data\n\nSave data from the form to the Google Spreadsheets\n\n```html\n\u003chead\u003e\n  \u003c!-- Add Sheetsu Web Client script to the head --\u003e\n  \u003cscript src=\"//script.sheetsu.com/\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cform id=\"myForm\"\u003e\n    \u003cinput type=\"text\" name=\"first_name\"\u003e\n    \u003cinput type=\"text\" name=\"score\"\u003e\n    \u003cbutton type=\"submit\"\u003eSave\u003c/button\u003e\n  \u003c/form\u003e\n\n  \u003cscript\u003e\n\n    document.querySelector(\"#myForm\").addEventListener(\"submit\", function(e) {\n      e.preventDefault();\n      saveData();\n    });\n\n    function saveData() {\n      // Get data from inputs\n      var first_name = document.getElementsByName(\"first_name\")[0].value,\n          score = document.getElementsByName(\"score\")[0].value;\n\n      // Prepare JSON to be send\n      var data = { name: first_name, score: score };\n\n      // Save data to a spreadsheet\n      // Arguments\n      // 1 - API URL\n      // 2 - JSON representation of a row you want to save\n      // 3 - options\n      // 4 - callback function after successful save\n      Sheetsu.write(\"https://sheetsu.com/apis/v1.0/020b2c0f/\", data, {})\n        .then(function(x) {console.log(x);}, function(e) {console.log(e)});\n    }\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n[Play with the live version of the code on CodePen](https://codepen.io/sheetsu/pen/gGwoeb?editors=1111)\n\n## Plot chart\n\nPlot chart with [HighchartJS](https://www.highcharts.com/).\n\n```html\n\u003chead\u003e\n  \u003cscript src=\"https://code.highcharts.com/highcharts.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://code.highcharts.com/modules/data.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://code.highcharts.com/modules/drilldown.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"//script.sheetsu.com/\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"container\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"\u003e\u003c/div\u003e\n\n  \u003cscript\u003e\n    Sheetsu.read(\"https://sheetsu.com/apis/v1.0/020b2c0f/\", {}).then(successFunc);\n\n    function successFunc(data) {\n      Highcharts.chart(\"container\", {\n        chart: { type: \"column\" },\n        title: { text: \"Family Guy Score\" },\n        series: [\n          {\n            colorByPoint: true,\n            data: data.map(function(item) {\n              return { name: item.name, y: parseInt(item.score, 10) };\n            })\n          }\n        ]\n      });\n    }\n  \u003c/script\u003e\n\u003c/body\u003e\n\n```\n[Play with the live version of the code on CodePen](https://codepen.io/sheetsu/pen/dVpJmr)\n\n# Installation\nTo install Sheetsu Web Client, just add\n```\n\u003cscript src=\"//script.sheetsu.com/\"\u003e\u003c/script\u003e\n```\nto the `\u003chead\u003e` of a website.\nOr anywhere else. It should work anyway :)\n\n# What is Sheetsu\n\n[Sheetsu](https://sheetsu.com) is a connection between you and Google Spreadsheets, you can use **anywhere** on the web. You don't need to worry about authorization, refreshing tokens. You just speak with Google Spreadsheets, the easy language you know.\n\n[Go to Sheetsu website \u0026rarr;](https://sheetsu.com)\n\n# How to create Google Spreadsheets API?\n### 1. Create a new Google Spreadsheets file\nOpen your browser and go to the [Google Spreadsheets site](https://docs.google.com/spreadsheets/u/0/). Create a new spreadsheet by clicking the \"+\" button. We will read data from this spreadsheet.\n\n![Go to Google Spreadsheets](images/step-1-1.png)\n\nName your new spreadsheet.\n\n![Name spreadsheet](images/step-1-2.png)\n\nI named it \"Example\". Then add an example data. [You can copy them from this doc](https://docs.google.com/spreadsheets/d/1fW0JSTn2Jc3NkfuUkAn9aa_8kq-BqGVFOjp8lHzP8rc/edit#gid=0). Remember about naming columns first.\n\n![Example data](images/step-1-3.png)\n\n### 2. Go to Sheetsu.com and sign up\nWhen spreadsheet part is done, you need to [Sign up to Sheetsu](https://sheetsu.com). [Let's go to Sheetsu main page](https://sheetsu.com) and click \"SIGN UP\" button in top-right corner of the website.\n\n![Sign up to Sheetsu](images/step-2-1.png)\n\nSheetsu is using Google Authorization system, so you will be redirected to Google accounts page to give some permissions.\n\n![Accept Google permissions](images/step-2-2.png)\n\nIf you accept them, click ALLOW button.\nAnd puff! It is done! We are on the dashboard.\n\n### 3. Copy API URL from Sheetsu\nTo create an API you need to go back to your previously created spreadsheet and copy its URL.\n\n![Copy Google Spreadsheets URL](images/step-3-1.png)\n\nAnd the last thing to do is to paste this URL in your dashboard and click \"CREATE API\" button.\n\n![Create API](images/step-3-2.png)\n\nAfter that, your Sheetsu API will be created. You can click on a generatated link and see the results:\n\n![API ready to use](images/step-3-3.png)\n\n## Docs\n\n[Sheetsu documentation sits on GitHub](https://github.com/sheetsu/docs). We would love your contributions! We want to make these docs accessible and easy to understand for everyone. Please send us Pull Requests or open issues on GitHub.\n\n### Sheetsu.read(url, options)\nRead data from Google Spreadsheet. Returns promis. `options` can be:\n```\nlimit - number of how many rows should be returned\noffset - number from which row response should start (default is 0)\ntransposed - transpose sheet on the fly. Default is false\nsheet - name of worksheet you want to access. Also, can be a number, worksheet sare numbered from 0.\n        Example:\n        { sheet: \"Sheet2\" } - read data from worksheet named 'Sheet2'\n        { sheet: 3 } - read data from fourth worksheet\nsearch - object with search params to match searching criteria. Accepts '*' as a wildcard.\n         Example:\n         { search: { name: \"Peter\", score: 42 } } - return rows where name == Peter and score == 42\n         { search: { name: \"*is\" } } - return rows where name ends with 'is'\n\nAll options can be used together\n{ sheet: \"Sheet2\", search: { foo: \"bar\" }, limit: 1 } - return first row only from worksheet named \"Sheet2\", where column 'foo' equals 'bar'\n```\n\n### Sheetsu.write(url, data, options)\nWrite data to Google Spreadsheet. Returns promis. `data` can be object - one row, or array similar to\n```\n{\n  rows: [\n    { name: \"X\", score: \"1\" },\n    { name: \"Y\", score: \"2\" }\n  ]\n}\n```\nif you want to save more than one row in a single request.\n`options` can be:\n```\nsheet - name of worksheet you want to access. Also, can be a number, worksheet sare numbered from 0.\n        Example:\n        { sheet: \"Sheet2\" } - read data from worksheet named 'Sheet2'\n        { sheet: 3 } - read data from fourth worksheet\n```\n\n# Development\n\nTo test this library open `SpecRunner.html` in a web browser. All specs are written with [Jasmine](https://jasmine.github.io/). Please keep in mind to keep this code as small as possible and to work on any kind of browser (yes, even old IE...).\n\nRun all tests:\n```bash\n$ open `SpecRunner.html`\n```\n\n# Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/sheetsu/sheetsu-js. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.\n\n### Pull Requests\n\n- **Add tests!** Your patch won't be accepted if it doesn't have tests.\n\n- **Create topic branches**. Please, always create a branch with meaningful name. Don't ask us to pull from your master branch.\n\n- **One pull request per feature**. If you want to do more than one thing, please send\n  multiple pull requests.\n\n- **Send coherent history**. Make sure each individual commit in your pull\n  request is meaningful. If you had to make multiple intermediate commits while\n  developing, please squash them before sending them to us.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsheetdb%2Fsheetsu-web-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsheetdb%2Fsheetsu-web-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsheetdb%2Fsheetsu-web-client/lists"}