{"id":18498473,"url":"https://github.com/xpodev/seamless","last_synced_at":"2025-04-09T00:31:20.180Z","repository":{"id":222123065,"uuid":"756330536","full_name":"xpodev/seamless","owner":"xpodev","description":"A Python package for creating and manipulating HTML components. It works similar to React.js, but in Python.","archived":false,"fork":false,"pushed_at":"2024-11-23T16:40:31.000Z","size":811,"stargazers_count":13,"open_issues_count":6,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-23T19:45:12.676Z","etag":null,"topics":["python","react","seamless"],"latest_commit_sha":null,"homepage":"https://seamless.readthedocs.io","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/xpodev.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":"2024-02-12T13:07:17.000Z","updated_at":"2024-11-23T16:40:33.000Z","dependencies_parsed_at":"2024-02-20T13:29:00.488Z","dependency_job_id":"ac14fa54-b077-45f9-8c72-c3bd583581dc","html_url":"https://github.com/xpodev/seamless","commit_stats":null,"previous_names":["xpodev/jsx","xpodev/pyrl","xpodev/pyv","xpodev/py-jsx","xpodev/seamless"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpodev%2Fseamless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpodev%2Fseamless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpodev%2Fseamless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xpodev%2Fseamless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xpodev","download_url":"https://codeload.github.com/xpodev/seamless/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247949886,"owners_count":21023409,"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":["python","react","seamless"],"created_at":"2024-11-06T13:40:31.666Z","updated_at":"2025-04-09T00:31:20.173Z","avatar_url":"https://github.com/xpodev.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Seamless](https://github.com/xpodev/seamless/blob/main/images/seamless.png?raw=true)\n\n[![PyPI version](https://badge.fury.io/py/python-seamless.svg?)](https://pypi.org/project/python-seamless)\n\n![test](https://github.com/xpodev/pyrl/actions/workflows/python-test.yml/badge.svg)\n\nSeamless is a Python package for creating and manipulating HTML components. It works similar to React.js, but in Python.\n\nWe have detailed documentation [here](https://seamless.readthedocs.io/)\n\n## Installation\n```sh\npip install python-seamless\n```\n\n## Usage\n\n```python\nfrom seamless import Div, H1, P, Component, StyleObject\n\nclass MyComponent(Component):\n  def render(self):\n    root_style = StyleObject(color=\"#33343c\")\n    return Div(style=div_style)(\n      H1(\n        \"Hello, World!\",\n      ),\n      P(\n        \"Welcome to Seamless!\"\n      ),\n    )\n```\n```python\nfrom .components import MyComponent\nfrom seamless.renderer import render\n\n@app.get(\"/\")\ndef hello_world():\n  return render(MyComponent())\n```\n\n### Server actions\nIt's possible to pass a python function as component props.\n\nThe current version works with `ASGIApp`.\n```python\nclass Person(Component):\n  def __init__(self, name: str, age: float):\n    self.age = age\n    self.name = name\n\n  def render(self):\n    return Form(on_submit=self.save_age)(\n      Div(f\"Update the age for {name}\"),\n      Label(html_for=\"age\")(\n        \"Age: \"\n      ),\n      Input(\n        type=\"text\",\n        on_change=self.set_age\n      ),\n      Button(type=\"submit\")(\n        \"Submit Age\"\n      ),\n    )\n\n  def set_age(self, event_data: ChangeEvent):\n    self.age = event_data.value\n\n  def save_age(self, event_data: SubmitEvent):\n    user = get_user()\n    user.age = self.age\n    save(user)\n```\nTo call a function on the server include this script in your file\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@python-seamless/core@0.8.4/umd/seamless.init.js\"\u003e\u003c/script\u003e\n```\nImport the middleware and mount it to your app\n```python\nfrom fastapi import FastAPI\nfrom seamless.middlewares import ASGIMiddleware as SeamlessMiddleware\n\napp = FastAPI()\napp.add_middleware(SeamlessMiddleware)\n```\nYou can pass the following config to the middleware to change the socket path of all seamless endpoints.\n```python\napp.add_middleware(\n  SeamlessMiddleware,\n  socket_path=\"/my/custom/path\"\n)\n```\nActions use [socket.io](https://socket.io) to communicate between server and client.\n\n## TODO\n- [x] Add detailed documentation\n- [ ] Add more tests\n- [ ] Add support for http actions\n\n## Contributing\nFeel free to open an issue or a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxpodev%2Fseamless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxpodev%2Fseamless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxpodev%2Fseamless/lists"}