Skip to content

Build a vanilla app with SkyState

Draft

This tutorial track is not written yet.

Build the same cumulative app as the React track, but use @skystate/core directly instead of React hooks.

Estimated time: 60 minutes.

What you'll build

  • A public welcome value read with client.publicState.get.
  • Hosted sign-in.
  • A counter stored separately for each signed-in user.
  • A notes list for each signed-in user.
  • A settings form backed by a user-state draft.

Prerequisites

Node.js 20 or later (npm ships with it).

Part 1: Read a public value

Planned shape:

  • Scaffold a plain TypeScript app.
  • Install @skystate/core.
  • Create a SkyState project with the CLI.
  • Create a client with createSkyStateClient.
  • Call client.init().
  • Read welcomeText with client.publicState.get('welcomeText', 'Hello!').
  • Push a new public value with sky state public push.

Part 2: Add sign-in and user state

Planned shape:

  • Configure hosted sign-in.
  • Complete the hosted sign-in flow.
  • Read and update a count value through client.userState.
  • Verify that each signed-in user gets their own counter.

Part 3: Save notes for each user

Planned shape:

  • Read notes with client.userState.get.
  • Append and remove notes through user-state writes.
  • Verify that reload keeps the saved notes.

Part 4: Build a settings form

Planned shape:

  • Create a user-state draft handle.
  • Hold edits with draft.set.
  • Save with draft.push().
  • Discard with draft.discard().

Where to go next