{"id":13436014,"url":"https://github.com/kittoframework/kitto","last_synced_at":"2026-02-21T06:32:37.373Z","repository":{"id":43496425,"uuid":"58556997","full_name":"kittoframework/kitto","owner":"kittoframework","description":"Kitto is a framework for interactive dashboards written in Elixir","archived":false,"fork":false,"pushed_at":"2020-12-06T21:16:55.000Z","size":440,"stargazers_count":958,"open_issues_count":12,"forks_count":57,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-03-07T12:46:16.803Z","etag":null,"topics":["dashboard","elixir","framework","react"],"latest_commit_sha":null,"homepage":"http://kitto.io/dashboards/sample","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kittoframework.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-11T15:27:31.000Z","updated_at":"2025-02-21T19:57:30.000Z","dependencies_parsed_at":"2022-08-03T00:01:33.154Z","dependency_job_id":null,"html_url":"https://github.com/kittoframework/kitto","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kittoframework%2Fkitto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kittoframework%2Fkitto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kittoframework%2Fkitto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kittoframework%2Fkitto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kittoframework","download_url":"https://codeload.github.com/kittoframework/kitto/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244222155,"owners_count":20418458,"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":["dashboard","elixir","framework","react"],"created_at":"2024-07-31T03:00:42.299Z","updated_at":"2025-10-21T15:02:11.892Z","avatar_url":"https://github.com/kittoframework.png","language":"Elixir","readme":"![kitto-logo](http://i.imgur.com/GE38c22.png)\n\n---------------------------------------------\n\n[![Build Status](https://travis-ci.org/kittoframework/kitto.svg?branch=master)](https://travis-ci.org/kittoframework/kitto)\n[![Package Version](https://img.shields.io/hexpm/v/kitto.svg)](https://hex.pm/packages/kitto)\n[![Coverage](https://coveralls.io/repos/github/kittoframework/kitto/badge.svg?branch=master)](https://coveralls.io/github/kittoframework/kitto)\n[![Inline docs](http://inch-ci.org/github/kittoframework/kitto.svg)](http://inch-ci.org/github/kittoframework/kitto)\n[![Chat on Gitter](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/kittoframework/Lobby)\n\nKitto is a framework to help you create dashboards, written in [Elixir][elixir] / [React][react].\n\n## Demo\n\n![demo](http://i.imgur.com/YgZibXU.png)\n\n+ [Sample Dashboard](https://kitto.io/dashboards/sample)\n+ [Elixir Dashboard](https://kitto.io/dashboards/elixir)\n+ [Jobs Dashboard](https://kitto.io/dashboards/jobs)\n+ [1080 Dashboard](https://kitto.io/dashboards/sample1080) (optimized for 1080 screens) ([source][source-1080])\n\nThe source for the demo dashboards can be found at: [kittoframework/demo](https://github.com/kittoframework/demo).\n\nTo start creating your own, read [below](https://github.com/kittoframework/kitto#create-a-dashboard).\n\n## Features\n\n* Jobs are supervised processes running concurrently\n* Widgets are coded in the popular [React][react] library\n* Uses a modern asset tool-chain, [Webpack][webpack]\n* Allows streaming SSE to numerous clients concurrently with low\n  memory/CPU footprint\n* Easy to deploy using the provided Docker images, Heroku ([guide][wiki-heroku])\n  or [Distillery][distillery] ([guide][wiki-distillery])\n* Can serve assets in production\n* Keeps stats about defined jobs and comes with a dashboard to monitor them ([demo][demo-jobs])\n* Can apply exponential back-offs to failing jobs\n* [Reloads][code-reloading] code upon change in development\n\n## Installation\n\nInstall the latest archive\n\n```shell\nmix archive.install https://github.com/kittoframework/archives/raw/master/kitto_new-0.9.2.ez\n```\n\n## Requirements\n\n* `Elixir`: \u003e= 1.3\n* `Erlang/OTP`: \u003e= 19\n\n### Assets\n\n* `Node`: 14.15.1\n* `npm`: 6.14.9\n\nIt may inadvertently work in versions other than the above, but it won't have been\nthoroughly tested (see [.travis.yml][.travis.yml] for the defined build matrix).\n\nYou may also use the official [Docker image](https://github.com/kittoframework/kitto#using-docker).\n\nPlease open an issue to request support for a specific platform.\n\n## Create a dashboard\n\n```shell\nmix kitto.new \u003cproject_name\u003e\n```\n\n## Development\n\nInstall dependencies\n\n```shell\nmix deps.get \u0026\u0026 npm install\n```\n\nStart a Kitto server (also watches for assets changes)\n\n```shell\nmix kitto.server\n```\n\nTry the sample dashboard at: [http://localhost:4000/dashboards/sample](http://localhost:4000/dashboards/sample)\n\nFor configuration options and troubleshooting be sure to consult the\n[wiki][wiki].\n\n## The dashboard grid\n\nKitto is capable of serving multiple dashboards. Each one of them is\nserved from a path of the following form `/dashboards/\u003cdashboard_name\u003e`.\n\nA dashboard consists of a [Gridster](http://dsmorse.github.io/gridster.js/) grid containing [React](https://facebook.github.io/react/) widgets.\n\nYou will find a sample dashboard under `dashboards/sample`.\n\nThe snippet below will place a simple `Text` widget in the dashboard.\n\n```html\n\u003cli data-row=\"1\" data-col=\"1\" data-sizex=\"2\" data-sizey=\"1\"\u003e\n  \u003cdiv class=\"widget-welcome\"\n       data-widget=\"Text\"\n       data-source=\"text\"\n       data-title=\"Hello\"\n       data-text=\"This is your shiny new dashboard.\"\n       data-moreinfo=\"Protip: You can drag the widgets around!\"\u003e\u003c/div\u003e\n\u003c/li\u003e\n```\n\nThe most important data attributes here are\n\n* `data-widget` Selects the widget to be used. See: [Widgets](https://github.com/kittoframework/kitto#widgets)\n* `data-source` Selects the data source to populate the widget. See: [Jobs](https://github.com/kittoframework/kitto#jobs)\n\nThe other data attributes are options to be passed as props to the React widget.\n\n## Jobs\n\nBy creating a new dashboard using `mix kitto.new \u003cproject_name\u003e` you get\na few sample jobs in the directory `jobs/`.\n\nA job file is structured as follows:\n\n```elixir\n# File jobs/random.exs\nuse Kitto.Job.DSL\n\njob :random, every: :second do\n  broadcast! :random, %{value: :rand.uniform * 100 |\u003e Float.round}\nend\n```\n\nThe above will spawn a supervised process which will emit a [server-sent\nevent](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) with the name `random` every second.\n\nJobs can also run commands on the server. Data broadcast using commands is in\nthe form `{exit_code: integer, stdout: String.t}`. For example the following\njob will broadcast a `kitto_last_commit` event with the results of the `curl`\nstatement:\n\n```elixir\njob :kitto_last_commit,\n    every: {5, :minutes},\n    command: \"curl https://api.github.com/repos/kittoframework/kitto/commits\\?page\\=1\\\u0026per_page\\=1\"\n```\n\nYou can set a job to start at a later time using the `first_at` option:\n\n```elixir\n# Delay the first run by 2 minutes\njob :random, every: :second, first_at: {2, :minutes} do\n  broadcast! :random, %{value: :rand.uniform * 100 |\u003e Float.round}\nend\n```\n\n## Widgets\n\nWidgets live in `widgets/` are compiled using\n[Webpack](https://webpack.github.io/) and are automatically loaded in the dashboards.\nAssets are rebuilt upon change in development, but have to be compiled\nfor production. See `webpack.config.js` for build options.\n\nExample widget (`widgets/text/text.js`)\n\n```javascript\nimport React from 'react';\nimport Widget from '../../assets/javascripts/widget';\n\nimport './text.scss';\n\nWidget.mount(class Text extends Widget {\n  render() {\n    return (\n      \u003cdiv className={this.props.className}\u003e\n        \u003ch1 className=\"title\"\u003e{this.props.title}\u003c/h1\u003e\n        \u003ch3\u003e{this.state.text || this.props.text}\u003c/h3\u003e\n        \u003cp className=\"more-info\"\u003e{this.props.moreinfo}\u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n});\n```\n\nEach widget is updated with data from one source specified using the\n`data-source` attribute.\n\n## Deployment\n\n\n### Deployment Guides\n\n[distillery][wiki.distillery] | [docker][wiki.docker] | [heroku][wiki.heroku] | [systemd][wiki.systemd]\n\nCompile the project\n\n```shell\nMIX_ENV=prod mix compile\n```\n\nCompile assets for production\n\n```shell\nnpm run build\n```\n\nStart the server\n\n```shell\nMIX_ENV=prod mix kitto.server\n```\n\n#### Using Docker\n\nBy scaffolding a new dashboard with:\n\n```shell\nmix kitto.new\n```\n\nyou also get a `Dockerfile`.\n\nBuild an image including your code, ready to be deployed.\n\n```shell\ndocker build . -t my-awesome-dashboard\n```\n\nSpawn a container of the image\n\n```shell\ndocker run -i -p 127.0.0.1:4000:4000 -t my-awesome-dashboard\n```\n\n#### Heroku\n\nPlease read the detailed [instructions][wiki-heroku] in the wiki.\n\n### Upgrading\n\nPlease read the [upgrading guide][upgrading-guide] in the wiki.\n\n### Contributing\n#### Run the Tests\n\n```shell\nmix test\n```\n\n#### Run the Linter\n\n```shell\nmix credo\n```\n\n### Support\n\nHave a question?\n\n* Check the [wiki][wiki] first\n* See [elixirforum/kitto](https://elixirforum.com/t/kitto-a-framework-for-interactive-dashboards)\n* Open an [issue](https://github.com/kittoframework/kitto/issues/new)\n* Ask in [gitter.im/kittoframework](https://gitter.im/kittoframework/Lobby)\n\n### Inspiration\n\nIt is heavily inspired by [shopify/dashing](http://dashing.io/). :heart:\n\n### About the name\n\nThe [road to Erlang / Elixir](https://www.google.gr/maps/place/Erlanger+Rd,+London) starts with [Kitto](https://en.wikipedia.org/wiki/H._D._F._Kitto).\n\n# LICENSE\n\nCopyright (c) 2017 Dimitris Zorbas, MIT License.\nSee [LICENSE.txt](https://github.com/kittoframework/kitto/blob/master/LICENSE.txt) for further details.\n\nLogo by Vangelis Tzortzis ([github][srekoble-github] / [site][srekoble-site]).\n\n[elixir]: http://elixir-lang.org\n[react]: https://facebook.github.io/react/\n[webpack]: https://webpack.github.io/\n[gridster]: http://dsmorse.github.io/gridster.js/\n[wiki]: https://github.com/kittoframework/kitto/wiki\n[wiki-heroku]: https://github.com/kittoframework/kitto/wiki/Deploying-to-Heroku\n[code-reloading]: https://github.com/kittoframework/kitto/wiki/Code-Reloading\n[upgrading-guide]: https://github.com/kittoframework/kitto/wiki/Upgrading-Guide\n[.travis.yml]: https://github.com/kittoframework/kitto/blob/master/.travis.yml\n[distillery]: https://github.com/bitwalker/distillery\n[wiki-heroku]: https://github.com/kittoframework/kitto/wiki/%5BDeployment%5D-Heroku\n[wiki-distillery]: https://github.com/kittoframework/kitto/wiki/%5BDeployment%5D-Distillery\n[demo-jobs]: https://kitto.io/dashboards/jobs\n[wiki.distillery]: https://github.com/kittoframework/kitto/wiki/%5BDeployment%5D-Distillery\n[wiki.docker]: https://github.com/kittoframework/kitto/wiki/%5BDeployment%5D-Docker\n[wiki.heroku]: https://github.com/kittoframework/kitto/wiki/%5BDeployment%5D-Heroku\n[wiki.systemd]: https://github.com/kittoframework/kitto/wiki/%5BDeployment%5D-systemd-Unit\n[source-1080]: https://github.com/kittoframework/demo/blob/master/dashboards/sample1080.html.eex\n[srekoble-github]: https://github.com/srekoble\n[srekoble-site]: https://vangeltzo.com/\n","funding_links":[],"categories":["Elixir","Frameworks"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkittoframework%2Fkitto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkittoframework%2Fkitto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkittoframework%2Fkitto/lists"}