{"id":14961344,"url":"https://github.com/utilfirst/react-visual-novel","last_synced_at":"2025-03-28T13:34:07.945Z","repository":{"id":61737765,"uuid":"554214836","full_name":"utilfirst/react-visual-novel","owner":"utilfirst","description":"React library for building web-based visual novels","archived":false,"fork":false,"pushed_at":"2022-10-28T05:55:57.000Z","size":219,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-21T10:50:45.857Z","etag":null,"topics":["framer-motion","react","tailwindcss","typescript","visual-novel"],"latest_commit_sha":null,"homepage":"https://heritage-novel.com/play","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/utilfirst.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2022-10-19T12:47:49.000Z","updated_at":"2025-02-12T19:27:09.000Z","dependencies_parsed_at":"2023-01-20T17:47:16.129Z","dependency_job_id":null,"html_url":"https://github.com/utilfirst/react-visual-novel","commit_stats":null,"previous_names":["utility-first/react-visual-novel"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utilfirst%2Freact-visual-novel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utilfirst%2Freact-visual-novel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utilfirst%2Freact-visual-novel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utilfirst%2Freact-visual-novel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/utilfirst","download_url":"https://codeload.github.com/utilfirst/react-visual-novel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245999622,"owners_count":20707574,"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":["framer-motion","react","tailwindcss","typescript","visual-novel"],"created_at":"2024-09-24T13:24:51.347Z","updated_at":"2025-03-28T13:34:05.296Z","avatar_url":"https://github.com/utilfirst.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-visual-novel\n\n[![Latest release](https://img.shields.io/npm/v/react-visual-novel.svg)](https://www.npmjs.org/package/react-visual-novel)\n[![License](https://img.shields.io/npm/l/react-visual-novel.svg)](https://www.npmjs.org/package/react-visual-novel)\n\nBuild visual novels using web technologies. Powered by [React](https://reactjs.org/), [Tailwind CSS](https://tailwindcss.com/), [Framer Motion](https://www.framer.com/motion/), and [howler.js](https://github.com/goldfire/howler.js).\n\n## Installation\n\nThis package requires some peer dependencies, which you need to install by yourself.\n\n```shell\nnpm install react-visual-novel howler use-query-params\n```\n\n## Quickstart\n\nThis is only a very basic usage example of `react-visual-novel`. To see everything that is possible with the library, please refer to a [production demo](https://github.com/yenbekbay/archcode-heritage-novel).\n\n```tsx\nimport * as assets from 'assets'\nimport {bgSolidJpg} from 'assets'\nimport {Branch, Game, prepareBranches, Say, Scene} from 'react-visual-novel'\nimport 'react-visual-novel/dist/index.css'\n\nfunction BranchIntro() {\n  return (\n    \u003cBranch\u003e\n      \u003cScene src={bgSolidJpg.src} /\u003e\n      \u003cSay\u003eWelcome to react-visual-novel!\u003c/Say\u003e\n    \u003c/Branch\u003e\n  )\n}\n\nconst branches = prepareBranches({BranchIntro})\n\ntype MyBranches = typeof branches\ndeclare module 'react-visual-novel' {\n  interface Branches extends MyBranches {}\n}\n\nexport default function MyGame() {\n  return (\n    \u003cdiv style={{display: 'flex', width: '100vw', height: '100vh'}}\u003e\n      \u003cGame assets={assets} branches={branches} initialBranchId=\"Intro\" /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## Development\n\nBefore you can start developing, please make sure that you have pnpm installed (`npm install -g pnpm`). Then install the dependencies using pnpm: `pnpm install`.\n\nFor local development, you can use `pnpm dev`.\n\n## License\n\n[MIT License](./LICENSE) © Utility First\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futilfirst%2Freact-visual-novel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Futilfirst%2Freact-visual-novel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futilfirst%2Freact-visual-novel/lists"}