{"id":15018304,"url":"https://github.com/mycql/yapv","last_synced_at":"2025-10-23T17:31:50.553Z","repository":{"id":44119264,"uuid":"133127551","full_name":"mycql/yapv","owner":"mycql","description":"A library for creating plasmid feature maps with zero external dependencies.","archived":false,"fork":false,"pushed_at":"2022-12-02T20:09:48.000Z","size":1856,"stargazers_count":5,"open_issues_count":19,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-29T21:27:10.057Z","etag":null,"topics":["canvas","dna","molbio","plasmid","svg","synbio","viewer"],"latest_commit_sha":null,"homepage":"https://mycql.github.io/yapv","language":"TypeScript","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/mycql.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}},"created_at":"2018-05-12T08:22:26.000Z","updated_at":"2022-04-05T08:47:05.000Z","dependencies_parsed_at":"2023-01-22T14:00:28.180Z","dependency_job_id":null,"html_url":"https://github.com/mycql/yapv","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mycql%2Fyapv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mycql%2Fyapv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mycql%2Fyapv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mycql%2Fyapv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mycql","download_url":"https://codeload.github.com/mycql/yapv/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237869088,"owners_count":19379265,"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":["canvas","dna","molbio","plasmid","svg","synbio","viewer"],"created_at":"2024-09-24T19:51:48.572Z","updated_at":"2025-10-23T17:31:45.053Z","avatar_url":"https://github.com/mycql.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YAPV\n## **Y**et **A**nother **P**lasmid **V**iewer\n\n[![Build Status](https://travis-ci.com/mycql/yapv.svg?branch=master)](https://travis-ci.com/mycql/yapv)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)\n[![npm version](https://badge.fury.io/js/%40yapv%2Fcore.svg)](https://badge.fury.io/js/%40yapv%2Fcore)\n\n### What is it?\n\nYAPV is a library for building views for plasmid maps with no external dependencies and is framework agnostic. Plasmid maps are a common way to represent [vectors](https://en.wikipedia.org/wiki/Vector_%28molecular_biology%29). You can read more about that [here](https://bitesizebio.com/43119/the-beginners-guide-to-reading-plasmid-maps/) or [here](https://pediaa.com/how-to-read-a-plasmid-map/).\n\nThey usually look like this:\n\n![pacyc184](https://www.bocascientific.com/images/pacyc184.gif \"https://www.bocascientific.com/\")\n![puc19](https://www.bocascientific.com/images/puc19.gif \"https://www.bocascientific.com/\")\n![CAM14_TDNA_PlasmidMap](http://2014.igem.org/wiki/images/thumb/0/09/CAM14_TDNA_PlasmidMap.png/180px-CAM14_TDNA_PlasmidMap.png \"http://2014.igem.org\")\n\n### Getting Started\nYAPV is composed of renderer implementations as modules. You choose which renderer you want to use.\n\n#### With Node and NPM\n```shell\nnpm install @yapv/core\n# and install any of the renderers\nnpm install @yapv/svg\n# OR\nnpm install @yapv/canvas\n```\n```javascript\nimport YAPV from '@yapv/core';\nimport SVG from '@yapv/svg';\nimport Canvas from '@yapv/canvas';\n```\n\n#### Directly off html\nUMD:\n```html\n\u003cscript src=\"https://unpkg.com/@yapv/core@0.2.2/lib/index.umd.js\" /\u003e\n// and use any of the renderers\n\u003cscript src=\"https://unpkg.com/@yapv/svg@0.2.2/lib/index.umd.js\" /\u003e\n// OR\n\u003cscript src=\"https://unpkg.com/@yapv/canvas@0.2.2/lib/index.umd.js\" /\u003e\n```\nES Modules:\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/@yapv/core@0.2.2/lib/index.esm.js\" /\u003e\n// and use any of the renderers\n\u003cscript type=\"module\" src=\"https://unpkg.com/@yapv/svg@0.2.2/lib/index.esm.js\" /\u003e\n// OR\n\u003cscript type=\"module\" src=\"https://unpkg.com/@yapv/canvas@0.2.2/lib/index.esm.js\" /\u003e\n```\n\n#### With Deno\n```javascript\nimport YAPV from \"https://unpkg.com/@yapv/core@0.2.2/lib/index.esm.js\"\nimport SVG from \"https://unpkg.com/@yapv/svg@0.2.2/lib/index.esm.js\"\nimport Canvas from \"https://unpkg.com/@yapv/svg@0.2.2/lib/index.esm.js\"\n```\nFor [deno](https://deno.land), since this is a web project that manipulates the DOM, make sure you let the deno compiler know via tsconfig.json.\n```json\n\"compilerOptions\": {\n  \"lib\": [\"DOM\", \"DOM.Iterable\", \"ES6\"]\n}\n```\n\n### How do I use it? Show me the code!\n```typescript\nconst data = { ... }\nconst workspace = document.querySelector('#workspace');\n// Attaches the viewer to the HTML element with the specified selector\nconst plasmidViewer = YAPV.create(workspace);\n// Use the renderer implementation. Here, we use the SVG based renderer\nplasmidViewer.use(SVG.circular);\n// Draw it!\nplasmidViewer.draw(data);\n// We can swap that out, and draw again!\nplasmidViewer.use(Canvas.circular);\nplasmidViewer.draw(data);\n```\n\nThe 'data' instance is a JS object that conforms to the schema specified [here](./packages/core/src/schema.json). There are several [sample files](./examples/data) you can use as a reference.\n\n\nIf you're familiar with TypeScript, the data and properties are also defined [here](./packages/core/src/models.ts).\n\n### Want to report a bug or request a feature?\nPlease feel free to file an [issue](https://github.com/mycql/yapv/issues). We'll try our best to find time and sort it out. ^_^\n\n### Want to contribute to YAPV?\nWell that's great! Please see our [CONTRIBUTING.md](./CONTRIBUTING.md) to get started with setting up the repo.\n\n### How is this repo structured?\nThe YAPV repo is managed as a [monorepo](https://en.wikipedia.org/wiki/Monorepo) that is composed of several renderer implementation packages.\n\n\n### License\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmycql%2Fyapv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmycql%2Fyapv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmycql%2Fyapv/lists"}