Content Engine
AdminCP Integration
Configure zero-code AdminCP management screens, custom form layouts, list columns, and screen overrides.
Content Engine automatically builds interactive management screens in the AdminCP without writing hand-rolled pages or form components.
Quick start
Register your content type in src/config.tsx with contentTypeAdmin:
import { buildPlugin, contentTypeAdmin } from "@vitnode/core/lib/plugin"
import { FileTextIcon } from "lucide-react"
import { postContentType } from "./content/post"
export const blogPlugin = () =>
buildPlugin({
pluginId: "blog",
contentTypes: [
contentTypeAdmin({
definition: postContentType,
icon: <FileTextIcon />,
}),
],
})The screen is immediately accessible at /admin/content/blog/post.
Customizing the Data Table
Control which columns, search inputs, and sortable headers appear in the AdminCP table:
export const postContentType = defineContentType({
id: "blog.post",
tableName: "blog_posts",
fields: { /* ... */ },
admin: {
titleField: "title", // Primary record identifier in dialogs
list: {
columns: ["title", "status", "author", "createdAt"],
searchableFields: ["title"],
orderableFields: ["title", "createdAt"],
defaultOrderBy: { column: "createdAt", order: "desc" },
},
},
})Customizing Form Layouts
Group fields into visually distinct sections:
admin: {
form: {
sections: [
{
id: "main",
fields: ["title", "slug", "content"],
},
{
id: "metadata",
title: "Publishing Options",
fields: ["status", "category", "author"],
},
],
},
}Custom Screen Overrides
For advanced layouts, replace the default screen with a custom React component:
export const postAdminOverrides = {
customScreen: MyCustomPostScreen,
}