{"id":31784905,"url":"https://github.com/laruss/react-text-game","last_synced_at":"2026-01-20T17:52:24.903Z","repository":{"id":318683853,"uuid":"1072190291","full_name":"laruss/react-text-game","owner":"laruss","description":"A powerful, reactive text-based game engine built for React applications.","archived":false,"fork":false,"pushed_at":"2025-10-08T15:56:47.000Z","size":374,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-08T17:27:30.876Z","etag":null,"topics":["react","react-text-game","text-game","text-game-engine","twine","typescript","visual-novel","visual-novel-engine"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/laruss.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-08T11:36:25.000Z","updated_at":"2025-10-08T15:56:51.000Z","dependencies_parsed_at":"2025-10-08T17:27:47.746Z","dependency_job_id":"cfd839bd-e7aa-4fa3-9fd4-82e6d5d3d354","html_url":"https://github.com/laruss/react-text-game","commit_stats":null,"previous_names":["laruss/react-text-game"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/laruss/react-text-game","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laruss%2Freact-text-game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laruss%2Freact-text-game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laruss%2Freact-text-game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laruss%2Freact-text-game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laruss","download_url":"https://codeload.github.com/laruss/react-text-game/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laruss%2Freact-text-game/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018716,"owners_count":26086606,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react","react-text-game","text-game","text-game-engine","twine","typescript","visual-novel","visual-novel-engine"],"created_at":"2025-10-10T11:25:26.503Z","updated_at":"2026-01-20T17:52:24.890Z","avatar_url":"https://github.com/laruss.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Text Game\n\n![React Text Game](./apps/docs/static/img/og-image.webp)\n\nA powerful, reactive text-based game engine for React applications. Build interactive narrative experiences with TypeScript, featuring state management, multiple passage types, and a comprehensive save system.\n\n[![@react-text-game/core](https://img.shields.io/npm/v/@react-text-game/core?label=core)](https://www.npmjs.com/package/@react-text-game/core)\n[![@react-text-game/ui](https://img.shields.io/npm/v/@react-text-game/ui?label=ui)](https://www.npmjs.com/package/@react-text-game/ui)\n[![@react-text-game/mdx](https://img.shields.io/npm/v/@react-text-game/mdx?label=mdx)](https://www.npmjs.com/package/@react-text-game/mdx)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## Why React Text Game?\n\nBuilding interactive narrative experiences shouldn't require reinventing the wheel. React Text Game provides a production-ready game engine that handles the complexity of state management, save systems, and UI components—so you can focus on crafting your story.\n\n- **Zero boilerplate** - Start building immediately with factory functions and pre-built components\n- **Production-ready** - Built-in save system with IndexedDB persistence and encrypted exports\n- **Author-friendly** - Write passages in Markdown (MDX) or programmatically with TypeScript\n- **Fully customizable** - Use our UI components or build your own with the core engine\n- **Type-safe** - Catch errors at compile time with comprehensive TypeScript support\n- **Modern React** - Built for React 18+ with hooks and reactive state management\n\nWhether you're building a visual novel, interactive fiction, or educational narrative experience, React Text Game provides the foundation to ship faster.\n\n## Features\n\n- **Reactive State Management** - Built on Valtio for automatic UI updates\n- **Multiple Passage Types** - Story passages, Interactive Maps, and custom Widget passages\n- **Comprehensive Save System** - IndexedDB persistence with encrypted export/import\n- **Audio System** - Full-featured audio management with reactive state, persistence, and global controls\n- **Themeable UI Components** - Tailwind CSS v4 with semantic color tokens\n- **Internationalization** - i18next-powered translations with persistent language switching\n- **Type-Safe** - Full TypeScript support with detailed JSDoc documentation\n- **Factory-Based Entities** - Plain-object factories with optional class-based escape hatches\n- **React Integration** - Built-in hooks and React 19 support\n- **Modular Architecture** - Use core engine independently or with UI components\n\n## Packages\n\nThis monorepo contains three publishable packages:\n\n### [@react-text-game/core](./packages/core)\n\nThe core game engine providing:\n\n- Game orchestration and entity registry\n- Reactive state management (Valtio)\n- JSONPath-based storage system\n- Story and Interactive Map passages\n- Audio system with reactive state and persistence\n- Save/load system with auto-save\n- React hooks for game integration\n\n[Core Package Documentation](./packages/core/README.md)\n\n### [@react-text-game/ui](./packages/ui)\n\nUI components library featuring:\n\n- Pre-built game components (GameProvider, MainMenu, PassageController)\n- Story and Interactive Map renderers\n- Save/Load modals with slot management\n- Tailwind CSS v4 semantic theming\n- Dark mode support\n\n[UI Package Documentation](./packages/ui/README.md)\n\n### [@react-text-game/mdx](./packages/mdx)\n\nMDX integration package enabling:\n\n- Author-friendly Markdown syntax for game passages\n- Seamless React component integration in narratives\n- Type-safe custom components with full TypeScript support\n- Vite plugin for optimized build pipeline\n- Automatic metadata and story structure extraction\n- Runtime-evaluated dynamic variables\n\n[MDX Package Documentation](./packages/mdx/README.md)\n\n## Quick Start\n\n### Installation\n\n```bash\n# Install core and UI packages\nbun add @react-text-game/core @react-text-game/ui\n\n# Optional: Add MDX support for Markdown-based passages\nbun add @react-text-game/mdx @mdx-js/mdx @mdx-js/react\n\n# Or use npm/yarn/pnpm\nnpm install @react-text-game/core @react-text-game/ui\nnpm install @react-text-game/mdx @mdx-js/mdx @mdx-js/react\n```\n\n### Basic Example\n\n```tsx\nimport { Game, createEntity, newStory } from \"@react-text-game/core\";\nimport { GameProvider, PassageController } from \"@react-text-game/ui\";\nimport \"@react-text-game/ui/styles\";\n\n// Initialize the game\nawait Game.init({\n    gameId: \"my-game\",\n    gameName: \"My Adventure\",\n    translations: {\n        defaultLanguage: \"en\",\n        fallbackLanguage: \"en\",\n        resources: {\n            en: {\n                passages: {\n                    intro: \"Welcome to the Game\",\n                },\n            },\n        },\n    },\n});\n\n// Create a game entity (factory-first approach)\nconst player = createEntity(\"player\", {\n    name: \"Hero\",\n    stats: {\n        health: 100,\n        mana: 50,\n    },\n    inventory: [] as string[],\n});\n\n// Create a story passage\nconst intro = newStory(\"intro\", () =\u003e [\n    {\n        type: \"header\",\n        content: \"Welcome to the Game\",\n        props: { level: 1 },\n    },\n    {\n        type: \"text\",\n        content: `Hello, ${player.name}!`,\n    },\n    {\n        type: \"actions\",\n        content: [\n            {\n                label: \"Start Adventure\",\n                action: () =\u003e Game.jumpTo(\"chapter-1\"),\n            },\n        ],\n    },\n]);\n\n// React component\nfunction App() {\n    return (\n        \u003cGameProvider game={Game}\u003e\n            \u003cPassageController /\u003e\n        \u003c/GameProvider\u003e\n    );\n}\n\n// Start the game\nGame.jumpTo(intro);\n```\n\n\u003e Prefer class-based entities? Extend `BaseGameObject` directly—the factory and class APIs work side by side.\n\n## Internationalization\n\nReact Text Game ships with i18next baked into the core engine and the UI package. The `translations` option you pass to `Game.init` accepts the same structure as i18next resources, and the engine automatically persists the player’s language choice in the save database.\n\n- Core exports `useGameTranslation` and `getGameTranslation` so you can localize passages, UI, and game logic.\n- The optional UI package exposes a `LanguageToggle` component and contributes default English strings under the `ui` namespace; your resources override them per language.\n- Supported language codes are derived from your resources, and missing keys fall back to the language you declare in `fallbackLanguage`.\n\n```tsx\nimport { useGameTranslation } from \"@react-text-game/core/i18n\";\nimport { LanguageToggle } from \"@react-text-game/ui\";\n\nfunction StatusBar() {\n    const { t, currentLanguage } = useGameTranslation(\"common\");\n\n    return (\n        \u003cheader className=\"flex items-center gap-4\"\u003e\n            \u003cspan\u003e\n                {t(\"status.currentLanguage\", { language: currentLanguage })}\n            \u003c/span\u003e\n            \u003cLanguageToggle /\u003e\n        \u003c/header\u003e\n    );\n}\n```\n\n## Documentation\n\n- **[Full Documentation](./apps/docs)** - Comprehensive guides and tutorials (Docusaurus site)\n- **[API Reference](./apps/docs/api)** - Auto-generated TypeDoc API documentation\n- **[Example Game](./apps/example-game)** - Complete game implementation example\n\n## Development\n\nThis is a Turborepo monorepo using **Bun** as the package manager.\n\n### Prerequisites\n\n- [Bun](https://bun.sh) 1.2.23 or later\n- Node.js 18 or later\n\n### Setup\n\n```bash\n# Install dependencies\nbun install\n\n# Run all packages in watch mode\nbun run dev\n\n# Build all packages\nbun run build\n\n# Type checking\nbun run check-types\n\n# Linting\nbun run lint\n\n# Code formatting\nbun run format\n```\n\n### Turborepo Filtering\n\nTarget specific packages or apps:\n\n```bash\n# Run dev for specific app\nbun run dev --filter=example-game\n\n# Build only the core package\nbun run build --filter=@react-text-game/core\n\n# Build both packages\nbun run build --filter='@react-text-game/*'\n```\n\n### Repository Structure\n\n```text\nreact-text-game/\n├── packages/\n│   ├── core/          # @react-text-game/core - Game engine\n│   ├── ui/            # @react-text-game/ui - UI components\n│   └── mdx/           # @react-text-game/mdx - MDX integration\n├── apps/\n│   ├── docs/          # Docusaurus documentation site\n│   ├── example-game/  # Example game implementation\n│   ├── core-test-app/ # Core package testing\n│   └── ui-test-app/   # UI components testing\n└── turbo.json         # Turborepo configuration\n```\n\n**Note:** The `apps/` directory contains examples, tests, and documentation. The main deliverables are the packages in `packages/`.\n\n## Contributing\n\nContributions are welcome! To contribute:\n\n1. **Fork the repository** and create a new branch for your feature or bugfix\n2. **Install dependencies** with `bun install`\n3. **Follow existing patterns** - Use factory functions, semantic colors in UI, and TypeScript types\n4. **Test your changes** in the test apps (`apps/core-test-app` or `apps/ui-test-app`)\n5. **Ensure code quality**:\n    - Run `bun run lint` to check for linting issues\n    - Run `bun run check-types` to verify TypeScript types\n    - Run `bun run format` to format code with Prettier\n6. **Create a changeset** if you're modifying a package:\n    - Run `bun run changeset` and follow the prompts\n    - This helps with version management and changelog generation\n7. **Submit a pull request** with a clear description of your changes\n\nPlease ensure all checks pass before submitting your PR. If you're adding new features, consider updating the documentation in `apps/docs`.\n\n## License\n\nMIT (c) [laruss](https://github.com/laruss)\n\n## Links\n\n- **NPM Packages:**\n    - [@react-text-game/core](https://www.npmjs.com/package/@react-text-game/core)\n    - [@react-text-game/ui](https://www.npmjs.com/package/@react-text-game/ui)\n    - [@react-text-game/mdx](https://www.npmjs.com/package/@react-text-game/mdx)\n- **Repository:** [GitHub](https://github.com/laruss/react-text-game)\n- **Issues:** Report bugs and request features on GitHub Issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaruss%2Freact-text-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaruss%2Freact-text-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaruss%2Freact-text-game/lists"}