Skip to main content
The export (cometchat-builder-angular.zip) is a complete Angular application, packed flat — package.json and src/ sit at the archive root, so the tree below starts at the folder you unzip it into. This guide helps you navigate the structure so you know exactly where to make changes.
cometchat-builder-angular
src
app
cometchat-app.component.ts
app.component.ts
app.config.ts
app.routes.ts
index.html
main.ts
styles.css
angular.json
package.json
README.md

Key Files


Key Folders

app/config/

Everything the Builder controls lives here. This is the first place to look when changing behavior.

app/components/

Each folder is a standalone Angular component with its own template and stylesheet.
components

app/pages/

The application shell — only needed if you run the export as its own app. When you embed <cometchat-app />, the home page is the layout it renders; login and credentials are not used.

app/services/

Shared state: which conversation is active, navigation between panels, authentication, and toasts.

app/i18n/

Translation files for multi-language support. Add or modify JSON files here to customize text. See Localization.

Quick Reference: Where to Customize

Prefer using settings and CSS variable overrides. For extensive changes, wrap the UI Kit components in your own rather than modifying these files directly — it keeps a future re-export from overwriting your work.

Further Reading

The export ships its own reference material under project-info/:

Next Steps

UI Kit Builder Settings

Configure feature toggles and behavior

Customizations

Modify component inputs, styling, and behavior

Theming

Customize colors, typography, and styling

Localization

Add multi-language support