Customize list and edit views

Use a view component when you want to add content around a collection list, a document editor, or a global’s edit screen. Your component receives the built-in screen as defaultView. Rendering it keeps the working list or form on the page.

This example adds an editorial reminder above the Post editor.

1. Wrap the built-in screen

<script lang="ts">
  import type { AdminCoreViewProps } from '@riducms/plugin';

  let { defaultView }: AdminCoreViewProps = $props();
</script>

<aside aria-label="Editorial reminder">
  Check image credits before publishing an article.
</aside>
<!-- Keep the built-in editor below the reminder. -->
{@render defaultView()}

A Svelte snippet is a piece of UI that a component can render. In this example, {@render defaultView()} displays Ridu’s existing editor, including its fields and save controls. Put your content before or after that line to place it around the editor.

2. Choose the screen

import { defineAdmin } from '@riducms/plugin/admin';
import { generatedAdminPlugins } from './ridu.plugins.generated';
import EditorialScreen from './components/editorial-screen.svelte';

export default defineAdmin({
  plugins: generatedAdminPlugins,
  views: [
    {
      key: 'posts-editor',
      surface: 'collectionEdit',
      collection: 'posts',
      component: EditorialScreen
    }
  ]
});

Keep bun run dev running and open an existing Post. The reminder should appear above the normal editor, and editing and saving should still work.

Other screens

Set surface to the screen you want to customize:

Omit the collection or global name to apply a component to every screen of that type. A registration for a specific collection or global takes precedence over a general one. Give each registration a different key. Two replacements for the same target are an error.

Replace a screen

If your component does not render defaultView, it replaces the screen completely. You then provide its UI and data requests yourself. For most additions, render defaultView so you can keep the built-in editing and list features.

These components can receive collection, global, and documentID, depending on the screen. They do not receive the editor’s unsaved form values. Use a field component to work with those values, or a document tab to display saved document data.