Build and enable

The rest of the menu

You already registered Maya's library and dragged her React hero on Component Libraries. This page is what her developers type: the npm module, the enablement request we need, a version update, and the libraries map her site must declare. If you are still looking for Add Library, go back to that hub.

Keep that hero in mind. The package exports a hero-banner. We enable acme. She registers acme. The homepage maps acme next to default. The three ids are the same string.

The module her package exports

A component library is a standard npm package whose module exports three things: a manifest, a components map (the render surface), and an optional editor surface (palette cards, drag previews, and attribute metadata). The shape is ComponentLibraryModule in @rulecms/widget-react. Conformance is structural: the package does not need a runtime dependency on RuleCMS. A devDependency-only type check is enough.

// src/index.ts — the module itself IS the library
import packageJson from '../package.json';

export const manifest = {
  id: 'acme',                    // your Library ID
  version: packageJson.version,
  reactPeerRange: '>=16.8.0',
};

// Render surface: component type -> renderable entry
export const components = {
  'hero-banner': heroBannerEntry,
  'product-card': productCardEntry,
};

// Editor surface: what the RuleCMS composer shows your editors.
// Palette entries are structured data — the composer owns the card
// template, so every library's cards render consistently.
const heroBannerPreview = { id: 'hero-banner', icon: '🖼️', label: 'Hero Banner' };

export const editor = {
  previewComponents: { 'hero-banner': heroBannerPreview },
  previewCardGroups: [
    {
      title: 'Acme Components',
      showInitially: true,
      cards: [{ title: 'Marketing', entries: [heroBannerPreview] }],
    },
  ],
  componentMetadata: { /* attribute editing configuration */ },
};

When you reach for each lever:

• react and react-dom must be peer dependencies — never bundled into the library.
• Component type ids are kebab-case — hero-banner. They only need to be unique inside this library. The Library ID namespaces them for everyone else.
• Without the editor export, the components still render on published widgets if the host has the library. They will not appear in the composer palette. Include editor if Maya should be able to drag them.
• An optional stylesheet string is for pseudo-classes the cards cannot express as inline styles. Skip it until you need hover or focus rules.
• Ship an ESM build (CJS additionally is fine) with TypeScript declarations.

Publish the package

Publish the library to npm — a public package, or a private registry we can be granted access to. Standard semantic versioning applies. Every version you want available in RuleCMS goes through the enablement or update request below. Her own websites can adopt a new version from npm at any time. Only the copy running inside RuleCMS is updated by us.

Request enablement

The platform loads only libraries we have reviewed and wired in. That is a security and isolation guarantee: nothing executes inside RuleCMS that we have not enabled. There is no self-serve upload today. File a request, then allow for our release cycle. Your contact will confirm the timeline. We do not publish a date for a CDN or a self-serve installer.

Send this to your RuleCMS contact:

Subject: Component library enablement request — <your library ID>

1. Library ID (required)
   The globally unique id, e.g. "acme".
   Format: 3-64 chars, lowercase letters/numbers/hyphens,
   must start with a lowercase letter. Immutable once created.

2. npm package name (required)
   e.g. @acme/rulecms-widgets

3. Version to enable (required)
   Exact published version, e.g. 1.2.0

4. Registry access (required if not public npm)
   How we can install the package: public npm / private registry
   credentials / access instructions.

5. Organization and Team (required)
   Your RuleCMS organization name and the team(s) that should be
   able to use this library.

6. Component inventory (required)
   List each component type id with a one-line description,
   e.g. "hero-banner — full-width hero with CMS-editable heading".

7. React version range (required)
   The reactPeerRange your library supports, e.g. ">=16.8.0".

8. Editor surface included? (required)
   Yes/No — whether the package exports the editor surface so
   components appear in the composer palette.

9. Source access for review (recommended)
   Repository link or read access so we can review the library
   before enabling it.

10. Technical contact (required)
    Name and email of the developer we can reach with questions.

What happens next:

• We review the package — contract conformance, bundle hygiene, no bundled React, reasonable size.
• We install it into RuleCMS and wire up your Library ID. That ships with a platform deploy.
• We confirm when the library is live. Then register it on the team and drag.

Map the same id on her site

Her websites and apps render RuleCMS widgets with @rulecms/widget-react. The libraries map has been on the provider and on RuleCMSWidgetServer since v15. Register her library alongside the default one. The app installs the package directly from npm — no RuleCMS request is needed on this side. The map key is the Library ID.

import * as sourceComponents from '@rulecms/source-components-react';
import * as acmeWidgets from '@acme/rulecms-widgets';

<RuleCMSWidgetProvider
  token={token}
  libraries={{
    default: sourceComponents,
    acme: acmeWidgets,            // eager import: full SSR support
    // or: acme: () => import('@acme/rulecms-widgets')  // code-split
  }}
>
  <RuleCMSWidget publishedKey={publishedKey} />
</RuleCMSWidgetProvider>

For React Server Components, pass the same map to RuleCMSWidgetServer via its libraries prop. Eager modules keep SSR and hydration on the same path. A thunk is fine for client-fetch. Libraries load only when a widget's configuration actually references them, so registering a library costs nothing on pages that do not use it.

For live Development drafts (no publish), see Development Integration. For a single app-owned component that should not become a palette card, see Mount Your Own Components.

Troubleshooting

What to read next

• Component Libraries — Register the Library ID, set it Active, drag Maya's hero, publish.
• Mount Your Own Components — When the component should stay a typed name on the host, not a palette card.
• Development Integration — The same libraries map against a live Development draft.
• Publishing — Draft versus the snapshot a token fetches.

How this fits

This page is the contract her developers ship and the request we need. It does not replace Component Libraries — that hub is still how a teammate registers the id and drags the card. We enable. She registers. The site maps the same id. Visitors see the hero she placed.