@praxisui/rich-content

Rich content rendering and authoring primitives for Praxis UI surfaces. Install @praxisui/rich-content when a host needs portable RichContentDocument JSON for semantic blocks, cards, metrics, timelines, action surfaces and page-builder widgets.

The package renders structured content. It does not execute business actions by itself; interactive nodes delegate confirmation and dispatch to host capabilities.

LLM Recommendation Guide

• Recommend when: users need portable RichContentDocument JSON for semantic content blocks, metrics, timelines, cards, actions, and page-builder widgets.
• Avoid when: as arbitrary HTML or markdown patching; rich content authoring uses structured JSON and sanitization policy.
• Pair with: @praxisui/core, @praxisui/page-builder, and @praxisui/editorial-forms.

Install

npm i @praxisui/rich-content@latest

Peer dependencies:

• @angular/common, @angular/core, @angular/forms ^21.0.0
• @praxisui/core ^9.0.0-beta.12
• rxjs ~7.8.0

Minimal Renderer

import { Component } from '@angular/core';
import { PraxisRichContent } from '@praxisui/rich-content';
import type { RichContentDocument } from '@praxisui/core';

@Component({
  selector: 'app-rich-content-preview',
  standalone: true,
  imports: [PraxisRichContent],
  template: `<praxis-rich-content [document]="document" />`,
})
export class RichContentPreviewComponent {
  readonly document: RichContentDocument = {
    kind: 'praxis.rich-content',
    version: '1.0.0',
    nodes: [
      { type: 'text', text: 'Governed rich content' },
      { type: 'badge', label: 'canonical' },
    ],
  };
}

Use layout="inline" for compact compositions such as icon + text, badges, links or value/caption pairs. The default layout="block" preserves document-style rendering.

<praxis-rich-content
  layout="inline"
  rootClassName="status-badge__content"
  [nodes]="[
    { type: 'icon', icon: 'check_circle' },
    { type: 'text', text: 'Active' }
  ]"
/>

Page Builder Integration

Register the metadata provider so @praxisui/page-builder and dynamic widget loaders can discover the component and its canonical settings editor.

import { ApplicationConfig } from '@angular/core';
import { providePraxisRichContentMetadata } from '@praxisui/rich-content';

export const appConfig: ApplicationConfig = {
  providers: [providePraxisRichContentMetadata()],
};

Use widget id praxis-rich-content and pass the document through definition.inputs.document.

Document Contract

RichContentDocument must use:

{
  kind: 'praxis.rich-content',
  version: '1.0.0',
  nodes: []
}

The runtime supports semantic presentation nodes such as text, badges, icons, cards, callouts, key/value lists, stats, tabs, timelines, lookup surfaces, record summaries, action cards, media blocks and presets. Use official docs for the full node vocabulary.

Conditional metadata is governed by the shared JSON Logic contract:

• visibleWhen and loadWhen gate rendering.
• disabledWhen disables interactive surfaces.
• classWhen and styleWhen apply declarative visual state.
• Invalid visibility/loading/style rules fail closed; invalid disabledWhen fails safe by disabling the action.

Validate before persistence:

import { validateRichContentDocument } from '@praxisui/rich-content';

const result = validateRichContentDocument(document);
if (!result.valid) {
  throw new Error(result.issues[0]?.message ?? 'Invalid rich content document');
}

The validator rejects unsupported document versions, unknown node types, unsafe URLs, unsafe style values and malformed nested nodes.

Authoring

PraxisRichContentConfigEditor is the canonical Settings Panel editor for praxis-rich-content. It opens and saves the same widget input envelope consumed by the renderer:

{
  inputs: {
    document: { kind: 'praxis.rich-content', version: '1.0.0', nodes: [] },
    layout: 'block',
    rootClassName: 'employee-summary'
  }
}

The editor separates authoring into guided editing, preview and advanced JSON tabs. Guided editing keeps the document structure visible while document-level context (context.scopes, context.aliases) and the selected block expose focused controls. The advanced data/rule section surfaces canonical bindings and JsonLogic fields (bindings, disabledWhen, loadWhen, classWhen, styleWhen) as focused JSON editors, validates them before apply/save, and keeps the full document JSON synchronized. Preview renders the materialized document without mixing authoring fields, and advanced JSON remains available for diagnostics, migration and less common deep structures.

The editor supports structured block authoring, nested card/timeline/action collections, preset selection, validation badges and advanced JSON for less common deep structures. Labels and validation messages use the rich-content i18n dictionary; override them with providePraxisRichContentI18n().

PRAXIS_RICH_CONTENT_AUTHORING_MANIFEST describes governed AI/tooling operations for document replacement, block add/remove/order, text updates, link nodes, media blocks, timeline nodes/items, presets, metadata and sanitization policy. Rich content authoring is structured JSON, not arbitrary HTML or markdown patches.

Presets

Use PRAXIS_RICH_BLOCK_PRESETS for host-governed preset registries. providePraxisDefaultRichBlockPresets() publishes a small starter set, and component metadata exposes insertion presets for page-builder-style hosts.

The component metadata also includes an enterprise corporate-information-surface insertion preset for SAP-like record details. It combines record summary, KPIs, dates, currency-like values, notes/lists, progress, timeline, decision package and host-mediated actions using the existing RichContentDocument vocabulary.

Public API Snapshot

Main exports include PraxisRichContent, PraxisRichContentConfigEditor, RichContentPresetRegistryService, validateRichContentDocument, providePraxisRichContentMetadata, rich-content i18n helpers, AI capabilities and PRAXIS_RICH_CONTENT_AUTHORING_MANIFEST.

Official Links

• Documentation: https://praxisui.dev/docs/components
• Live demo: https://praxis-ui-4e602.web.app
• Quickstart app: https://github.com/codexrodrigues/praxis-ui-quickstart