`.\n\nMount every registration through one `NodePlugin`, inside the `EditorProvider`. Keep the `nodes` array itself at module scope, as above: a fresh array on every render would make `NodePlugin` unregister and re-register on every keystroke. You can learn more about [customizing the rendering](https://www.portabletext.org/editor/guides/custom-rendering/) in the documentation.\n\n```tsx\n<>\n
\n
\n\n```\n\nBefore you can see if anything changed, you need a way to interact with the editor.\n\n### Create a toolbar\n\nA toolbar is a collection of UI elements for interacting with the editor. [`@portabletext/toolbar`](../toolbar/) provides ready-made hooks (`useStyleSelector`, `useDecoratorButton`, and more) for common toolbar UI; see the [toolbar customization guide](https://www.portabletext.org/editor/guides/customize-toolbar/) to use them. What follows here is the lower-level approach: sending events to the editor directly.\n\n1. Create a `Toolbar` component in the same file.\n2. Import the `useEditor` hook, and declare an `editor` constant in the component.\n3. Iterate over the schema types to create toggle buttons for each style and decorator.\n4. Send events to the editor to toggle the styles and decorators whenever the buttons are clicked.\n5. Render the toolbar buttons.\n\n```tsx\n// App.tsx\n// ...\nimport {useEditor} from '@portabletext/editor'\n\nfunction Toolbar() {\n // useEditor provides access to the PTE\n const editor = useEditor()\n\n // Iterate over the schema (defined earlier), or manually create buttons.\n const styleButtons = schemaDefinition.styles.map((style) => (\n
{\n // Send style toggle event\n editor.send({\n type: 'style.toggle',\n style: style.name,\n })\n editor.send({\n type: 'focus',\n })\n }}\n >\n {style.name}\n \n ))\n\n const decoratorButtons = schemaDefinition.decorators.map((decorator) => (\n {\n // Send decorator toggle event\n editor.send({\n type: 'decorator.toggle',\n decorator: decorator.name,\n })\n editor.send({\n type: 'focus',\n })\n }}\n >\n {decorator.name}\n \n ))\n return (\n <>\n {styleButtons}\n {decoratorButtons}\n \n )\n}\n```\n\nThe `useEditor` hook gives you access to the active editor. `send` lets you send events to the editor. You can view the full list of events in the [Behavior API reference](https://www.portabletext.org/editor/reference/behavior-api/).\n\n> [!NOTE]\n> The example above sends a `focus` event after each action. Normally when interacting with a button, the browser removes focus from the text editing area. This event returns focus to the field to prevent interrupting the user.\n\n### Bring it all together\n\nWith the registrations created and a toolbar in place, you can fully render the editor. Add the `Toolbar` inside the `EditorProvider`.\n\n```tsx\n// App.tsx\n// ...\nfunction App() {\n const [value, setValue] = useState | undefined>(\n undefined,\n )\n\n return (\n <>\n \n {\n if (event.type === 'mutation') {\n setValue(event.value)\n }\n }}\n />\n \n \n \n \n \n )\n}\n// ...\n```\n\nYou can now enter text and interact with the toolbar buttons to toggle the styles and decorators. These are only a small portion of the types of things you can do. Check out the [custom rendering guide](https://www.portabletext.org/editor/guides/custom-rendering/) and the [toolbar customization guide](https://www.portabletext.org/editor/guides/customize-toolbar/) for options.\n\n### View the Portable Text data\n\nYou can preview the Portable Text from the editor by reading the state. Add the following after the `EditorProvider`.\n\n```tsx\n\n {JSON.stringify(value, null, 2)}\n\n```\n\nThis displays the raw Portable Text. To customize how Portable Text renders in your apps, explore the [collection of serializers](https://www.portabletext.org/rendering/).\n\n## Behavior API\n\nThe Behavior API is a way of interfacing with the PTE. It allows you to think of and treat the editor as a state machine by:\n\n- Declaratively hooking into editor **events** and defining new behaviors.\n- Imperatively triggering **events**.\n- Deriving editor **state** using **pure functions**.\n- Subscribing to **emitted** editor **events**.\n\nLearn more about the [Behaviors](https://www.portabletext.org/editor/concepts/behavior/) and how to [create your own behaviors](https://www.portabletext.org/editor/guides/create-behavior/) in the documentation.\n\n## Related packages\n\n[`@portabletext/toolbar`](../toolbar/) provides React hooks for building toolbars and related UI components.\n\n### Plugins\n\nExtend the editor with [official plugins](../../#editor-plugins).\n\n## End-user experience\n\nA large E2E test suite, generated from a [human-readable Gherkin spec](./gherkin-spec/), guards the end-user experience: how selection, editing, and formatting behave under real keyboard and pointer input.\n\n## Development\n\n### Develop with Sanity Studio\n\n1. Run `pnpm build:editor` to build the editor\n2. Run `pnpm dev:editor` to start dev mode\n3. In the [sanity](https://github.com/sanity-io/sanity) monorepo, link the editor package:\n ```sh\n cd packages/sanity\n pnpm link /packages/editor\n ```\n4. Run `pnpm dev:test-studio` in the sanity repo\n","readmeFilename":"README.md"}![\"Portable](\"https://raw.githubusercontent.com/portabletext/portabletext/master/logo-white.svg?sanitize=true\"){kind=logo}
\n