# Start

[play.onejs.com](https://play.onejs.com) runs small carts in the browser. Every one shows you its source and can be forked or opened in Unity.

Carts are written in React and TypeScript against a package called `oj`.

```tsx
import { View, Text, mount, useFrame, input } from "oj"

function Game() {
    useFrame(() => {
        if (input.keyboard.wasKeyPressed("Space")) console.log("jump")
    })
    return <View><Text>hello</Text></View>
}

mount(<Game />)
```

No build configuration and no root plumbing. `mount()` already knows where to render.

## The shortest way in

1. Open a cart: [Tinder](https://play.onejs.com/@singtaa/tinder), for one, and press **Edit code**. Its code opens beside the running cart.
2. Change a number in the code.
3. Press **Run**, the play button above the code.

That needs no account, and nothing you do touches the original. Run builds what is in your tab and plays it; it never saves.

The editor's address names the file you have open, so a reload or a copied link opens on it.

To show a cart or record one, the button beside Run presents it: the code at a size a video can read, the cart beside it, and nothing else. Alt + and Alt − size the code, Alt 1, 2 and 3 change how the screen is split, and Escape comes back. Adding `?present` to the editor's address opens it that way.

## Keeping what you make

Signing in is what lets you keep something: creating a cart, forking one, and saving your work.

**New cart**, the pen beside your name, opens the editor on a starter cart that is already running, under a made-up name like `sleepy-otter`. The pencil beside the name at the top of the editor renames it; the name itself goes to the cart's page. Your typing is kept as you go, where only you see it, and **Push** makes it live: one commit, built, and what everybody plays if it builds. A push that does not compile still lands: the error comes back with the file and line, and what is live does not move. Discard changes, in the Push window, puts the cart back to what is live.

A new cart is **private**. Its Settings, behind the gear beside Push, is the only thing that changes that, and it has two answers, Private and Public. Publishing hands over all of it at once: the page, the source, forking and the Unity download. Forking a public cart gives somebody their own copy with a new id, and yours is untouched.

## Two things worth knowing early

**Your cart is the JavaScript, not the engine.** Unity and the OneJS runtime are one shared container that every cart on the site runs inside, so a cart is a few kilobytes and starts without a download prompt. It also means what you fork is real source.

**Nothing here is thrown away.** `oj` is a subset of OneJS, so everything a cart uses also works in a normal Unity project. When a cart outgrows the browser, [opening it in Unity](/docs/unity) is a `git clone` and one command.

## Work locally

Every cart is a git repository, so you can work on one in your own editor. A new one starts on your machine, with no account:

```bash
npx ojplay new "My Cart"             # the starter in ./my-cart, a git repository
cd my-cart
npm install
npx ojplay run --watch               # the site's container in a local Chrome, swapping in each save
git add -A && git commit -m "First version"
npx ojplay push                      # the first push puts it on the site, private; it asks you to log in once
```

A cart already on the site clones by its address plus `.git` (a public cart needs no login):

```bash
npx ojplay list                      # your carts and their addresses, private ones included
git clone https://play.onejs.com/@<handle>/<name>.git
cd <name>
npx ojplay init && npm install       # types and completions, kept out of git
npx ojplay push                      # builds on the site, and says so if it did not build
```

 [From your own machine](/docs/unity#from-your-own-machine) has the rest: running and testing a cart locally, and what happens when the editor and a push both change it.

## Where to go next

| | |
|---|---|
| [Writing a Cart](/docs/writing-a-cart) | The entry point, the frame loop, the manifest |
| [Elements and Styling](/docs/elements-and-styling) | What you draw with, and the traps in it |
| [The Stage](/docs/stage) | The window your cart gets, and a fixed board inside it |
| [Files](/docs/files) | Sprites, sounds, fonts and covers |
| [Effects](/docs/effects) | Particles, shaders and per pixel programs |
| [Opening in Unity](/docs/unity) | Cloning a cart into Unity, and working on it from your own machine |

Start with [Writing a Cart](/docs/writing-a-cart) if you want to make something, or [Elements and Styling](/docs/elements-and-styling) if you have forked one and want to know what the code in front of you does.