Render in Container

Use ctx.render() to render content into the current container (ctx.element) in three ways:

ctx.render()

Render JSX

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>');

JSX Notes

RunJS can render JSX directly, using either the built-in React/component library or externally loaded dependencies.

Using Built-in React and Components

jsx

const { Button } = ctx.libs.antd;

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

Using External React and Components

Load a specific version via ctx.importAsync():

jsx

const React = await ctx.importAsync('[email protected]');
const { Button } = await ctx.importAsync('[email protected]?bundle');

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

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

ctx.element

Not recommended (deprecated):

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

Recommended:

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