A Freshworks meta app is a standard Node project. Dependencies go in package.json, and the bundler resolves import statements from anywhere under app/ and config/.
Install everything you will need for the rest of this tutorial in one go.
Install packages
From the app root:
npm install @freshworks/crayons@^4| Package | Why |
|---|---|
| @freshworks/crayons | Freshworks UI library. Makes your app look and feel like a native part of Freshworks products |
What is Crayons?
Crayons is Freshworks' open-source UI component library. It provides ready-made components (buttons, inputs, modals, toasts, tabs, and more) styled to match the Freshworks product UI. When you use Crayons, your app blends in with Freshdesk instead of looking like a third-party add-on.
This tutorial uses Crayons React wrappers (imported from @freshworks/crayons/react) for components like FwButton, FwInput, and FwInlineMessage.
Useful links:
- Crayons component playground: browse and try every component
- Crayons on npm: package details and versions
- Using Crayons in Freshworks apps: developer docs integration guide
Verify
Check that the packages appear in package.json:
npm ls @freshworks/crayonsYou should see it listed without errors.
Why install now?The next steps (installation parameters, placeholders, and UI) all import from these packages. Installing them upfront avoids bundler errors like Failed to resolve import "@freshworks/crayons/css/crayons-min.css".