@wizestudio/components

The default WizeStudio component pack: layout, content and interactive widgets.

Where this sits

WizeStudio is a visual page builder for headless CMS platforms. A widget is an ordinary React component plus a manifest; the editor only ever sees the manifest, the renderer only ever sees the component.

This pack is what a project starts with so that the editor is not empty on day one. It is also a reference implementation: every widget here is defined with the same public defineWidget from @wizestudio/renderer-react that a customer would use. There is no privileged path — if a widget in this pack could do something a third-party widget cannot, that would be a bug in the architecture rather than a feature of the pack.

Install

npm install @wizestudio/components

React 18 or later is a peer dependency.

Usage

manifests go to the editor via wize push; components stay in your application.

import { components, manifests } from '@wizestudio/components';
import { WizePage } from '@wizestudio/renderer-next';

<WizePage layout={entry.layout} components={components} />

Mixing in your own widgets is the ordinary case:

import { createPack, defaultWidgets } from '@wizestudio/components';
import { Hero, Pricing } from './widgets';

export const { manifests, components } = createPack([...defaultWidgets, Hero, Pricing]);

What is in it

| Group | Widgets | |---|---| | layoutWidgets | Section, Container, Grid, Stack, Spacer | | contentWidgets | Heading, Text, Image, Button, Divider, Video | | interactiveWidgets | Tabs, TabPanel, Accordion, AccordionItem |

defaultWidgets is all three groups. The set was chosen to exercise the manifest surface — slots and nesting rules, UI field controls, style facets, inline editing and behaviour tags — rather than to pad a count. Tabs and Accordion accept children by declaring slots with accepts tags, so neither container names its child type directly.

unsafeWidgets

Embed renders author-supplied markup and is excluded from defaultWidgets. Enabling it should be a deliberate decision rather than something that arrives by default and is discovered during a security review. The trust model is narrow but real: an authenticated editor with access to it can execute script on every page it appears on.

const { manifests, components } = createPack([...defaultWidgets, ...unsafeWidgets]);

Key exports

| Export | Purpose | |---|---| | manifests, components | The default pack, ready to use | | defaultWidgets | The definitions behind it, for composing your own pack | | layoutWidgets, contentWidgets, interactiveWidgets | The groups individually | | unsafeWidgets | Embed, opt-in only | | Individual definitions | Section, Container, Grid, Stack, Spacer, Heading, Text, Image, Button, Divider, Video, Embed, Tabs, TabPanel, Accordion, AccordionItem | | TabsClient | The client component Tabs uses for its interactive behaviour | | createPack, defineWidget | Re-exported from @wizestudio/renderer-react for convenience |

Licence

Commercial. See LICENSE-COMMERCIAL.md and wizestudio.wizeb.com/pricing.

Development hosts are free and unlimited — localhost, *.local, *.test, private IP ranges and single-label hosts. No account, no network, no key.

The packages that serve your published pages — schema, core, canvas-bridge, renderer-react, renderer-next and cli — are MIT and contain no licensing code, so nothing on the commercial side can affect a live site.

wizestudio.wizeb.com