@avocadostudio-ai/blocks

The built-in React renderers for Avocado Studio's block set, plus the dispatch layer that lets you replace any of them with your own component.

Install

npm install @avocadostudio-ai/blocks

import { SharedBlockRenderer } from "@avocadostudio-ai/blocks"
import "@avocadostudio-ai/blocks/styles.css"

export function Page({ page }) {
  return page.blocks.map((block) => <SharedBlockRenderer key={block.id} block={block} />)
}

The stylesheet is not optional — every renderer is styled by it.

The block set

Twenty types, all schema-declared in @avocadostudio-ai/shared:

Hero, FeatureGrid, Testimonials, FAQAccordion, CTA, Card, CardGrid, RichText, Banner, Carousel, Embed, Footer, Gallery, Quote, SiteHeader, Stats, Table, Tabs, TwoColumn, Video.

SiteHeader and Footer are chrome: structurally pinned, always present, and not addable, movable or removable from the editor.

rendererTypes is the live list, so you never have to keep a copy of it.

Using your own component for a type

import { registerCustomRenderer } from "@avocadostudio-ai/blocks"

registerCustomRenderer("Hero", MyHero)

SharedBlockRenderer looks the type up and falls back to the built-in when nothing is registered. hasRenderer and getCustomRenderer let you check.

Ordering matters and it bites: a globalThis registry override must be last in source order, or a transitive import re-registers the default on top of yours. If your host bundles across RSC / SSR / route-handler layers, do not rely on module order at all — pass the registration through the registerBlocks hook on createEditorApiHandler / createOrchestrator, which re-runs it after the built-ins have registered.

Rendering with your own block set entirely

You do not need this package. A site with its own components renders them itself and describes them to the editor with a block manifest. This package is the starter kit, not the contract.

Exports

| Import | What it provides | |---|---| | @avocadostudio-ai/blocks | SharedBlockRenderer, registerCustomRenderer, hasRenderer, getCustomRenderer, BlockCatalogue, BlocksHydrator, BlockErrorBoundary, rendererTypes | | .../styles.css | The stylesheet every renderer needs |

Peers

next >= 15, react >= 19, react-dom >= 19.

License

Apache-2.0