{"id":24869393,"url":"https://github.com/biocomputingup/proseqviewer","last_synced_at":"2025-06-24T07:08:14.830Z","repository":{"id":65476001,"uuid":"321346977","full_name":"BioComputingUP/ProSeqViewer","owner":"BioComputingUP","description":"Visualize sequence and multiple sequence alignment (MSA)","archived":false,"fork":false,"pushed_at":"2022-05-30T15:25:35.000Z","size":2244,"stargazers_count":15,"open_issues_count":2,"forks_count":3,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-06-23T08:07:24.916Z","etag":null,"topics":["bioinformatics","javascript","sequence-viewer","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BioComputingUP.png","metadata":{"files":{"readme":"README.md","changelog":"changelog","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-14T12:53:39.000Z","updated_at":"2025-05-22T05:29:03.000Z","dependencies_parsed_at":"2023-01-25T06:15:30.613Z","dependency_job_id":null,"html_url":"https://github.com/BioComputingUP/ProSeqViewer","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/BioComputingUP/ProSeqViewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioComputingUP%2FProSeqViewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioComputingUP%2FProSeqViewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioComputingUP%2FProSeqViewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioComputingUP%2FProSeqViewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BioComputingUP","download_url":"https://codeload.github.com/BioComputingUP/ProSeqViewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioComputingUP%2FProSeqViewer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261624959,"owners_count":23186118,"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":["bioinformatics","javascript","sequence-viewer","typescript"],"created_at":"2025-02-01T03:22:56.621Z","updated_at":"2025-06-24T07:08:14.803Z","avatar_url":"https://github.com/BioComputingUP.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# ProSeqViewer\n\nProSeqViewer is a [TypeScript](https://www.typescriptlang.org/) library to visualize annotation\non single sequences and multiple sequence alignments.\n\n![ProSeqViewer](figure.png?raw=true \"ProSeqViewer\")\n\n\nProSeqViewer can be integrated in both modern and dynamic frameworks like [Angular](https://angular.io/)\nas well as in static HTML websites. It is used by [MobiDB](http://mobidb.bio.unipd.it/),\n[DisProt](http://www.disprot.org/), [RepeatsDB](http://repeatsdb.bio.unipd.it/)\n\n### ProSeqViewer features\n\n* Generates pure HTML, compatible with any browser and operating system\n* Easy to install\n* Lightweight\n* Zero dependencies\n* Fast, able to render large alignments\n* Interactive, capture mouse selections and clicks\n* Responsive, dynamically adapt to window changes\n\n## Links\n* [ProSeqViewer library GitHub repository](https://github.com/BioComputingUP/ProSeqViewer)\n* [Documentation website](https://biocomputingup.github.io/ProSeqViewer-documentation/)\n* [NPM package](https://www.npmjs.com/package/proseqviewer)\n\n## Getting started\n\n### JavaScript installation\n\nImport the JavaScript bundle and CSS from local files\n```html\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"sqv.css\"\u003e\n    \u003cscript src=\"sqv-bundle.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nAlternatively, import from GitHub\n```html\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://rawgithub.com/BioComputingUP/ProSeqViewer/master/dist/assets/proseqviewer.css\"\u003e\n    \u003cscript src=\"https://rawgithub.com/BioComputingUP/ProSeqViewer/master/dist/sqv-bundle.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nAdd component\n```html\n\u003cbody\u003e\n    \u003cdiv id=\"psv\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n```\n\nCreate an instance\n```html\n\u003chead\u003e\n    \u003c!--Put this block at the end of your head section--\u003e\n    \u003cscript\u003e\n        const sequences = [\n            {sequence: 'TLRAIENFYISNNKISDIPEFVR', id: 1, label: 'ASPA_ECOLI/13-156'},\n            {sequence: 'TLRASENFPITGYKIHEE..MIN', id: 2, label: 'ASPA_BACSU/16-156'},\n            {sequence: 'GTKFPRRIIWS............', id: 3, label: 'FUMC_SACS2/1-124'}\n        ]\n\n        // Input icons\n        const icons = [\n            {sequenceId: 1, start: 2, end: 2, icon: 'lollipop'},\n            {sequenceId: 1, start: 13, end: 13, icon: 'lollipop'}\n        ]\n\n        // Options and configuration\n        const options = {\n            chunkSize: 0, \n            sequenceColor: 'clustal', \n            lateralIndexes: false\n        };\n\n        // Initialize the viewer\n        const psv = new ProSeqViewer('psv');\n\n        // Generate the HTML\n        psv.draw({sequences, options, icons});\n    \u003c/script\u003e\n\u003c/head\u003e\n```\n\n### Angular installation\n\nInstall ProSeqViewer from npm\n```\nnpm install proseqviewer\n```\n\nAdd ProSeqViewer CSS to your angular.json file\n```json\n{\n  styles: [\"./node_modules/proseqviewer/dist/assets/proseqviewer.css\"]\n}\n```\n\nImport in your component\n```typescript\nimport {ProSeqViewer} from 'proseqviewer/dist';\n```\n\nAdd component to your page\n```html\n \u003cdiv id=\"psv\"\u003e\u003c/div\u003e\n```\n\nCreate an instance in your component\n```typescript\n// Input sequences\nconst sequences = [\n    {sequence: 'TLRAIENFYISNNKISDIPEFVR', id: 1, label: 'ASPA_ECOLI/13-156'},\n    {sequence: 'TLRASENFPITGYKIHEE..MIN', id: 2, label: 'ASPA_BACSU/16-156'},\n    {sequence: 'GTKFPRRIIWS............', id: 3, label: 'FUMC_SACS2/1-124'}\n]\n\n// Input icons\nconst icons = [\n    {sequenceId: 1, start: 2, end: 2, icon: 'lollipop'},\n    {sequenceId: 1, start: 13, end: 13, icon: 'lollipop'}\n]\n\n// Options and configuration\nconst options = {\n    chunkSize: 0, \n    sequenceColor: 'clustal', \n    lateralIndexes: false\n};\n\n// Initialize the viewer\nconst psv = new ProSeqViewer('psv');\n\n// Generate the HTML\npsv.draw({sequences, options, icons});\n\n```\n\n## Developers\nIf you are a developer you can update the GitHub and NPM repo with these commands\n```bash\nnvm use\nnpm install\nnpm run buildall\nnpm publish\n```\n\n\n## License\n\nThis program is free software; you can redistribute it and/or modify it under the terms of the CC-BY\nLicense as published by the Creative Commons.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiocomputingup%2Fproseqviewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiocomputingup%2Fproseqviewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiocomputingup%2Fproseqviewer/lists"}