Issue with CustomElement rendering using JSX

danielsharma7839 · January 7, 2026, 10:07pm

WebViewer Version: 11.9

Please give a brief summary of your issue:
Attempting to render custom element in context popup menu, it works when providing a DOM element in the render function, but if I provide JSX which I believe is supported it does not render.

Please describe your issue and provide steps to reproduce it:

const renderSlider = () => {
    const slider = document.createElement(‘input’);
    slider.type = ‘range’;
    slider.oninput = () => {
    // Do something
};

return slider;
}

const newCustomElement = {
    type: ‘customElement’,
    render: renderSlider
};

instance.UI.annotationPopup.update([newCustomElement]);

This works when rendering the DOM element, but if I instead do the following:

const Slider = () => {
    return (
        <input
            type=“range”
            onInput={() => { /* Do something */ }}
        >
    );
}

const newCustomElement = {
    type: ‘customElement’,
    render: () => <Slider />
};

instance.UI.annotationPopup.update([newCustomElement]);

Nothing appears in the context menu.

system · January 7, 2026, 10:07pm

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

It seems like you’re experiencing an issue with rendering a custom element using JSX in the WebViewer’s context popup menu. This can happen due to how WebViewer handles rendering of custom elements. WebViewer expects a direct DOM element or a React element that can be directly rendered. When using JSX, make sure that the component is correctly set up to handle updates and rendering within WebViewer’s environment.

Some things you can try:

Ensure that the JSX component is a valid React component and can be rendered by React as expected.

Check if your JSX component needs to trigger re-renders by using hooks like useEffect to manage updates when props or state changes.

Consider using WebViewer’s built-in components like Stateful Button or Custom Button if they fit your needs better.

Verify that the component is correctly registered and updated in the WebViewer’s UI lifecycle.

Here are some resources that might help you:

Handling re-rendering of Custom Elements: This resource explains how to manage updates for custom elements in WebViewer.

Customizing WebViewer UI Popups: Learn more about customizing popups in WebViewer, which might help in integrating your custom elements.

Get Started with Apryse WebViewer SDK in a React Project: Understand how to integrate WebViewer with React, which might help in resolving JSX rendering issues.

Custom Elements with Polyfill: This FAQ might provide insights if there are compatibility issues with polyfills.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

darian.chen · January 8, 2026, 3:47pm

Hello Daniel,

Thank you for contacting Apryse Forums.

I’m able to see a slider when using your JSX code. Can you reproduce this issue using our React Sample?

Regards,

Darian