{"id":22750242,"url":"https://github.com/webix-hub/webix-firebase","last_synced_at":"2026-03-14T01:06:50.477Z","repository":{"id":22566073,"uuid":"25907403","full_name":"webix-hub/webix-firebase","owner":"webix-hub","description":"Firebase adapter for Webix UI","archived":false,"fork":false,"pushed_at":"2019-04-04T15:58:42.000Z","size":24,"stargazers_count":20,"open_issues_count":1,"forks_count":10,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-28T02:05:18.031Z","etag":null,"topics":["firebase","webix","webix-integration"],"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/webix-hub.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":"2014-10-29T06:18:47.000Z","updated_at":"2023-06-27T05:23:11.000Z","dependencies_parsed_at":"2022-08-21T08:00:22.234Z","dependency_job_id":null,"html_url":"https://github.com/webix-hub/webix-firebase","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webix-hub%2Fwebix-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webix-hub","download_url":"https://codeload.github.com/webix-hub/webix-firebase/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248550633,"owners_count":21122932,"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":["firebase","webix","webix-integration"],"created_at":"2024-12-11T04:13:17.387Z","updated_at":"2026-03-14T01:06:45.438Z","avatar_url":"https://github.com/webix-hub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Firebase adapter for Webix UI\n=============================\n\n[![npm version](https://badge.fury.io/js/webix-firebase.svg)](https://badge.fury.io/js/webix-firebase)\n\nLibrary allows using [Webix](http://webix.com) components with [FireBase](https://firebase.google.com/)\n\nLatest version will work with Webix 6.2+, if you are using an older version of Webix, you need to use version 0.5 of this package.\n\nCiting the Firebase site:\n\nWhen data changes, apps built with Firebase update instantly across every device -- web or mobile.\n\nFirebase-powered apps work offline. Data is synchronized instantly when your app regains connectivity.\n\n\nFirestore\n-----------------\n\nInclude Webix and Firebase files on the page\n\n```html\n\u003c!-- Webix --\u003e\n\u003cscript type=\"text/javascript\" src=\"http://cdn.webix.com/edge/webix.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"http://cdn.webix.com/edge/webix.css\"\u003e\n\u003c!-- Webix-Firebase adapter --\u003e\n\u003cscript type=\"text/javascript\" src=\"../codebase/webix-firestore.js\"\u003e\u003c/script\u003e\n\u003c!-- FireBase --\u003e\n\u003cscript src=\"https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://www.gstatic.com/firebasejs/5.0.4/firebase-firestore.js\"\u003e\u003c/script\u003e\n```\n\nCreate main firebase connection\n\n```js\nfirebase.initializeApp({\n\tapiKey: \"YOU API KEY HERE\",\n\tprojectId: \"webix-demo\"\n});\n\n// create firebase connection, and assign it to webix\nvar db = firebase.firestore();\ndb.settings({ timestampsInSnapshots:true });\n\nwebix.firestore = db;\n```\n\nInit webix component, using \"firebase-\u003e{reference}\" as data url\n\n```js\nwebix.ui({\n\tid:\"dtable\",\n\tview:\"datatable\",\n\tautoConfig:true,\n\n\t// load data from \"books\" collection\n\turl: \"firestore-\u003ebooks\",\n\t// save data to \"books\" collection\n\tsave:\"firestore-\u003ebooks\"\n}\n```\t\n\nThat is it.\n\nAdding \"url\" property will enable data loading and automatic updates of component when data changed in the firebase. \n\nAdding \"save\" property ensures that all changes in the datatable will be saved to the Firebase\n\n### Using FireBase references\n\nInstead of using text url you can use firestore collections directly \n\n```js\nfirebase.initializeApp({\n\tapiKey: \"YOU API KEY HERE\",\n\tprojectId: \"webix-demo\"\n});\n\n// create firebase connection, and assign it to webix\nvar db = firebase.firestore();\ndb.settings({ timestampsInSnapshots:true });\n\nvar proxy = webix.proxy(\"firestore\", db.collection(\"books\"));\n\nwebix.ui({\n\tview:\"list\",\n\turl: proxy,\n\tsave: proxy\n}););\n```\n\n\n### Dynamic data loading\n\nYou can use \"load\" command to (re)load data in the component. \n\n```js\n$$(\"dtable\").clearAll();\n$$(\"dtable\").load(\"firestore-\u003ebooks\");\n```\n\nor\n\n```js\n$$(\"dtable\").clearAll();\n$$(\"dtable\").load( webix.proxy(\"firestore\", collection) );\n```\n\n\nRealtime Database\n------------------\n\nInclude Webix and Firebase files on the page\n\n```html\n\u003c!-- Webix --\u003e\n\u003cscript type=\"text/javascript\" src=\"http://cdn.webix.com/edge/webix.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"http://cdn.webix.com/edge/webix.css\"\u003e\n\u003c!-- Webix-Firebase adapter --\u003e\n\u003cscript type=\"text/javascript\" src=\"../codebase/webix-firebase.js\"\u003e\u003c/script\u003e\n\u003c!-- FireBase --\u003e\n\u003cscript src=\"https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://www.gstatic.com/firebasejs/5.0.4/firebase-database.js\"\u003e\u003c/script\u003e\n```\n\nCreate main firebase connection\n\n```js\nfirebase.initializeApp({\n  databaseURL: \"https://webix-demo.firebaseio.com/\"\n});\n\n// create firebase connection, and assign it to webix\nwebix.firebase = firebase.database();\n```\n\nInit webix component, using \"firebase-\u003e{reference}\" as data url\n\n```js\nwebix.ui({\n\tid:\"dtable\",\n\tview:\"datatable\",\n\teditable:true, editaction:\"dblclick\",\n\tcolumns:[{\n\t\tid:\"name\", editor:\"text\", fillspace:1\n\t},{\n\t\tid:\"author\", editor:\"text\", fillspace:1\n\t}],\n\n\t// load data from /books\n\turl: \"firebase-\u003ebooks\",\n\t// save data to /books\n\tsave:\"firebase-\u003ebooks\"\n}\n```\t\n\nThat is it.\n\nAdding \"url\" property will enable data loading and automatic updates of component when data changed in the firebase. \n\nAdding \"save\" property ensures that all changes in the datatable will be saved to the Firebase\n\n\n\n### Using FireBase references\n\nInstead of using text url you can use firebase references directly \n\n```js\nfirebase.initializeApp({\n\tdatabaseURL: \"https://webix-demo.firebaseio.com/\"\n});\nvar db = firebase.database();\nvar proxy = webix.proxy(\"firebase\", db.ref(\"books\"));\n\nwebix.ui({\n\tview:\"list\",\n\turl: proxy,\n\tsave: proxy\n});\n```\n\n\n### Dynamic data loading\n\nYou can use \"load\" command to (re)load data in the component. \n\n```js\n$$(\"dtable\").clearAll();\n$$(\"dtable\").load(\"firebase-\u003ebooks\");\n```\n\nor\n\n```js\n$$(\"dtable\").clearAll();\n$$(\"dtable\").load( webix.proxy(\"firebase\", ref) );\n```\n\n\n\n\n### Sync api\n\nWebix components have native [sync](http://docs.webix.com/api__link__ui.proto_sync.html) api to [sync data between components](http://docs.webix.com/desktop__data_binding.html). The same api can be used with firebase\n\n```js\nfirebase.initializeApp({\n\tdatabaseURL: \"https://webix-demo.firebaseio.com/\"\n});\nwebix.firebase = firebase.database();\nvar ref = webix.firebase.ref(\"books\");\n\n$$(\"dtable\").sync(ref);\n```\n\n### Working with Forms and Templates\n\n\nSimilar to data views, you can use \"load\" and \"save\" API while working with Forms\n\n```js\n//form\n$$(\"form\").load(\"books/4\");\n...\n$$(\"form\").save();\n\n//template\n$$(\"template\").load(\"books/4\")\n```\n\nIn some cases, it has sense to not load data correctly but bind form ( template ) to some other view or data collection\n\n```js\nvar data = new webix.DataCollection({\n\turl:\"firebase-\u003ebooks\",\n\tsave:\"firebase-\u003ebooks\"\n})\nform.bind(data);\ndata.waitData.then(function(){\n\t//you need to use setCursor API to load some record from collection into a form\n\tdata.setCursor(\"4\");\n})\n```\n\nor, the same for the datatable\n\n```js\nwebix.ui({\n\tview:\"datatable\", autoConfig:true, id:\"d1\", select:true,\n\turl:\"firebase-\u003ebooks\",\n\tsave:\"firebase-\u003ebooks\"\n});\nform.bind(\"d1\"); //selected row will be shown in a form\n```\n\nSamples\n-----------\n\n- [Grid, data loading and saving by url](http://webix-hub.github.io/webix-firebase/samples/01_datatable_url.html)\n- [Grid, data loading and saving by reference](http://webix-hub.github.io/webix-firebase/samples/02_datatable_ref.html)\n- [Grid, syncing with reference](http://webix-hub.github.io/webix-firebase/samples/03_datatable_sync.html)\n- [Different components, data syncing](http://webix-hub.github.io/webix-firebase/samples/04_other_components.html)\n- [Webix Kanban with FireBase backend](http://webix-hub.github.io/webix-firebase/samples/05_kanban.html)\n\n\nLicense\n----------\n\nThe MIT License\n\nCopyright (c) 2015 Maksim Kozhukh \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebix-hub%2Fwebix-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebix-hub%2Fwebix-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebix-hub%2Fwebix-firebase/lists"}