How Ethora has built its Chat Component for npm.js

At Ethora, we have always seen modular chat developing experiences as a core of our technological vision. We’ve been working on it, expanded our platform, and realized that a flexible, production-ready component can be a great advantage. Just a simple, reliable, scalable plug-and-play set that can be embedded directly into JavaScript environments. By decoupling our core chat logic and UI, we’ve built an npm-hosted component that allows developers to integrate sophisticated messaging into any application in minutes.

In this article, we’ll guide you through the entire process of planning and building this developer’s package, specifically designed for optimal performance when creating communication tools.

Why and How We Created Our NPM Chat Package

The initial idea is simple: you don’t have to reinvent the messaging wheel every time you launch a product. We decided to create an npm package and extracted it from the Ethora engine, ensuring it’s suitable for JavaScript and React developers. Put simply, it’s a simplified and faster version of Ethora that includes messaging architecture, UI, and all needed components.

To ensure broad utility, we designed the npm package for chat integration to be backend-agnostic, supporting diverse authentication flows and highly granular UI customization.

Ethora’s npm package includes:

• UI Components
• Global State Store (Redux)
• XMPP Protocol Integration
• Networking Logic & Configuration

Unlike a standard GitHub clone, this component functions as a single, versioned module. While our full SDK is available for those building from the ground up, the npm component is the “express lane” for adding chat to existing web applications.

Planning and Design Considerations

Before writing the first line of code, we defined clear goals:

• The component must offer production-ready stability
• It must remain lightweight and modular
• It should be fully customizable for different branding requirements
• It must seamlessly integrate with WebSocket- or API-driven messaging backends

Additionally, we explored problems developers typically face when integrating interfaces and understood that the most common ones are performance bottlenecks, high rendering costs, and the need for scalable state management. This knowledge helped us create a clear architectural blueprint that balanced usability with technical robustness.

Setting Up the Development Environment

It was critical to ensure that we could set up npm package logic clearly, with scripts dedicated to building, linting, and testing. That’s why, before we wrote a single line of TypeScript, we established four architectural pillars:

• Production Stability: Zero-compromise reliability for enterprise-grade apps 
• Modular Footprint: Lightweight enough to avoid bundle bloat; tree-shakable by design
• Thematic Flexibility: Deep-link styling to match any brand identity.
• Protocol Agnostic: Seamless integration with WebSocket & API-driven backen

To move on, we identified common friction points, such as rendering bottlenecks and state synchronization. This helped us develop an architectural blueprint that balances developer convenience with technical robustness.

Developing and Customizing the Chat Component

When the first steps were completed, it was time to implement the library. We needed to create an npm chat module that adhered to best practices in UI architecture, while ensuring that developers have full control over customization. That’s why features like message list, input bar, typing indicators, and others in Ethora are independent units. Thus, developers can override styles, inject extensions, or modify behaviors.

Moreover, we also introduced a custom chat npm package setup for those who need even more control. This allowed teams to extend the package while staying aligned with Ethora’s core updates.

Publishing and Managing Our Package

To check the library’s readiness for real-world use, we tested compatibility across multiple frameworks, validated bundling outputs, and ensured that tree-shaking worked properly. When everything was ready, we proceeded to publish the npm package, paying careful attention to versioning and semantic-release strategies.

Over time, the package evolved into a versatile chat app npm package, supporting public releases for open-source components and internal versions for company-specific needs. For enterprise projects requiring confidentiality, we created workflows that allowed teams to create private npm package variants.

Publishing Process and Version Control

For publishing, we enhanced standard npm best practices with automation. We implemented CI/CD pipelines that performed lint checks, unit tests, build validation, and changelog generation before initiating the final step to deploy npm chat module updates.

Versioning was managed with semantic rules, ensuring that breaking changes, new features, and patches were clearly communicated through version increments.

Integrating the Chat Component into Applications

After publishing, the next step was validating real-world integrations, from lightweight SPAs to enterprise dashboards. Thanks to the modular design, Ethora’s npm.js chat integration feels native to the host app.

The package supports custom themes, message rendering logic, and dynamic configuration, making it suitable for varied use cases, from social networking to customer support tools. Comprehensive documentation and live code examples simplify setup, reducing the onboarding process from weeks of development to just a few lines of code.

Conclusion

Building our npm.js chat component has been an exciting journey and has contributed to modular architecture, usability design, and open distribution. We share our experience to encourage developers to explore reusable packages and build new tools for the JavaScript ecosystem. Such instruments make the development process easier: you can create solutions faster, without sacrificing the ability to tailor them to your needs. Try how it works with Ethora.

More from Ethora: self-hosted chat server on AWS, Ethora AI SDK.