{"id":20204612,"url":"https://github.com/epykure/epyk-ui","last_synced_at":"2025-08-01T04:09:48.564Z","repository":{"id":44390049,"uuid":"208439319","full_name":"epykure/epyk-ui","owner":"epykure","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-21T23:30:34.000Z","size":38290,"stargazers_count":72,"open_issues_count":19,"forks_count":4,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-05-22T00:31:22.623Z","etag":null,"topics":["css3","javascript","python"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/epykure.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-14T12:46:31.000Z","updated_at":"2024-05-21T23:30:37.000Z","dependencies_parsed_at":"2024-01-15T10:05:04.015Z","dependency_job_id":"60030917-7713-4ac3-b51b-7cf0903979b9","html_url":"https://github.com/epykure/epyk-ui","commit_stats":{"total_commits":2196,"total_committers":6,"mean_commits":366.0,"dds":0.5036429872495447,"last_synced_commit":"6a00cafc3c0b36262c02b1f7b4748167fa5809c3"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epykure%2Fepyk-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epykure%2Fepyk-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epykure%2Fepyk-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epykure%2Fepyk-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/epykure","download_url":"https://codeload.github.com/epykure/epyk-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931136,"owners_count":21827102,"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":["css3","javascript","python"],"created_at":"2024-11-14T05:14:11.106Z","updated_at":"2025-05-07T17:48:57.400Z","avatar_url":"https://github.com/epykure.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\" \u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/epykure/epyk-ui/master/epyk/static/images/epykIcon.PNG\"\u003e\n\u003cbr/\u003e\u003ci\u003eA single module to link Python ecosystem to the Web.\u003c/i\u003e\n\n[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/epykure/epyk-ui/graphs/commit-activity)\n[![made-with-python](https://img.shields.io/badge/Made%20with-Python-1f425f.svg)](https://www.python.org/)\n[![PyPI version shields.io](https://img.shields.io/pypi/v/epyk.svg)](https://pypi.python.org/pypi/epyk/)\n[![Documentation Status](https://readthedocs.org/projects/epyk-ui/badge/?version=latest)](http://epyk-ui.readthedocs.io/?badge=latest)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/epykure/epyk-ui/issues)\n[![Donate](https://img.shields.io/badge/Bitcoin-000?style=for-the-badge\u0026logo=bitcoin\u0026logoColor=white)](https://www.blockchain.com/btc/address/bc1qjhlke0q8g4sk9hdza2afx3ytwp7tmlagsjq9sq)  \n\n\u003c/div\u003e\n\nThis project is in active and constant improvement so do not forget to run the below command to always get the latest version install.\n\n```\npip install epyk --upgrade\n```\n\n## Presentation\n\n### About the project\n\nWe started the implementation of Epyk already few years ago in order to help Python developers (from beginner to advanced) to present their work to clients or colleagues. At this time there were only few packages in Python available and it was quite difficult for people to move to web technologies like JS, HTML and CSS.\n\nWith this idea we started to create Epyk, a kind of transpiler which is dedicated to assist from Python the developers to develop rich web UI. \nIt will try, thanks to the autocompletion provided by the library, to familiarise the developer / data scientist in the wording of web technologies. Indeed we tried as much as possible to keep the same naming convention for CSS attributes and Javascript function to simplify the review of the transpiled HTML page if needed.\n\nToday Epyk is a bit more than a transpiler as it will encompass more than [**100** JavaScript](https://epyk-ui.readthedocs.io/en/latest/report/supported_ext.html#libraries) and CSS modules.\n\nMost of the popular web libraries (JQuery, Bootstrap, ApexCharts, ChartJs, Tabulator, AgGrid...) are available from the Epyk components. The resulting page transpiled will only import the ones needed for the selected components.\n\n\n## Quickstart\n\nFor people impatient to understand the concept, you can test the below minimalist dashboard.\n\nInstall Epyk\n\n\u003e pip install epyk\n\nThe below code will create a simple interactive dashboard relying on internal mock data.\n\n```py\nimport epyk as pk\n\n# Just to get mock data to test\nfrom epyk.mocks import randoms\n\npage = pk.Page()\npage.headers.dev()\n\njs_data = page.data.js.record(data=randoms.languages)\nfilter1 = js_data.filterGroup(\"filter1\")\n\nselect = page.ui.select([\n  {\"value\": '', 'name': 'name'},\n  {\"value\": 'type', 'name': 'code'},\n])\n\nbar = page.ui.charts.chartJs.bar(randoms.languages, y_columns=[\"rating\", 'change'], x_axis='name')\npie = page.ui.charts.chartJs.pie(randoms.languages, y_columns=['change'], x_axis='name')\npage.ui.row([bar, pie])\n\nselect.change([\n  bar.build(filter1.group().sumBy(['rating', 'change'], select.dom.content, 'name')),\n  pie.build(filter1.group().sumBy(['change'], select.dom.content, 'name')),\n])\n```\n\nMore information in the doc [Getting started with Epyk](https://epyk-ui.readthedocs.io/en/latest/intro/getting-started-with-epyk.html)\n\n## Usage\n\nFirst install Epyk to your Python environment\n\n### From static pages\n\n```py\npip install epyk\n```\n\nCreate a report and change CSS3 or add JavaScript events.\n\n```py\nimport epyk as pk\n\npage = pk.Page()\npage.headers.dev()\n\nbutton = page.ui.button(\"Click me\")\nbutton.style.css.color = \"red\"\nbutton.click([\n    page.js.console.log(\"log message\")\n])\n.... \n\n# Then to produce the html page\npage.outs.html_file(path=\"/templates\", name=\"test\")\n```\n\n### Using a web server\n\nGo to the next level and add real time flux in few lines or code. Epyk allows to integrate concepts of Reactive programming thanks\nto Python 3 and asyncio. All the features available in JavaScript (socket, websocket, observable ...) can be used as long as the underlying webserver is compatible.\n\nIf the underlying web server is not compatible with those modern features, Ajax (post, get...) are also available.\nMore examples are available in the []template / interactive](https://github.com/epykure/epyk-templates/tree/master/interactives) section.\n\n\nOn the client side\n```py\nimport epyk as pk\n\npage = pk.Page()\npage.headers.dev()\n\nsocket.connect(url=\"127.0.0.1\", port=3000, namespace=\"/news\")\ninput = page.ui.input()\n\npie = page.ui.charts.chartJs.polar([], y_columns=[1], x_axis=\"x\")\n\ncontainer.subscribe(socket, 'news received', data=socket.message['content'])\npie.subscribe(socket, 'news received', data=socket.message['pie'])\n\npage.ui.button(\"Send\").click([\n  socket.emit(\"new news\", input.dom.content)\n])\n\npage.outs.html_file(path=\"/templates\", name=\"socket_example\")\n```\n\n\nOn the server side (using socketio)\n```py\nfrom flask import Flask, render_template_string\nfrom flask_socketio import SocketIO, emit\n\napp = Flask(__name__)\n\napp.config['SECRET_KEY'] = 'secret!'\nsocketio = SocketIO(app)\n\n \n@socketio.on('new news', namespace='/news')\ndef new_news(message):\n  values = getSeries(5, 100)\n  result_pie = chart_data.chartJs.y(values, [1, 4, 5], 'g')\n  emit('news received', {\"content\": message, 'pie': result_pie}, broadcast=True)\n\n```\n\n### From Notebooks\n\nWe maintain a separate Github repository of Jupyter Notebooks that contain an\ninteractive tutorial and examples:\n\nhttps://nbviewer.jupyter.org/github/epykure/epyk-templates-notebooks/\n\nTo launch a live notebook server with those notebook using [binder](https://mybinder.org/) click on one of the following badge:\n\n[![Binder](https://beta.mybinder.org/badge.svg)](https://beta.mybinder.org/v2/gh/epykure/epyk-templates-notebooks/master)\n\n\nMore examples are available on the [official repository](https://github.com/epykure/epyk-templates)\n\n\n## Compatibility / Open Source Stack\n\n**No dependency hence  the library can be integrated to any existing Python project**\n\nEpyk is compatible with the most common Web Python Frameworks (Flask and Django).\nBy default, the server package embeds a Flask app as it is easier to install and ready to use.\n\nThe Framework can be included within a Jupyter or JupyterLab project. But this will lead to some limitations - for example Ajax and Socket will not be available.\n\nThe generated Web pages are compatible with the common modern web frameworks.\n\n[\u003cimg src=\"resources/python.svg\" alt=\"python\" height=40\u003e](https://www.python.org)\n[\u003cimg src=\"resources/flask.png\" alt=\"flask\" height=40\u003e](https://flask.palletsprojects.com/en/2.2.x/)\n[\u003cimg src=\"resources/tornado.png\" alt=\"tornad0\" height=40\u003e](https://www.tornadoweb.org/en/stable/)\n[\u003cimg src=\"resources/django.png\" alt=\"django\" height=40\u003e](https://www.djangoproject.com/)\n[\u003cimg src=\"resources/fastapi.svg\" alt=\"fastapi\" height=40\u003e](https://fastapi.tiangolo.com)\n[\u003cimg src=\"resources/jupyter.png\" alt=\"jupyter\" height=40\u003e](https://nbviewer.org/github/epykure/epyk-templates-notebooks/blob/master/tutorials/components/00_components.ipynb)\n[\u003cimg src=\"resources/collab.png\" alt=\"collab\" height=40\u003e](https://colab.research.google.com/drive/12ZL_PHDItSvfILi5akyUc-thd4J8dx6J)\n[\u003cimg src=\"resources/react.png\" alt=\"react\" height=40\u003e](https://reactjs.org/)\n[\u003cimg src=\"resources/angular.png\" alt=\"angular\" height=40\u003e](https://angularjs.org/)\n[\u003cimg src=\"resources/vue.png\" alt=\"vue\"\u003e](https://vuejs.org/)\n[\u003cimg src=\"resources/svelte.svg\" alt=\"svelte\" height=40\u003e](https://svelte.dev)\n\n\n## Resources\n\n- [Documentation](https://epyk-ui.readthedocs.io/en/latest/)\n- [Changelog](CHANGELOG.md)\n- [Templates](https://github.com/epykure/epyk-templates/tree/master/tutos)\n- [Gallery](https://epykure.github.io/demos/)\n- [Collab \u0026 Jupyter](https://epykure.github.io/demos/)\n- [Stackoverflow](https://stackoverflow.com/search?q=epyk)\n\n## Coming soon\n\n**Epyk Studio** is a rich and collaborative framework to simplify the use of this library with bespoke configuration / styles. You can start downloading it [here](https://pypi.org/project/epyk-studio/) \nor contribute to the project on the [Github repository](https://github.com/epykure/epyk-studio). This is still under development hence it is not yet official released\n\n\n# Feedback and Contribution\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\nPlease get in touch if there is any feature you feel Epyk-UI needs.\n\n\n# Donate\n\nWant to donate? Feel free. Send to [blockchain](https://www.blockchain.com/btc/address/bc1qjhlke0q8g4sk9hdza2afx3ytwp7tmlagsjq9sq)\n\n[\u003cimg src=\"resources/blockchain_qrcode.PNG\" alt=\"Donate\" height=100\u003e](https://www.blockchain.com/btc/address/bc1qjhlke0q8g4sk9hdza2afx3ytwp7tmlagsjq9sq)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepykure%2Fepyk-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fepykure%2Fepyk-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepykure%2Fepyk-ui/lists"}