{"id":19243025,"url":"https://github.com/nteract/vdom","last_synced_at":"2025-04-04T21:07:43.288Z","repository":{"id":47322923,"uuid":"101915990","full_name":"nteract/vdom","owner":"nteract","description":"🎄 Virtual DOM for Python","archived":false,"fork":false,"pushed_at":"2023-03-25T23:44:20.000Z","size":184,"stargazers_count":223,"open_issues_count":17,"forks_count":35,"subscribers_count":40,"default_branch":"main","last_synced_at":"2025-03-28T20:06:31.761Z","etag":null,"topics":["declarative","python","specification","vdom"],"latest_commit_sha":null,"homepage":"https://github.com/nteract/vdom/blob/master/docs/mimetype-spec.md","language":"Jupyter Notebook","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nteract.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2017-08-30T18:31:57.000Z","updated_at":"2025-03-13T06:04:13.000Z","dependencies_parsed_at":"2022-09-06T18:01:03.208Z","dependency_job_id":"ca119479-e9d0-46ca-aa41-91bff148da36","html_url":"https://github.com/nteract/vdom","commit_stats":{"total_commits":150,"total_committers":17,"mean_commits":8.823529411764707,"dds":0.6599999999999999,"last_synced_commit":"2ca77390e996b18eaf9bdb012f50223108fc8b40"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nteract%2Fvdom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nteract%2Fvdom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nteract%2Fvdom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nteract%2Fvdom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nteract","download_url":"https://codeload.github.com/nteract/vdom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249524,"owners_count":20908212,"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":["declarative","python","specification","vdom"],"created_at":"2024-11-09T17:16:25.269Z","updated_at":"2025-04-04T21:07:43.265Z","avatar_url":"https://github.com/nteract.png","language":"Jupyter Notebook","funding_links":[],"categories":["Jupyter Notebook"],"sub_categories":[],"readme":"# [VDOM](https://github.com/nteract/vdom)\n\n[![Code style: black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/ambv/black)\n\n## Why use VDOM\n\n- Write **Declarative** Pythonic layouts.\n- Create headings, prose, images, and more common user interface items with user-friendly declarative statements.\n- Render the layout in _Jupyter_ frontends, such as **nteract** and JupyterLab.\n- Serialize the layout for rehydration and later use in your web app.\n\n---\n\n## Check out the power of VDOM\n\nCreate layouts by writing and running Python code. Let's see an example\nbelow to create and display a heading, styled prose, and a GIF:\n\n```python\nfrom IPython.display import display\nfrom vdom.helpers import h1, p, img, div, b\n\ndisplay(\n    div(\n        h1('Our Incredibly Declarative Example'),\n        p('Can you believe we wrote this ', b('in Python'), '?'),\n        img(src=\"https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif\"),\n        p('What will ', b('you'), ' create next?'),\n    )\n)\n```\n\n**Voila!**\n\nYour example created a layout and served it below:\n\n# Now Incredibly Declarative\n\nCan you believe we wrote this **in Python**?\n\n![](https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif)\n\nWhat will **you** create next?\n\n---\n\n## Getting started\n\n### Install the Python package\n\n```bash\npip install vdom\n```\n\n### Usage\n\nFirst, import `vdom.helpers` for headings, text, and images:\n\n```python\nfrom vdom.helpers import h1, p, img, div, b\n```\n\nCreate a layout using the VDOM helpers in Python code. Here's an example code\nlayout block:\n\n```python\nmy_pretty_layout = div(\n    h1('Our Incredibly Declarative Example'),\n    p('Can you believe we wrote this ', b('in Python'), '?'),\n    img(src=\"https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif\"),\n    p('What will ', b('you'), ' create next?'),\n)\n```\n\nTo display the layout, use IPython's display method:\n\n```python\nfrom IPython.display import display\n\n\ndisplay(my_pretty_layout)\n```\n\nThe full example, including rendered output, is found [above](#check-out-the-power-of-vdom).\n\n## Documentation\n\n- [Design Patterns](./docs/design-patterns.md)\n- [Specification - VDOM Media Type](./docs/mimetype-spec.md)\n- [Specification - VDOM Event Support](./docs/event-spec.md)\n\n## Contribute to VDOM\n\n### Developer install from source code\n\n```bash\ngit clone https://github.com/nteract/vdom\ncd vdom\npip install -e .\n```\n\n### Contributing Guidelines and Releases\n\nWe follow these [Contributing Guidelines](CONTRIBUTING.md).\n\nFor contributors helping with creating releases, the [RELEASING.md] document\noutlines the process.\n\n## Find out more about nteract\n\nTake a look at the [nteract website](https://nteract.io) to see other projects\nthat we are working on.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnteract%2Fvdom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnteract%2Fvdom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnteract%2Fvdom/lists"}