{"id":42005623,"url":"https://github.com/pip-install-python/dash_excalidraw","last_synced_at":"2026-01-26T01:38:09.895Z","repository":{"id":265789142,"uuid":"881739456","full_name":"pip-install-python/dash_excalidraw","owner":"pip-install-python","description":"Freeform, notes, drawing component for dash","archived":false,"fork":false,"pushed_at":"2025-01-02T17:45:06.000Z","size":1088,"stargazers_count":6,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-11T21:35:52.109Z","etag":null,"topics":["dash","draw","excalidraw","notebook","plotly","tools","whiteboard"],"latest_commit_sha":null,"homepage":"https://pip-install-python.com/pip/dash_excalidraw","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pip-install-python.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-01T05:56:17.000Z","updated_at":"2025-09-18T18:27:21.000Z","dependencies_parsed_at":"2024-12-01T17:19:43.036Z","dependency_job_id":null,"html_url":"https://github.com/pip-install-python/dash_excalidraw","commit_stats":null,"previous_names":["pip-install-python/dash_excalidraw"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pip-install-python/dash_excalidraw","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pip-install-python%2Fdash_excalidraw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pip-install-python%2Fdash_excalidraw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pip-install-python%2Fdash_excalidraw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pip-install-python%2Fdash_excalidraw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pip-install-python","download_url":"https://codeload.github.com/pip-install-python/dash_excalidraw/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pip-install-python%2Fdash_excalidraw/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28764157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T00:37:26.264Z","status":"ssl_error","status_checked_at":"2026-01-26T00:37:25.959Z","response_time":113,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dash","draw","excalidraw","notebook","plotly","tools","whiteboard"],"created_at":"2026-01-26T01:38:09.043Z","updated_at":"2026-01-26T01:38:09.890Z","avatar_url":"https://github.com/pip-install-python.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dash Excalidraw\n\n[![PyPI version](https://badge.fury.io/py/dash-excalidraw.svg)](https://badge.fury.io/py/dash-excalidraw)\n[![Downloads](https://pepy.tech/badge/dash-excalidraw)](https://pepy.tech/project/dash-excalidraw)\n\nA Dash component that wraps the powerful Excalidraw drawing and diagramming tool, providing a customizable canvas for creating beautiful hand-drawn like diagrams, wireframes, and sketches directly in your Dash applications.\n\n## Docs\nhttps://pip-install-python.com/pip/dash_excalidraw\n\n## Full Tutorial Video on YouTube\n\n[![Dash Excalidraw Demo](assets/how_to_create_custom_components_thumbnail.jpg)](https://www.youtube.com/watch?v=qh4Lg1X_k1A\u0026t)\n\n## Features\n\nThe Dash Excalidraw component inherits all the powerful features of the Excalidraw editor:\n\n- Free \u0026 open-source\n- Infinite, canvas-based whiteboard\n- Hand-drawn like style\n- Dark mode support\n- Highly customizable\n- Image support\n- Shape libraries support\n- Localization (i18n) support\n- Export to PNG, SVG \u0026 clipboard\n- Open format - export drawings as `.excalidraw` JSON file\n- Rich toolset - rectangle, circle, diamond, arrow, line, free-draw, eraser \u0026 more\n- Arrow-binding \u0026 labeled arrows\n- Undo / Redo support\n- Zoom and panning support\n- And many more...\n\n## Installation\n\n```bash\npip install dash-excalidraw==0.0.4\n```\n\n## Quick Start\n\nHere's a simple example to get you started:\n\n```python\nimport dash_excalidraw\nfrom dash import Dash, html\nimport dash_mantine_components as dmc\n\napp = Dash(__name__)\n\napp.layout = dmc.MantineProvider([\n    dmc.Container([\n        dmc.Title(\"Dash Excalidraw Demo\", order=1),\n        dash_excalidraw.DashExcalidraw(\n            id='excalidraw',\n            width='100%',\n            height='600px',\n            initialData={\"elements\": [], \"appState\": {}},\n            theme=\"light\"\n        )\n    ])\n])\n\nif __name__ == '__main__':\n    app.run_server(debug=True)\n```\n\n## Props \u0026 Options\n\n| Option | Default | Type | Description |\n|--------|---------|------|-------------|\n| `id` | `None` | string | The ID used to identify this component in Dash callbacks |\n| `width` | `'100%'` | string | The width of the Excalidraw component |\n| `height` | `'400px'` | string | The height of the Excalidraw component |\n| `initialData` | `{ elements: [], appState: {} }` | object | Initial data to load into the component |\n| `theme` | `'light'` | `'light'` \\| `'dark'` | The theme of the component |\n| `viewModeEnabled` | `false` | boolean | Enables view-only mode |\n| `zenModeEnabled` | `false` | boolean | Enables zen mode |\n| `gridModeEnabled` | `false` | boolean | Enables grid mode |\n| `isCollaborating` | `false` | boolean | Indicates if the component is in collaboration mode |\n\n[View full props documentation](#props-documentation)\n\n## Callback Example\n\n```python\nfrom dash import callback, Input, Output\nimport json\n\n@callback(\n    Output('output', 'children'),\n    Input('excalidraw', 'serializedData'),\n)\ndef display_output(serializedData):\n    if not serializedData:\n        return 'No elements drawn yet'\n    \n    data = json.loads(serializedData)\n    return f'Number of elements: {len(data[\"elements\"])}'\n```\n\n## Props Documentation\n\n### Core Props\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `id` | string | None | Component identifier |\n| `width` | string | '100%' | Component width |\n| `height` | string | '400px' | Component height |\n| `initialData` | object | `{ elements: [], appState: {} }` | Initial scene data |\n| `elements` | array | `[]` | Current scene elements |\n| `appState` | object | `{}` | Application state |\n| `files` | object | `{}` | Associated files |\n| `serializedData` | string | `''` | Serialized scene data |\n\n\u003c/details\u003e\n\n### Interactive Features\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `excalidrawAPI` | function | null | Access Excalidraw API |\n| `onPointerUpdate` | function | null | Pointer update callback |\n| `onPointerDown` | function | null | Pointer down callback |\n| `onScrollChange` | function | null | Scroll change callback |\n| `onPaste` | function | null | Paste event callback |\n| `onLibraryChange` | function | null | Library change callback |\n| `onLinkOpen` | function | null | Link open callback |\n\n\u003c/details\u003e\n\n### UI Customization\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to expand\u003c/summary\u003e\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `theme` | string | 'light' | UI theme |\n| `langCode` | string | 'en' | Localization code |\n| `renderTopRightUI` | function | null | Custom top-right UI |\n| `renderCustomStats` | function | null | Custom stats display |\n| `UIOptions` | object | `{}` | UI customization options |\n\n\u003c/details\u003e\n\n## Advanced Example\n\n```python\nimport dash_excalidraw\nfrom dash import Dash, html, callback, Input, Output\nimport dash_mantine_components as dmc\nimport json\n\napp = Dash(__name__)\n\napp.layout = dmc.MantineProvider([\n    dmc.Container([\n        dmc.Title(\"Dash Excalidraw Demo\", order=1, align=\"center\", mb=\"lg\"),\n        dash_excalidraw.DashExcalidraw(\n            id='excalidraw',\n            width='100%',\n            height='600px',\n            initialData={\n                \"elements\": [], \n                \"appState\": {\n                    \"viewBackgroundColor\": \"#ffffff\",\n                    \"gridSize\": 20\n                }\n            },\n            theme=\"light\",\n            viewModeEnabled=False,\n            zenModeEnabled=False,\n            gridModeEnabled=True\n        ),\n        html.Div(id='output')\n    ], size=\"xl\", pt=\"md\")\n], withGlobalStyles=True)\n\n@callback(\n    Output('output', 'children'),\n    Input('excalidraw', 'serializedData')\n)\ndef display_output(serializedData):\n    if not serializedData:\n        return 'No elements drawn yet'\n    \n    data = json.loads(serializedData)\n    return f'Number of elements: {len(data[\"elements\"])}'\n\nif __name__ == '__main__':\n    app.run_server(debug=True)\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Acknowledgments\n\n- Built on top of the amazing [Excalidraw](https://github.com/excalidraw/excalidraw) library\n- Developed for use with [Plotly Dash](https://dash.plotly.com/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpip-install-python%2Fdash_excalidraw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpip-install-python%2Fdash_excalidraw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpip-install-python%2Fdash_excalidraw/lists"}