Overview

Once you've fetched a document, you need to render its fields. Most fields are plain values you output directly, but a few — images, icons, rich text, and block layouts — have a shape worth a small helper. Dyrected ships those helpers for React, Vue, Next, and Nuxt so you don't hand-roll an <img> for every upload or a switch for every block type.

These components are presentational: they take a field value as a prop and render it. They don't need a provider or a network call, so you can drop them anywhere you already have the data.

Images and files

An upload field, once hydrated, gives you the upload document — its url, width, height, and mimeType. DyrectedImage renders it as an <img> (Next uses next/image, Nuxt uses <NuxtImg>), filling in dimensions and alt text from the document when you don't pass them:

import { DyrectedImage } from "@dyrected/react"; // or '@dyrected/next'

<DyrectedImage media={post.coverImage} alt="Cover image" />;

When the file might be something other than an image — a video, a YouTube link, or a downloadable document — reach for DyrectedMedia, which inspects the mimeType and renders the right element. By default, it renders raw, unstyled HTML (<img>, <video>, <audio>, <a>) so it never conflicts with your own CSS or Tailwind setup:

import { DyrectedMedia } from "@dyrected/react";

<DyrectedMedia media={post.attachment} fallback={<p>Unsupported file</p>} />;

Both accept either the hydrated upload document or a plain URL string, so a bare url works too.

If you pass a bare ID string instead of a populated document, DyrectedMedia will seamlessly fetch the media details from your Dyrected backend to render it correctly.

If you are prototyping and want the opinionated, structured styling of the Dyrected Admin dashboard (such as borders, muted backgrounds, and hover effects), you can set the unstyled prop to false:

<DyrectedMedia media={post.attachment} unstyled={false} />

Icons

An icon field stores the name of a Lucide icon, not its SVG. DyrectedIcon resolves that name to the icon and forwards any Lucide prop (size, className, color). Pass a fallback name for when the stored name is missing or was removed in an icon-library upgrade:

import { DyrectedIcon } from "@dyrected/react";

<DyrectedIcon name={feature.icon} fallback="Circle" className="w-6 h-6" />;

Rich text

A rich text field stores an HTML string produced by the editor. DyrectedRichText renders it inside a wrapper you can style:

import { DyrectedRichText } from "@dyrected/react"; // or '@dyrected/next'

<DyrectedRichText content={post.body} className="prose" />;

Because the value is HTML authored through the admin panel, render content you trust — and sanitize it upstream if untrusted users can edit it.

Blocks

A blocks field is an array of items, each tagged with a blockType. Rather than writing a switch, give the Blocks component a map from each blockType to the component that renders it:

import { Blocks } from "@dyrected/react"; // or '@dyrected/next'
import { Hero } from "./blocks/Hero";
import { Cta } from "./blocks/Cta";

<Blocks items={page.body} components={{ hero: Hero, cta: Cta }} />;

Blocks renders each item in order and scopes it for live-preview click-to-edit. The path prop defaults to "body"; set it to match the field's name if your blocks live under a different key.

Which package exports what

Every component exists in each framework, with a couple of wrinkles worth knowing:

In Vue you import from @dyrected/vue. In Nuxt, these are all auto-imported (with Blocks registered as <DyrectedBlocks>), so you use them in templates without an import. Nuxt renders images through @nuxt/image's <NuxtImg> — the Dyrected Nuxt module installs it for you — so <DyrectedImage> and the image case of <DyrectedMedia> get optimization the way next/image does in Next:

<template>
  <DyrectedImage :media="post.coverImage" alt="Cover image" />
  <DyrectedIcon :name="feature.icon" />
  <DyrectedRichText :content="post.body" />
  <DyrectedBlocks :items="page.body" :components="{ hero: Hero }" />
</template>