@pwfabric/authoring

What you write a pwpack with: defineBlock(), defineFactory() and defineCapability(), plus the block registry and prop validation. A block's props are inferred from its zod schema. It re-exports @pwfabric/runtime.

Install

pnpm add @pwfabric/authoring @pwfabric/runtime @pwfabric/contracts zod@3 react react-dom
pnpm add -D typescript @types/react

ESM only: import it from an ES module ("type": "module" or .mjs). Node 22+. Peer: react 19.

import { defineBlock } from '@pwfabric/authoring'
import { z } from 'zod'

export const Quote = defineBlock({
  type: 'customer-quote',
  name: 'Customer quote',
  schema: z.object({ quote: z.string(), author: z.string() }),
  defaultProps: { quote: 'A great product to work with.', author: 'Jane Doe' },
  component: ({ props }) => <blockquote>{props.quote} — {props.author}</blockquote>,
})

Main exports

| Export | What it is | |--------|------------| | defineBlock, validateBlockDefinition, createBlockInstance, isCustomBlockDefinition | Blocks — see defineBlock() | | defineFactory, composeFactoryOutputs, wrapInContainer | Factories — see defineFactory() | | defineCapability, CapabilityBuilder | Capabilities — see defineCapability() | | CustomBlockRegistry, createCustomBlockRegistry, mergeRegistries | Block registries | | validateProps, validateBlock, validateBlockTree, formatValidationErrors | Validation | | CustomBlockOptions, SchemaProps, CustomBlockDefinition, InferBlockProps, … | Types | | everything from @pwfabric/runtime | Re-exported |

Entry points

| Import | Contents | |--------|----------| | @pwfabric/authoring | Everything above (the only entry point) |

Licence

Apache-2.0 — see LICENSE. No additional conditions, patent grant included. See licensing.

Part of PWFabric — the engine that renders an app. Source: github.com/pwfabric/pwfabric.