A unified Freshworks Platform 3.0 sample that showcases Crayons v4 UI components in one ticket-sidebar app. Replaces six near-duplicate per-product clones (v2 + v4 × Freshdesk/Freshservice/Freshsales) with a single catalog BrightPath Support developers can browse interactively.
Platform: 3.0 · FDK: 10.1.2 · Node: 24.11.0 · UI: Crayons v4
| Category | Components |
|---|---|
| Forms | fw-input, fw-textarea, fw-select, fw-checkbox, fw-radio-group, fw-toggle, fw-datepicker |
| Feedback | fw-toast, fw-spinner, fw-skeleton, fw-label |
| Layout | fw-tabs, fw-popover, fw-tooltip |
| Actions | fw-button |
Each section includes a live demo and a short description. Toast is triggered by button; spinner appears during a simulated async load.
git clone https://github.com/freshworks-developers/crayons-samples.git
cd crayons-samples
fdk run- Open a ticket in Freshdesk with
?dev=true. - Click Crayons Component Catalog in the ticket sidebar.
- Switch category tabs (Forms, Feedback, Layout, Actions) and interact with each demo.
fdk validate
fdk pack.
├── manifest.json
├── app/
│ ├── views/ticket-sidebar.html
│ ├── scripts/ticket-sidebar.js
│ └── styles/
├── web/ # Standalone browser demo (legacy, not FDK-bound)
├── README.md
└── USECASE.md
Components load from the official CDN:
<script type="module" src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.esm.js"></script>No npm install required for the UI layer.
- Platform: Freshworks Platform 3.0
- Runtime: Node.js 24.11.0 · FDK 10.1.2
- UI: Crayons v4
- Crayons documentation
- events-method-samples — unified demo pattern this repo follows
- USECASE.md