Puck 0.13: Custom UIs, object fields & DropZone restrictions
Tags: react, javascript, webdev
Published: 2023-12-20 12:05:00

---
title: Puck 0.13: Custom UIs, object fields & DropZone restrictions
published: true
description: Puck v0.13.0 introduces some of our most powerful APIs yet, enabling completely custom interfaces, adding support for object fields and mechanisms to restrict DropZones.
tags: react, javascript, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhmr2ut9195jvesmi52a.png
# Use a ratio of 100:42 for best results.
published_at: 2023-12-20 12:05 +0000
canonical_url: https://measured.co/blog/puck-013
---



_[Puck](https://puckeditor.com) is the open-source visual editor for React built by [Measured](https://measured.co) - a self-hosted alternative to builder.io, WordPress and other WYSIWYG tools._

---

[Puck v0.13.0](https://github.com/measuredco/puck/releases/tag/v0.13.0) introduces some of our most powerful APIs yet,  enabling completely custom interfaces, adding support for object fields and mechanisms to restrict DropZones.

## TLDR

1. [**Custom interfaces**](https://puckeditor.com/docs/extending-puck/custom-interfaces): Take complete control of the Puck UI with the new custom interface APIs.
2. [**Object fields**](https://puckeditor.com/docs/api-reference/configuration/fields/object): Represent objects as fields with the new `object` field type.
3. [**DropZone restrictions**](https://puckeditor.com/docs/api-reference/components/drop-zone#allow): The new `allow` and `disallow` props allow you to restrict which components can be dropped into DropZones.
4. [**New plugin API (Breaking Change)**](https://puckeditor.com/docs/extending-puck/plugins): The plugin API has been updated to align with the new custom interfaces API. This is a breaking change. The plugin API remains experimental.
5. [**New transformProps API**](https://puckeditor.com/docs/integrating-puck/data-migration): The new transformProps API makes it easier to rename props on your components without breaking your payload.
6. [**New `ui` prop**](https://puckeditor.com/docs/api-reference/components/puck): Set the initial UI state for the Puck editor on render.
7. [**Add search to external fields**](https://puckeditor.com/docs/api-reference/configuration/fields/external#showsearch): Show a search input in the `external` field modal, enabling the user to query your external API.

## Highlights

### 🎨 Custom interfaces


It's now possible to create completely [custom Puck interfaces](https://puckeditor.com/docs/extending-puck/custom-interfaces) to integrate more deeply with your own UI and create a seamless experience for your users.

![custom-puck-ui-example](https://github.com/measuredco/puck/assets/985961/45a6c2ae-0cb6-412f-bba8-fb7432503a38)

This can be achieved by passing children to the `<Puck>` component.

```tsx
import { Puck } from "@measured/puck";

export function Editor() {
  return (
    <Puck>
      <div style={{ background: "hotpink" }}>
        <Puck.Preview />
      </div>
    </Puck>
  );
}
```

See [this demo](https://demo.puckeditor.com/custom-ui/edit).

### 🪝 The `usePuck` hook

Access Puck's internals using the `usePuck` hook to extend Puck's functionality with powerful custom components.

```tsx
import { Puck, usePuck } from "@measured/puck";

const JSONRenderer = () => {
  const { appState } = usePuck();

  return <div>{JSON.stringify(appState.data)}</div>;
};

export function Editor() {
  return (
    <Puck>
      <JSONRenderer />
    </Puck>
  );
}
```

### 🗃️ Object fields

Object fields enable you to represent your `object` types with the fields API. No more flattening your props!

```tsx
const config = {
  components: {
    Example: {
      fields: {
        params: {
          type: "object",
          objectFields: {
            title: { type: "text" },
          },
        },
      },
      render: ({ params }) => {
        return <p>{params.title}</p>;
      },
    },
  },
};
```

### 🙅 DropZone restrictions

Restrict which components can be passed into a DropZone component with the [`allow` and `disallow` props](https://puckeditor.com/docs/api-reference/components/drop-zone#allow).

```tsx
const MyComponent = () => (
  <DropZone zone="my-content" allow={["HeadingBlock"]} />
);
```


## Deprecations

### `renderHeader` deprecated

The `renderHeader` prop has been deprecated in favor of the [overrides API](https://puckeditor.com/docs/api-reference/overrides).

```tsx
// Before
export function Editor() {
  return (
    <Puck
      renderHeader={({ appState, dispatch }) => ()}
    />
  );
}

// After
export function Editor() {
  return (
    <Puck
      overrides={{
        header: ({ appState, dispatch }) => ()
      }}
    />
  );
}
```

### `renderHeaderActions` deprecated

The `renderHeaderActions` prop has been deprecated in favor of the [overrides API](https://puckeditor.com/docs/api-reference/overrides).

```tsx
// Before
export function Editor() {
  return (
    <Puck
      renderHeaderActions={({ appState, dispatch }) => ()}
    />
  );
}

// After
export function Editor() {
  return (
    <Puck
      overrides={{
        headerActions: ({ appState, dispatch }) => ()
      }}
    />
  );
}
```

## Breaking changes

### `renderComponentList` removed

The `renderComponentList` prop has been removed in favor of the [overrides API](https://puckeditor.com/docs/api-reference/overrides).

```tsx
// Before
export function Editor() {
  return (
    <Puck
      renderComponentList={({ appState, dispatch }) => ()}
    />
  );
}

// After
export function Editor() {
  return (
    <Puck
      overrides={{
        componentList: ({ appState, dispatch }) => ()
      }}
    />
  );
}
```

### Plugin API revamped

The [plugin API](https://puckeditor.com/docs/extending-puck/plugins) has been significantly revamped to match the [overrides API](https://puckeditor.com/docs/api-reference/overrides).

```tsx
// Before
export function Editor() {
  return (
    <Puck
      plugins={[
        { renderFields: ({ appState, dispatch }) => () }
      ]}
    />
  );
}

// After
export function Editor() {
  return (
    <Puck
      plugins={[
        overrides: {
          form: ({ appState, dispatch }) => ()
        }
      ]}
    />
  );
}
```

## Changelog

See the [GitHub release](https://github.com/measuredco/puck/releases/tag/v0.13.0) for a full changelog.