{"id":14974201,"url":"https://github.com/shubhgajj2004/butterflaskui","last_synced_at":"2025-10-27T06:32:00.105Z","repository":{"id":176330377,"uuid":"654578261","full_name":"Shubhgajj2004/ButterFlaskUI","owner":"Shubhgajj2004","description":"Now, building UI with Python would be smooth like Butter","archived":false,"fork":false,"pushed_at":"2023-10-23T12:58:27.000Z","size":57,"stargazers_count":3,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-30T07:07:03.915Z","etag":null,"topics":["django","flask","hacketoberfest2023","hacktoberfest","hacktoberfest-accepted","html-css","python"],"latest_commit_sha":null,"homepage":"","language":"Python","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/Shubhgajj2004.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2023-06-16T12:42:34.000Z","updated_at":"2024-03-20T15:41:32.000Z","dependencies_parsed_at":"2024-09-14T17:44:23.869Z","dependency_job_id":"ee2d0660-67d7-406b-9b66-024216eb934e","html_url":"https://github.com/Shubhgajj2004/ButterFlaskUI","commit_stats":null,"previous_names":["shubhgajj2004/butterflaskui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shubhgajj2004%2FButterFlaskUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shubhgajj2004%2FButterFlaskUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shubhgajj2004%2FButterFlaskUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shubhgajj2004%2FButterFlaskUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shubhgajj2004","download_url":"https://codeload.github.com/Shubhgajj2004/ButterFlaskUI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238455087,"owners_count":19475375,"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":["django","flask","hacketoberfest2023","hacktoberfest","hacktoberfest-accepted","html-css","python"],"created_at":"2024-09-24T13:50:09.005Z","updated_at":"2025-10-27T06:31:54.812Z","avatar_url":"https://github.com/Shubhgajj2004.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ButterFlask-UI 🧈\n\n[![PyPI version](https://badge.fury.io/py/butterflask.svg)](https://badge.fury.io/py/butterflask)\n\n🌿 ButterFlask-UI is a modern and lightweight Python framework for creating highly responsive websites using widgets. It provides a seamless development experience, similar to Flutter, by leveraging the power of widgets to build interactive user interfaces. With ButterFlask-UI, you can easily create elegant and dynamic web applications by composing reusable widgets. The framework simplifies the process of handling API requests in the front-end through AJAX, enabling efficient data exchange and seamless user interactions.\n\n## Motivation\nWriting code for making responsive web interfaces is often a head-scratching problem. Traditional HTML/CSS/JS approaches can result in complex and hard-to-maintain code. Additionally, handling API requests asynchronously can be cumbersome and error-prone.\n\nThe goal of ButterFlask-UI is to address these challenges and provide a modern solution for building web applications. By adopting a widget-based approach, developers can focus on composing reusable components to create responsive and interactive interfaces. The framework abstracts away the complexities of handling API requests, making it easier to exchange data with the server and create seamless user interactions.\n\n## Key Features\n\n- 🧩 Intuitive widget-based approach for building web interfaces\n- 🌐 Highly responsive design for optimal viewing across different devices\n- 🚀 Effortless handling of API requests\n- 🎨 Simplified widget composition and customization\n- 📦 Easy integration with existing Flask and Django projects\n- 🌈 Increased reusability and readability compared to traditional HTML/CSS/JS\n\nButterFlask-UI empowers developers to rapidly create feature-rich web applications with smooth user experiences. Whether you're building a personal project or a professional web application, ButterFlask-UI offers the flexibility and simplicity you need to bring your ideas to life.\n\n## Installation\n\nYou can install ButterFlask-UI using pip:\n\n```shell\npip install butterflask\n```\n\n## Getting Started\n\n### Flask\n\nTo integrate ButterFlask-UI into your Flask application, follow these steps:\n\n1. Create a new Flask project or open an existing one.\n\n2. In your every HTML template file (ex-`index.html`), include the following code:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cscript src=\"https://code.jquery.com/jquery-3.7.0.min.js\"\u003e\u003c/script\u003e\n    \u003ctitle\u003eMy Web App\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody style=\"margin: 0px; padding: 0%;\"\u003e\n    {{ ui | safe }}\n    \u003cscript\u003e\n        {{ js | safe }}\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n3. In your Flask `app.py` file, import the necessary modules and create a route:\n\n```python\nfrom flask import Flask, render_template\n\n#Import widgets from butterflask\nfrom butterflask.Widgets.Button import Button\nfrom butterflask.widgets.Row import Row\n\napp = Flask(__name__)\n\n@app.route('/')\ndef home():\n    js = [' '] #necessary to add\n\n    #Actual font-end code\n    ui = Row (\n                children=[\n                    Button(\"btn1\"),\n                    Button(\"btn2\"),\n                    Button(\"btn3\")\n                ],\n                horizontal='space-between'\n            ) # Make any hierarchy using widgets\n\n    #render ui, javascript code and send to html code by passing ui and js\n    return render_template('index.html', ui=ui.render(), js='\\n'.join(js))\n\nif __name__ == '__main__':\n    app.run(debug=True)\n```\n\n4. Run your Flask application and navigate to `http://localhost:5000` in your web browser.\n\n### Django\n\nTo integrate ButterFlask-UI into your Django project, follow these steps:\n\n1. Create a new Django project or open an existing one.\n\n2. In your HTML template file (ex-`index.html`), include the following code:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cscript src=\"https://code.jquery.com/jquery-3.7.0.min.js\"\u003e\u003c/script\u003e\n    \u003ctitle\u003eMy Web App\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    {{ ui | safe }}\n    \u003cscript\u003e\n        // Retrieve the CSRF token from cookies\n        function getCookie(name) {\n            var cookieValue = null;\n            if (document.cookie \u0026\u0026 document.cookie !== '') {\n                var cookies = document.cookie.split(';');\n                for (var i = 0; i \u003c cookies.length; i++) {\n                    var cookie = cookies[i].trim();\n                    // Extract the token if found\n                    if (cookie.substring(0, name.length + 1) === (name + '=')) {\n                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));\n                        break;\n                    }\n                }\n            }\n            return cookieValue;\n        }\n\n        // Include the CSRF token in all AJAX requests\n        $(function() {\n            $.ajaxSetup({\n                headers: { 'X-CSRFToken': getCookie('csrftoken') }\n            });\n        });\n        var csrfToken = getCookie('csrftoken');\n        {{ js | safe }}\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n3. In your Django `view.py` file, import the necessary modules and render the template:\n\n```python\nfrom django.shortcuts import render\n\n#Import widgets from butterflask\nfrom butterflask.Widgets.Button import Button\nfrom butterflask.widgets.Row import Row\n\ndef home(request):\n\n    js = [' '] #necessary to add\n\n    #Actual font-end code\n    ui = Row (\n                children=[\n                    Button(\"btn1\"),\n                    Button(\"btn2\"),\n                    Button(\"btn3\")\n                ],\n                horizontal='space-between'\n            ) # Make any hierarchy using widgets\n\n    \n    return render(request, 'index.html', {'ui': ui.render(), 'js': '\\n'.join(js)})\n```\n\n4. Set up the appropriate URL mapping in your `urls.py` file to connect the view to a URL route.\n\n5. Run your Django application and navigate to the appropriate URL in your web browser.\n\n## Documentation\n\nFor detailed documentation and examples, please visit the ButterFlask-UI Documentation. We will shortly make proper easy documentation website.\n\n## Contributing\n\nWe welcome contributions from the open-source community. If you find a bug or have a suggestion for improvement, please open an issue on the [GitHub repository](https://github.com/Shubhgajj2004/ButterFlaskUI).\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](https://github.com/Shubhgajj2004/ButterFlaskUI/blob/main/LICENSE) file for more information.\n\n👉 For more details, examples, and advanced usage, please refer to the [ButterFlask-UI Documentation](https://github.com/your-github-username/your-repo-name). (Shortly release)\n\nEnjoy building beautiful and interactive web applications with ButterFlask-UI! 🚀🌐\n\n[![LinkedIn](https://img.shields.io/badge/Connect%20with%20us%20on-LinkedIn-blue?style=for-the-badge\u0026logo=linkedin)](https://www.linkedin.com/in/shubh-gajjar-1b0a19223/) \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhgajj2004%2Fbutterflaskui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshubhgajj2004%2Fbutterflaskui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhgajj2004%2Fbutterflaskui/lists"}