DevelopersQuickstart

Quick start

Get up and running with PWFabric in under 5 minutes.

Prerequisites

  • Node.js 22.0 or later
  • pnpm 10+ (the PWFabric SDK is pnpm-only — npm and yarn are not supported)
  • A PhiWebs account at account.phiwebs.com/signup — you’ll need a worldId and an API token from World settings → Developers.
  • Basic TypeScript or JavaScript

1. Install the SDK

pnpm add @phimajor-solutions/pwfabric-sdk

2. Create a client

createClient() returns a fully-typed PWFabricClient. Configure it with your World’s API base URL and the bearer token you minted in World settings.

import { createClient } from '@phimajor-solutions/pwfabric-sdk'
 
const client = createClient({
  baseUrl: process.env.PWFABRIC_BASE_URL ?? 'https://api.phiwebs.com',
  token: process.env.PWFABRIC_TOKEN,
})

All client methods return a discriminated-union result ({ ok: true, data } | { ok: false, error }) so you pattern-match instead of try/catch.

3. Create your first Surface

client.surfaces.create() mints a new draft Surface inside your World. The blocks below all come from the first-party block catalog — container, heading, text, button, grid. (See the blocks reference for the full block list.)

const result = await client.surfaces.create({
  name: 'My Landing Page',
  slug: 'landing',
  blocks: [
    {
      type: 'container',
      props: { maxWidth: 'lg', padding: 'lg' },
      children: [
        { type: 'heading', props: { content: 'Welcome to PWFabric', level: 1, align: 'center' } },
        { type: 'text', props: { content: 'Build beautiful Surfaces in minutes.', align: 'center', color: 'muted' } },
        { type: 'button', props: { label: 'Get started', href: '/developers/quickstart', variant: 'primary' } },
      ],
    },
    {
      type: 'grid',
      props: { columns: 3, gap: 'md' },
      children: [
        { type: 'text', props: { content: 'Fast — build in minutes' } },
        { type: 'text', props: { content: 'Flexible — customise everything' } },
        { type: 'text', props: { content: 'Composable — 47 block types' } },
      ],
    },
  ],
})
 
if (!result.ok) {
  throw new Error(`Surface create failed: ${result.error.message}`)
}
 
const surface = result.data

4. Render the Surface

The renderer lives in @phimajor-solutions/pwfabric-runtime, not the SDK package. Inside PhiWebs-hosted pages, the block components your World has installed are provided to the renderer for you. Outside the platform, pass your own implementations through the components prop:

import { SurfaceRenderer } from '@phimajor-solutions/pwfabric-runtime'
 
function Page() {
  return <SurfaceRenderer surface={surface} components={myComponents} />
}

Next steps

OverviewOverview