{"id":20804965,"url":"https://github.com/lichess-org/pgn-viewer","last_synced_at":"2025-10-24T19:30:09.219Z","repository":{"id":46144232,"uuid":"515095610","full_name":"lichess-org/pgn-viewer","owner":"lichess-org","description":"PGN viewer widget","archived":false,"fork":false,"pushed_at":"2025-05-06T19:40:49.000Z","size":854,"stargazers_count":120,"open_issues_count":8,"forks_count":29,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-12T20:15:31.724Z","etag":null,"topics":["chess","javascript","lichess","pgn","typescript","viewer"],"latest_commit_sha":null,"homepage":"https://lichess.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lichess-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"zenodo":null},"funding":{"custom":"https://lichess.org/patron"}},"created_at":"2022-07-18T08:23:26.000Z","updated_at":"2025-05-09T19:03:39.000Z","dependencies_parsed_at":"2024-10-31T03:02:52.292Z","dependency_job_id":"3cd6bfa1-2c42-42de-a399-7de279015040","html_url":"https://github.com/lichess-org/pgn-viewer","commit_stats":{"total_commits":235,"total_committers":11,"mean_commits":"21.363636363636363","dds":"0.17872340425531918","last_synced_commit":"5fa3a89cd5a35cfef792e27c8d7523a7bd8952d8"},"previous_names":[],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lichess-org%2Fpgn-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lichess-org%2Fpgn-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lichess-org%2Fpgn-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lichess-org%2Fpgn-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lichess-org","download_url":"https://codeload.github.com/lichess-org/pgn-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254544146,"owners_count":22088807,"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":["chess","javascript","lichess","pgn","typescript","viewer"],"created_at":"2024-11-17T19:12:38.469Z","updated_at":"2025-10-24T19:30:09.201Z","avatar_url":"https://github.com/lichess-org.png","language":"TypeScript","funding_links":["https://lichess.org/patron"],"categories":[],"sub_categories":[],"readme":"# Lichess PGN Viewer\n\n[![Continuous Integration](https://github.com/lichess-org/pgn-viewer/actions/workflows/ci.yml/badge.svg)](https://github.com/lichess-org/pgn-viewer/actions/workflows/ci.yml)\n[![npm](https://img.shields.io/npm/v/@lichess-org/pgn-viewer)](https://www.npmjs.com/package/@lichess-org/pgn-viewer)\n\nPGN viewer widget, designed to be embedded in content pages.\n\nThis won't replace a fully featured [analysis board](https://lichess.org/analysis).\n\n![board with move variation tree](https://raw.githubusercontent.com/lichess-org/pgn-viewer/master/screenshot/tree-comment.png)\n\n## See it in action\n\n- [In a forum post](https://lichess.org/forum/game-analysis/strong-fm-showed-me-a-line-which-i-could-use-one-year-later-against-himself-)\n- [In an opening page](https://lichess.org/opening/Caro-Kann_Defense_Advance_Variation)\n- [In a user blog post](https://lichess.org/@/mfeeney88/blog/analysis-paralysis/NmISTSVM)\n- [As a full-screen game embed](https://lichess.org/embed/game/ErSfVbRk)\n\n## License\n\nLichess PGN Viewer is distributed under the **GPL-3.0 license** (or any later version, at your option).\nWhen you use it for your website, your combined work may be distributed only under the GPL.\n**You must release your source code** to the users of your website.\n\nPlease read more about GPL for JavaScript on [greendrake.info](https://greendrake.info/publications/js-gpl).\n\n## Goals\n\n- load and render very fast\n- browse through a game\n- variation tree\n- PGN comments\n- players and clocks\n- mobile support\n- accessible to screen readers with ARIA support\n- translatable and customisable\n- client-side only\n- easy to set up on any page\n\n### Non Goals\n\n- custom user moves\n- engine support\n- opening explorer\n\nFor these features, use an [analysis board](https://lichess.org/analysis) or [Lichess studies](https://lichess.org/study).\n\n## Accessibility\n\nThe viewer is fully accessible to screen reader users with:\n\n- **Complete board representation**: Screen readers can navigate through all 64 squares with piece positions announced\n- **Live move announcements**: Real-time narration of moves including number, color, notation, and annotations\n- **Keyboard navigation**: All controls accessible via keyboard (arrow keys for moves, 'f' to flip board)\n- **ARIA labels and roles**: Comprehensive semantic markup for assistive technologies\n- **Game context**: Players, ratings, result, and timing information properly announced\n\n## Build and run\n\n```\npnpm install\npnpm run demo\n```\n\nThen open the demo page at http://localhost:8080\n\n## Installation\n\n### As an NPM package\n\n```\nnpm i @lichess-org/pgn-viewer\n```\n\n## Usage\n\n```js\nimport LichessPgnViewer from '@lichess-org/pgn-viewer';\n\nconst lpv = LichessPgnViewer(domElement, {\n  pgn: 'e4 c5 Nf3 d6 e5 Nc6 exd6 Qxd6 Nc3 Nf6',\n});\n\n// lpv is an instance of PgnViewer , providing some utilities such as:\nlpv.goTo('first');\nlpv.goTo('next');\nlpv.flip();\nconsole.log(lpv.game);\n// see more in pgnViewer.ts\n```\n\n### Configuration\n\n```js\nconst lpv = LichessPgnViewer(domElement, {\n  pgn: 'e4 c5 Nf3 d6 e5 Nc6 exd6 Qxd6 Nc3 Nf6',\n  // ... more Config\n});\n```\n\nSee [all configuration options in the documented source code](https://github.com/lichess-org/pgn-viewer/blob/master/src/config.ts#L3).\n\nView more examples in `demo/index.html`\n\n## Styles\n\n### SCSS (recommended)\n\nIf you use [SCSS](https://sass-lang.com/), you can import the styles with:\n\n```scss\n@import '../../node_modules/@lichess-org/pgn-viewer/scss/lichess-pgn-viewer.lib';\n```\n\nCustomisable SCSS variables are [available](https://github.com/lichess-org/pgn-viewer/blob/master/scss/_lichess-pgn-viewer.lib.scss), see [how lichess configures pgn-viewer with SCSS](https://github.com/lichess-org/lila/blob/master/ui/common/css/component/_lichess-pgn-viewer.scss).\n\n### CSS\n\nAlternatively you can build a CSS file with\n\n```sh\nnpm run sass-prod\n```\n\nThen copy the `dist/lichess-pgn-viewer.css` file into your project.\n\n## Testing\n\n```bash\npnpm test\n\n## or\n\npnpm test:watch\n```\n\n## Wrappers\n\n- Vue.js: [dragunovartem99/vue-pgn-viewer](https://github.com/dragunovartem99/vue-pgn-viewer)\n\nMore? Please make a pull request to include it here.\n\n## Release procedure\n\n- https://github.com/lichess-org/pgn-viewer/actions/workflows/release.yaml\n- [Run workflow]\n- Branch: master\n- Version tag: vX.Y.Z\n\nThe release workflow will increment the package.json version, create the tag, the github release, and publish to npm\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flichess-org%2Fpgn-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flichess-org%2Fpgn-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flichess-org%2Fpgn-viewer/lists"}