Content Editor Renderer API

The NgStarter Angular Content Editor Renderer API documents the inputs, provider helpers, renderer definition shape, and dynamic renderer input contract for rendering saved Content Editor JSON blocks as HTML.

Import the renderer and provider helpers from @ngstarter-ui/components/content-editor. Use ngs-content-editor-renderer with blocks produced by ngs-content-editor-builder.

import {
  ContentEditorRenderer,
  provideContentEditorRenderer,
  provideContentEditorRenderers,
  ContentEditorBlockRendererDef,
  ContentEditorBlockRendererInputSignals
} from '@ngstarter-ui/components/content-editor';

Selector

<ngs-content-editor-renderer [content]="document"/>

Inputs

Input	Type	Default
config Instance block configuration, including Angular preview renderers and HTML converters. Overrides environment defaults and is inherited by nested Grid/Toggle renderers.	ContentEditorConfig	{}
content Headless editor document to render. Text content uses runs with marks; block settings and properties live in attrs.	ContentEditorDocument	Empty headless document
blocks Native block array. When provided, it takes precedence over content.blocks.	ReadonlyArray<NgsHeadlessEditorBlock> \| null	null

Renderer Providers

API	Type	Notes
provideContentEditorConfig(config) Configures block HTML exporters/importers, import validators, text marks and block options through environment providers. See Block format & import for the complete saved format and ContentEditorImporter API.	EnvironmentProviders	Built-in HTML converters
provideContentEditorRenderers(renderers) Registers multiple custom block renderer definitions through an environment provider.	EnvironmentProviders	Adds to default renderers
provideContentEditorRenderer(renderer) Registers one custom block renderer definition.	EnvironmentProviders	Adds to default renderers
CONTENT_EDITOR_BLOCK_RENDERERS Multi provider token used internally by the renderer to collect registered renderer definitions.	InjectionToken<ReadonlyArray<ReadonlyArray<ContentEditorBlockRendererDef>>>	[]

Renderer Definition

Property	Type	Required
type Block type handled by this renderer, for example paragraph, heading, image, or a custom block type.	string	Required
component Standalone Angular component used for blocks with the matching type.	Type<unknown>	Required

Dynamic Renderer Inputs

Custom renderer components receive these inputs from ngComponentOutletInputs. Use ContentEditorBlockRendererInputSignals when declaring renderer inputs with Angular input().