@ooozzy/website-builder

Figma-like canvas for editing Liquid-templated pages.

Install

npm install @ooozzy/website-builder

Peer dependencies: react, react-dom, liquidjs

Usage

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