#ctx.render

Render a React element, HTML string, or DOM node into the ctx.element container.

#Type definition

render(
  vnode: React.ReactElement | Node | DocumentFragment | string
): ReactDOMClient.Root | null

#Parameters

• vnode: content to render
  • React.ReactElement: React element (JSX) with full React capabilities
  • Node: DOM node appended to the container
  • DocumentFragment: child nodes appended to the container
  • string: HTML string assigned to innerHTML

#Return value

• When rendering a React element: returns a ReactDOMClient.Root instance for further updates
• When rendering HTML string or DOM node: returns null

#Notes

• Content is rendered into the ctx.element container
• Calling ctx.render() multiple times replaces existing content
• React rendering uses React createRoot and inherits app context automatically
• When rendering an HTML string, any existing React root is unmounted first

#Examples

#Render JSX

ctx.render(<button>Button</button>);

#Render DOM node

const div = document.createElement('div');
div.innerHTML = 'Hello World';
ctx.render(div);

#Render HTML string

ctx.render('<h1>Hello World</h1>');

#Use built-in React and component library

const { Button } = ctx.libs.antd;

ctx.render(<Button>Click</Button>);

#Use external React and component library

Load a specific version on demand via ctx.importAsync():

const React = await ctx.importAsync('react@19.2.4');
const { Button } = await ctx.importAsync('antd@6.2.2?bundle');

ctx.render(<Button>Click</Button>);

Suitable when you need a specific version or third-party components.

#Not recommended: mutate ctx.element directly

Deprecated usage:

ctx.element.innerHTML = '<h1>Hello World</h1>';

Prefer ctx.render():

ctx.render(<h1>Hello World</h1>);