Skip to main content

Custom renderAs

A custom renderAs renderer is the lightest registry extension in Widgemo.

Use it when a field should keep its existing schema and behavior, but needs a different visual output.

When to Use Custom renderAs​

SituationPrefer custom renderAs?Why
Existing field needs a different visual treatmentYesOnly presentation changes
Multiple fields share the same semantic value typeSometimesUse a field type instead if the semantic category matters
Entire content layout needs to changeNoUse a custom mode instead
Built-in renderer already supports the needNoStay config-driven when possible

Registration Contract​

registerWidgemoRenderAs accepts a RenderAsRegistryEntry:

FieldTypeDescription
namestringRegistry key referenced from item.fields[].renderAs
render(value, options, entity) => ReactNodeRenderer function
defaultOptionsPartial<RenderAsOptions>Default options merged before render

1. Create the renderer​

// src/renderers/jsonRenderer.tsx
import type { RenderAsRegistryEntry } from '@widgemo/widgemo-core';

export const jsonRenderer: RenderAsRegistryEntry = {
  name: 'json',
  render: (value, _options, _entity) => (
    <pre style={{ fontSize: '0.75rem', margin: 0, overflowX: 'auto' }}>
      {JSON.stringify(value, null, 2)}
    </pre>
  ),
  defaultOptions: {},
};

2. Register at app boot​

import { widgemoRegistry } from '@widgemo/widgemo-core';
import { jsonRenderer } from './renderers/JsonRenderer';

widgemoRegistry.registerWidgemoRenderAs(jsonRenderer);

Register before a Widgemo using that renderer is rendered.

3. Use in any field​

const fields = [
  { key: 'id', label: 'ID' },
  { key: 'name', label: 'Name' },
  { key: 'metadata', label: 'Metadata', renderAs: 'json' },
];

Best Practices​

  • Keep renderer names namespaced when they are application-specific (acme.json, finance.delta-chip).
  • Prefer renderAs over custom field types when the change is purely presentational.
  • Use defaultOptions to centralize repeated renderer options.
  • Avoid replacing built-in renderers unless you want a global override.

See Also​