Tinylib
DiscoverDocsSign in
Sign in
Tinylib
AboutDiscoverDocsMake an appPricingTermsPrivacyDeveloper TermsContact

Start

  • Quickstart
  • How Tinylib works

Guides

  • Data
  • Rooms and rules
  • Games
  • Friends
  • Places and links
    • Route between screens
    • Change screens
    • Leave your app
    • Link between screens
    • Share a link to a screen
    • Where users arrive from outside
  • Reminders and notifications
  • Publishing
  • Errors and offline
  • Platforms

Client API

  • tinylib
  • tinylib.data
  • tinylib.rooms
  • tinylib.invitations
  • tinylib.friends
  • tinylib.places
  • tinylib.reminders
  • Types
  • tinylib-sdk/kits

Rules API

  • Kinds
  • ctx

Reference

  • tinylib.json
  • Command line
  • Limits

Plain text

  • llms.txt
  • llms-full.txt

Places and links

tinylib.places names each screen in your app by its address: the page's path without its leading /, plus any query string. At /game/abc?tab=moves, the address is game/abc?tab=moves. The address leaves out any # fragment, and the empty address, '', is your start screen.

Route between screens

Your app runs on its own origin, and Tinylib serves your index.html at every path that isn't one of your published files. A router that uses the browser's History API, such as React Router, works without a basename:

app.jsx
import React from 'react' import { createRoot } from 'react-dom/client' import { createBrowserRouter, RouterProvider } from 'react-router' import { Game, Start } from './screens.jsx' const router = createBrowserRouter([ { path: '/', element: <Start /> }, { path: '/game/:id', element: <Game /> }, ]) createRoot(document.querySelector('#root')).render(<RouterProvider router={router} />)

Without a router, read tinylib.places.address when your page starts, and again each time it changes:

JavaScript
function showPlace() { const [path, query] = tinylib.places.address.split('?') const [screen, id] = path.split('/') if (screen === 'game' && id) return showGame(id) if (screen === 'settings') return showSettings(new URLSearchParams(query)) showStart() } tinylib.places.onChange(showPlace) showPlace()

onChange runs after every change of address, including the ones Tinylib makes. When the user accepts an invitation while your app is open, Tinylib takes them to the room's address and onChange runs. For a game with a list of games and one game screen, route in tinylib-sdk/kits does this routing for you.

Change screens

tinylib.places.go changes screens without loading a new page:

JavaScript
tinylib.places.go(`game/${id}`) tinylib.places.go('', { replace: true })

After a tap, back returns the user to the screen they left. A move with no tap, such as a redirect from a screen your app refuses, takes the current screen's place, so back never returns to a screen that would only send them away again. replace does the same after a tap.

A move to your start screen goes back to it when it's beneath, and otherwise takes the current screen's place.

go throws a TypeError for an address that starts with /.

Leave your app

Back leaves your app from the screen it opened at. To offer a way out from any screen, draw your own button and call tinylib.places.exit from its tap, which takes the user to their Library. It rejects with refused with no tap, or while one of Tinylib's sheets is open:

JavaScript
exitButton.onclick = () => tinylib.places.exit()

Link between screens

A link to a path in your app changes screens as go does. A link to another site opens in a new tab on the web, and in the phone's browser in Tinylib's Android app.

HTML
<a href="/settings">Settings</a> <a href="/game/abc?tab=moves">Back to the game</a> <a href="https://en.wikipedia.org/wiki/Tic-tac-toe">The rules of tic-tac-toe</a>

Share a link to a screen

tinylib.places.share opens the device's share sheet with a link to a screen, or Tinylib's own sheet where the device has none:

JavaScript
await tinylib.places.share(`list/${id}`, 'Our shopping list')

The link is your app's slug and the address, such as https://tinylib.app/groceries/list/abc. Anyone can open it, with or without a Tinylib account. The first time, the user taps Open: a user new to Tinylib gives their name there, and an app that uses friends says so there.

A shared link doesn't let anyone into a room, because a room shows only to its members. To add someone, invite them with tinylib.rooms.invite or share the room's link from tinylib.rooms.getLink.

Where users arrive from outside

Tinylib opens your app at an address when the user:

  • taps a reminder: the reminder's address
  • taps a room's notification, picks a room in Tinylib's lists of rooms, or joins a room by an invitation or its link: the address of the room's kind
  • opens a link to your app: the address in the link

Each kind's address in your rules sets where its rooms open, with :id replaced by the room's id:

rules.js
export const game = { address: 'game/:id', // ... }

:id can go anywhere in the address, for example '?list=:id'. A kind with no address opens your start screen, and your app can't tell which room the user came for.

PreviousFriendsNextReminders and notifications

On this page

  • Route between screens
  • Change screens
  • Leave your app
  • Link between screens
  • Share a link to a screen
  • Where users arrive from outside