# OneJS

> Build cross-platform apps and games with React 19, powered by Unity's GPU-accelerated rendering.

OneJS is a framework for building GPU-accelerated UIs with React and TypeScript, rendered through Unity's UI Toolkit. Deploy to desktop, mobile, web, consoles, and VR/AR from one codebase.

## Resources

- [Full documentation (plain markdown)](https://onejs.com/llms-full.txt): All docs concatenated for one-shot LLM ingestion
- [Website](https://onejs.com)
- [GitHub](https://github.com/Singtaa/OneJS)
- [Premade themes](https://onejs.com/themes): The Asset Store package adds three complete onejs-ui themes (Pixel, Kawaii, Sketch) and sample cartridges; setup guide at https://onejs.com/docs/onejs-ui/premade-themes

## Getting Started

- [Introduction](https://onejs.com/docs/introduction): Build cross-platform apps and games with React 19, powered by Unity's GPU-accelerated rendering.
- [Quick Start](https://onejs.com/docs/quickstart): Get OneJS running in your Unity project
- [Comparison](https://onejs.com/docs/comparison): How OneJS compares to other cross-platform frameworks.

## Tutorials

- [Nameplates](https://onejs.com/docs/tutorials/nameplates): Drive a 3D scene from JS and pin live nameplates on every character
- [Steam Charts](https://onejs.com/docs/tutorials/steam-charts): A data-driven app UI with fetch, async React state, and vector bar graphs
- [Inventory](https://onejs.com/docs/tutorials/inventory): Drag-and-drop game UI with typed slots, smooth motion, and live theming
- [Theming](https://onejs.com/docs/tutorials/theming): Theme an app end to end with built-in themes, your own brand theme, and the premade cartridge themes

## Core Concepts

- [Architecture](https://onejs.com/docs/core-concepts/architecture): Understanding the OneJS architecture
- [C# Interop](https://onejs.com/docs/core-concepts/csharp-interop): Calling C# code from JavaScript
- [Styling](https://onejs.com/docs/core-concepts/styling): Styling elements with inline styles and USS
- [Events](https://onejs.com/docs/core-concepts/events): Handling user input and UI events
- [Refs & Direct Access](https://onejs.com/docs/core-concepts/refs): Accessing underlying UI Toolkit elements via refs
- [Error Handling](https://onejs.com/docs/core-concepts/error-handling): Catching and handling React errors with ErrorBoundary

## Guides

- [Project Setup](https://onejs.com/docs/guides/project-setup): Configure your OneJS project build system
- [Building & Deployment](https://onejs.com/docs/guides/building): Build and ship your OneJS app to standalone, WebGL, and stripped AOT platforms
- [CSS Modules](https://onejs.com/docs/guides/css-modules): Scoped styling with USS Modules
- [Tailwind CSS](https://onejs.com/docs/guides/tailwind): Using Tailwind utility classes with OneJS
- [Portals](https://onejs.com/docs/guides/portals): Render modals, tooltips, and overlays above the rest of the UI with Portal
- [Asset Loading](https://onejs.com/docs/guides/assets): Load images, fonts, and data files with automatic path resolution
- [Fetch API](https://onejs.com/docs/guides/fetch-api): Making network requests from OneJS
- [WebSocket](https://onejs.com/docs/guides/websocket): Real-time bidirectional communication with servers
- [Web APIs](https://onejs.com/docs/guides/web-apis): Browser-compatible APIs for localStorage, URL, timers, and more
- [npm Libraries](https://onejs.com/docs/guides/npm-libraries): Which npm packages work in OneJS, and how to evaluate and troubleshoot any library

## Advanced

- [C# State Sync](https://onejs.com/docs/guides/state-sync): Syncing C# state to React components with useFrameSync and useEventSync hooks
- [Async C# Methods](https://onejs.com/docs/guides/async-csharp): Calling C# async Task methods from JavaScript with await
- [Custom Elements](https://onejs.com/docs/guides/custom-elements): Register C# VisualElement subclasses as React components
- [Type Generation](https://onejs.com/docs/guides/type-generation): Generate TypeScript declarations for C# types
- [Zero-Allocation Interop](https://onejs.com/docs/guides/zero-alloc): Eliminate GC allocations in per-frame JS-to-C# calls
- [Vector Drawing](https://onejs.com/docs/guides/vector-drawing): GPU-accelerated vector graphics with Unity's Painter2D API
- [Shader Effects](https://onejs.com/docs/guides/shader-effects): Run a shader into an element's background, or compose one from noise and shapes without writing any shader code
- [2D Particles](https://onejs.com/docs/guides/particles): GPU-rendered particle effects inside UI Toolkit elements, simulated in C#
- [GPU Compute](https://onejs.com/docs/guides/gpu-compute): Run compute shaders from JavaScript with a fluent API
- [UI Cartridges](https://onejs.com/docs/guides/cartridges): Package reusable UI components and Unity assets as shareable ScriptableObjects

## onejs-ui

- [Overview](https://onejs.com/docs/onejs-ui/overview): A themeable React component library for OneJS, built for Unity UI Toolkit.
- [Theming](https://onejs.com/docs/onejs-ui/theming): Tokens, custom themes, and instant theme swaps via USS variables.
- [Premade Themes](https://onejs.com/docs/onejs-ui/premade-themes): Install and use the Asset Store themes (Pixel, Kawaii, Sketch) in your own project.
- [Focus & Navigation](https://onejs.com/docs/onejs-ui/focus-and-navigation): The focus-visible model, focus rings, and FocusScope for overlays.
- [Components](https://onejs.com/docs/onejs-ui/components): Usage reference for every onejs-ui component.

## Components

- [View](https://onejs.com/docs/components/view): The fundamental layout container component
- [Label](https://onejs.com/docs/components/label): Text display component
- [Text](https://onejs.com/docs/components/text): Inline text display component
- [Button](https://onejs.com/docs/components/button): Interactive button for user actions
- [TextField](https://onejs.com/docs/components/textfield): Text input component
- [Toggle](https://onejs.com/docs/components/toggle): Boolean toggle switch component
- [Slider](https://onejs.com/docs/components/slider): Range input component
- [ScrollView](https://onejs.com/docs/components/scrollview): Scrollable container component
- [Image](https://onejs.com/docs/components/image): Image display component
- [ListView](https://onejs.com/docs/components/listview): Virtualized list for large datasets
- [TreeView](https://onejs.com/docs/components/treeview): Virtualized tree for hierarchical data
- [FrostedGlass](https://onejs.com/docs/components/frosted-glass): GPU-accelerated backdrop blur effect