Implementation tutorial

Use the complete View toolbelt

A complete DOM page using the native RCMV UI foundation. Content remains data, orchestration remains logic, and presentation remains entirely in the View lane.

Open the Web Elements demo

What the native View toolbelt covers

Semantic React componentsServer-rendered React DOMTailwind layout and spacingTypography and color tokensResponsive breakpointsLucide interface iconsForms and focus statesCards, badges, and feedback

Route

src/routes/product.route.ts

Map GET /product/:slug to one Controller and one DOM View.

defineRoute({ method: 'GET', path: '/product/:slug',
  controller: showProduct, view: renderProduct })

Controller

src/controllers/product.controller.ts

Pass the requested slug to the Model and translate its result into a ready or missing outcome.

const result = await readProduct(context.params.slug)
return result.status === 'found'
  ? controller.ready(result.data)
  : controller.missing()

Model

src/models/product.model.ts

Validate the product content before returning the standard Model result.

const Product = z.object({ title: z.string(),
  description: z.string(), price: z.number() })
return model.found(Product.parse(source))

View

src/views/product.view.ts

Use React components, Tailwind design tokens, React DOM rendering, and Lucide icons.

const page = <main className="mx-auto max-w-5xl">
  <PackageCheck /><h1>{data.title}</h1>
</main>
return html(renderToStaticMarkup(page))