#Quickstart

StartupJS is a full-stack framework for building real-time, cross-platform apps. It runs on web, iOS, and Android from a single codebase. Data syncs automatically between all connected clients using signals -- reactive pointers to your database.

#Prerequisites

Node.js -- version 22 or higher

brew install node

Yarn (optional but recommended)

If you prefer Yarn over npm, enable Corepack and activate Yarn 4:

corepack enable

If corepack is not available, install it globally first: npm install -g corepack

These commands use Homebrew on macOS. On other operating systems, follow each tool's official installation guide.

You do not need to install MongoDB or Redis for local development. StartupJS uses in-memory mocks by default. For production, see the production setup section below.

#Create a project

#1. Create an Expo app

If using Yarn (recommended):

yarn create expo-app myapp
cd myapp
echo 'nodeLinker: node-modules' > .yarnrc.yml && corepack use yarn@4

If using npm:

npx create-expo-app@latest myapp
cd myapp

#2. Install StartupJS

npm init startupjs@latest

#3. Fix dependency versions (temporary)

Add the following to your package.json to fix a known compatibility issue, then run npm install again:

If using npm:

"overrides": {
  "sharedb-redis-pubsub": {
    ".": "2.0.1",
    "sharedb": "5.2.2"
  }
}

If using Yarn:

"resolutions": {
  "sharedb-redis-pubsub": "2.0.1",
  "sharedb-redis-pubsub/sharedb": "5.2.2"
}

#4. Wrap your root component

Open app/_layout.tsx and wrap your root component with StartupjsProvider:

import { StartupjsProvider } from 'startupjs'

export default function RootLayout () {
  return (
    <StartupjsProvider>
      {/* your existing layout content */}
    </StartupjsProvider>
  )
}

#5. Start the app

yarn start

Or with npm:

npm start

The app opens in your browser. Edit files and save -- the browser updates automatically.

#Production setup

For production, use a real MongoDB and Redis instead of the default mocks:

MONGO_URL=mongodb://... REDIS_URL=redis://... yarn start-production

Build first with yarn build, then run with yarn start-production.

#Why StartupJS?

• Cross-platform -- one codebase for web, iOS, and Android (built on Expo and React Native).
• Real-time sync -- data changes on one client appear instantly on all others.
• Signals -- reactive data pointers that automatically update your UI when data changes.
• Built-in UI library -- a full set of ready-to-use components designed for all platforms.
• Zero setup database -- MongoDB and Redis are mocked locally so you can start building immediately.

#How to use this tutorial

Each chapter builds on the previous one. Type the code yourself rather than copy-pasting -- you will learn faster and notice things you would otherwise miss. Experiment with changes to see what happens.

#Your first component

StartupJS apps are built from components. A component is a reusable piece of UI that bundles markup, styles, and behavior into one unit.

Here is the simplest possible component:

import { observer } from 'startupjs'
import { Span } from 'startupjs-ui'

export default observer(function HelloWorld () {
  return (
    <Span>Hello, world!</Span>
  )
})

Every component that reads reactive data must be wrapped with observer. This tells StartupJS to re-render the component whenever the data it uses changes. You will see this pattern throughout the tutorial.

Continue to the next chapter to build a complete TODO app step by step.