{"id":22882524,"url":"https://github.com/cqcl/pytket-circuit-renderer","last_synced_at":"2025-10-25T00:39:39.858Z","repository":{"id":60847187,"uuid":"493272660","full_name":"CQCL/pytket-circuit-renderer","owner":"CQCL","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-26T11:11:59.000Z","size":5658,"stargazers_count":4,"open_issues_count":3,"forks_count":2,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-05-08T03:06:46.031Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CQCL.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":null,"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":"2022-05-17T13:52:55.000Z","updated_at":"2025-02-18T01:54:59.000Z","dependencies_parsed_at":"2023-11-28T12:24:40.121Z","dependency_job_id":"580c54e8-7d9e-49b7-a774-1f5d64ea1a28","html_url":"https://github.com/CQCL/pytket-circuit-renderer","commit_stats":{"total_commits":123,"total_committers":3,"mean_commits":41.0,"dds":0.06504065040650409,"last_synced_commit":"5d19446fd7e990d691aabc56b507b4ab6e157662"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CQCL%2Fpytket-circuit-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CQCL%2Fpytket-circuit-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CQCL%2Fpytket-circuit-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CQCL%2Fpytket-circuit-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CQCL","download_url":"https://codeload.github.com/CQCL/pytket-circuit-renderer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252989949,"owners_count":21836667,"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":[],"created_at":"2024-12-13T18:18:07.900Z","updated_at":"2025-10-25T00:39:39.783Z","avatar_url":"https://github.com/CQCL.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pytket-circuit-renderer\n\nThis is a Vue 3 component for rendering pytket circuits.\n\n## Installation\nVia package manager:\n```\nnpm install pytket-circuit-renderer\n```\n\nOr include directly in a script tag. Make sure to also load the css.\n```\n\u003cscript type=\"application/javascript\" src=\"https://unpkg.com/pytket-circuit-renderer@latest/dist/pytket-circuit-renderer.umd.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/pytket-circuit-renderer@latest/dist/pytket-circuit-renderer.css\"\u003e\n```\n\n## Usage\nNote that this component depends on Vue 3.\nIf using a package manager, simply import and use as normal:\n```import { circuitDisplayContainer } from \"pytket-circuit-renderer\"```\n\nIf loading the script directly, locate the module as below:\n```const circuitDisplayContainer = window[\"pytket-circuit-renderer\"].default```\n\nYou can then include the circuit display as a component in your vue app:\n```\nconst app = {\n    components: { circuitDisplayContainer },\n    ...\n};\n```\nIf using v0.3.0 or later (or v0.2.1), make sure to also enable a required config option in your vue app before mounting:\n```\napp.config.unwrapInjectedRef = true\n```\n\nThe component will be exposed as `\u003ccircuit-display-component\u003e`.\n\nYou can either render json passed directly via the `circuit-raw` prop:\n```\n\u003ccircuit-display-container :circuit-raw=\"circuitJson\"\u003e\u003c/circuit-display-container\u003e\n```\n\nOr collect it from an element on the page by specifying the query string:\n```\n\u003ccircuit-display-container :circuit-element-str=\"'#circuit-json-to-display'\"\u003e\u003c/circuit-display-container\u003e\n```\n\nYou can supply either a single circuit or a list of circuits. In the case of a list, the circuits will be displayed\nalongside each other. The stacking orientation is controlled by the `viewFormat` prop, \nand can be either `row` (default) or `column`.\n\nNote that the display container includes a choice of rendering options. You can choose to specify \ndefault options when first mounting the component:\n```\n\u003ccircuit-display-container :circuit-raw=\"circuitJson\" :init-render-options=\"{'zxStyle': true, ...}\"\u003e\u003c/circuit-display\u003e\n```\n\nThe render options you can specify are the following:\n- `zxStyle`: Render gates as zx-spiders where applicable.\n- `condenseCBits`: Display classical wires as a single wire.\n- `recursive`: Display nested circuits recursively where possible.\n- `condensed`: Display the circuit on one line only, rather than wrapping around.\n- `darkTheme` : Default to dark mode if not in system theme mode.\n- `systemTheme` : Default to system theme. On by default.\n- `transparentBg`: Display the circuit with a transparent background. \n- `cropParams`: Crop long gate parameters. \n- `interpretMath`: Render math names and parameters via latex.\n \nIt is advised that you also set the theme to avoid clashes.\n\nCheck the example folder for a basic sample app that uses this component.\n\n\n## Development\nTo get started with the project locally, first install the npm dependencies via `npm install`.\n\n### Test\nYou should then be able to run storybook to manually inspect the components via `npm run storybook`.\nAutomated tests via cypress can be run using `npm run test`.\n\n### Build\nTo compile the component library use `npm run parser` then `npm run build-lib`.\nOpening `test\\index.html` gives an example app that uses the locally built circuit renderer.\nNote that you must be serving the local files, for example by first running `serve .` in the project root directory.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcqcl%2Fpytket-circuit-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcqcl%2Fpytket-circuit-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcqcl%2Fpytket-circuit-renderer/lists"}