Skip to content

Feature Request: Expose React/ReactDOM globally for advanced custom_js usage #2619

@slovx2

Description

@slovx2

Feature Request: Expose React/ReactDOM globally for advanced custom_js usage

Problem

Chainlit supports custom_js for UI customization, but building complex interactive components requires React. Currently, there's no way to
access the React instance that Chainlit uses internally.

Use Case

Building custom React components (e.g., fixed-position buttons, custom panels) that integrate seamlessly with Chainlit's UI:

// In custom_js file
function MyCustomUI() {
  const { useState } = window.React;
  const [count, setCount] = useState(0);
  return React.createElement('button', { onClick: () => setCount(count + 1) }, count);
}

Proposed Solution

Add an optional config to expose React globals:

[ui]
expose_react = false  # default: disabled for safety

When enabled:
// frontend/src/main.tsx
if (config.ui?.exposeReact) {
  window.React = React;
  window.ReactDOM = ReactDOM;
}

Benefits

  • ✅ Extends existing custom_js capability without breaking changes
  • ✅ Opt-in (disabled by default)
  • ✅ Enables advanced users to build richer custom UIs
  • ✅ Similar to WordPress Gutenberg, many plugin systems

Alternative

If this approach doesn't fit Chainlit's vision, would you accept documentation on maintaining a fork with this feature?


I'm happy to submit a PR if this feature is something you'd consider merging.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions