npm package: @ooozzy/website-builder
Description: Figma-like website builder canvas for editing Liquid-templated pages
Latest version: 0.1.1

# @ooozzy/website-builder

Figma-like canvas for editing Liquid-templated pages.

## Install

```bash
npm install @ooozzy/website-builder
```

**Peer dependencies:** `react`, `react-dom`, `liquidjs`

## Usage

```tsx
import { BuilderProvider, BuilderShell } from "@ooozzy/website-builder";
import "@ooozzy/website-builder/styles.css";

function App() {
  return (
    <BuilderProvider
      pages={[
        {
          id: "home",
          name: "Home",
          template: "<h1>{{ site.title }}</h1>",
        },
      ]}
      data={{ site: { title: "My Site" } }}
      onSave={async (payload) => console.log(payload)}
    >
      <BuilderShell />
    </BuilderProvider>
  );
}
```

## `BuilderProvider` Props

| Prop            | Type                                      | Required | Description                                                        |
| --------------- | ----------------------------------------- | -------- | ------------------------------------------------------------------ |
| `pages`         | `BuilderPage[]`                           | Yes      | Pages with Liquid templates                                        |
| `data`          | `Record<string, unknown>`                 | No       | Data passed to Liquid templates (products, collections, etc.)      |
| `schema`        | `TemplateSchema`                          | No       | Editable field declarations (alternative to `{% schema %}` blocks) |
| `onSave`        | `(payload: SavePayload) => Promise<void>` | No       | Called on Save                                                     |
| `onPublish`     | `(payload: SavePayload) => Promise<void>` | No       | Called on Publish                                                  |
| `onImageUpload` | `(file: File) => Promise<string>`         | No       | Image upload handler, returns URL                                  |
| `user`          | `BuilderUser`                             | No       | Current user info for the topbar                                   |
| `themes`        | `BuilderTheme[]`                          | No       | Selectable themes in the sidebar                                   |
| `activeThemeId` | `string`                                  | No       | Currently active theme ID                                          |
| `onThemeChange` | `(themeId: string) => void`               | No       | Called when user picks a theme                                     |

## Hooks

| Hook           | Description                              |
| -------------- | ---------------------------------------- |
| `usePages`     | Access page list and active page         |
| `useVariables` | Read/write template variables            |
| `useSave`      | Trigger save/publish with dirty tracking |
| `useCanvas`    | Viewport transform, zoom, device mode    |

## Exported Types

`BuilderConfig`, `BuilderPage`, `BuilderTheme`, `BuilderUser`, `SavePayload`, `VariableType`, `VariableSchema`, `TemplateSchema`, `ParsedTemplate`, `RenderResult`, `DeviceMode`, `ViewportTransform`

## License

MIT