Zhin Component Rendering Skill

Use this skill when developers need to create reusable message components with Zhin's component system.

Define and Register a Component

import { defineComponent, usePlugin } from '@zhin.js/core'

const plugin = usePlugin()

const StatusCard = defineComponent((props: { title: string, value: string }, context) => {
  return `<text>${props.title}: ${props.value}</text>`
}, 'status-card')

plugin.addComponent(StatusCard)

Template Usage

Components render within message templates:

await message.$reply('<status-card title="CPU" value="40%"/>')

You can nest components:

await message.$reply('<Fragment><status-card title="Memory" value="512MB"/></Fragment>')

Props & Expressions

Props support inline expressions with {} and template interpolation via ${} when rendering:

const Card = defineComponent((props: { title: string, count: number }) => {
  return `<text>${props.title}: ${props.count}</text>`
}, 'card')

await message.$reply('<card title="Jobs" count="{1 + 2}"/>')

Rendering Lifecycle

The component service attaches a before.sendMessage listener to render templates before messages send.

If you need to pre-render a template manually, use renderComponents:

import { renderComponents } from '@zhin.js/core'

const options = await renderComponents(componentService.byName, {
  context: 'process',
  bot: 'dev',
  type: 'private',
  id: '123',
  content: '<status-card title="CPU" value="40%"/>'
})

Built-in Components

Zhin includes:

• Fragment for grouping/children rendering
• fetch for loading remote content (use carefully and validate URLs)

Best Practices

• Keep components small and reusable.
• Validate and sanitize user input before passing it into templates.
• Avoid untrusted URLs with the fetch component.