A small, MIT-licensed teaching repository that shows what React on the Salesforce Platform actually buys you compared to Lightning Web Components, using a single focused use case: an interactive Sales Pipeline Kanban board with optimistic drag-and-drop, a weighted forecast sidebar, and inline edit on Amount.
It is not a recipes collection (see trailheadapps/multiframework-recipes)
and not a full sample app (see the Property Management Multi-Framework App).
It sits between: one app, one user story, every relevant Multi-Framework
pattern touched exactly once.
Target reader: A Salesforce developer with 1-2 years of LWC experience who has never written a React app on the platform. Reads end-to-end in 30 minutes; walks away knowing when and how to reach for Multi-Framework.
See docs/TEACHING-NOTES.md for the full
rationale. Short version: drag-and-drop between Kanban columns is the
canonical "this is awkward in LWC" example, and a single feature can
exercise the whole @salesforce/sdk-data surface (queries, mutations,
client-side state) without dragging in CPQ or Service-Cloud datamodel
overhead first.
- Multi-Framework is in open beta (Spring '26). Scratch orgs and sandboxes only. Production deployment is not supported.
- Org default language must be English.
- The CLI plugin
@salesforce/plugin-ui-bundle-devis required for the local dev server. - A handful of beta-template quirks are worked around in this repo:
tsconfig path mappings, a duplicate Vitest config, and (where
applicable)
patch-packagepatches against@salesforce/ui-bundle. Seedocs/SETUP.mdfor the symptoms, the fix, and the package versions this repo was built against. Expect to revisit them as the beta evolves. - App Launcher integration via UIBundle-pointing tabs and CustomApplications is not in this repo. The metadata schemas haven't stabilised in the beta. The primary run path is the local dev server with a GraphQL proxy to your org (see Setup below).
See docs/SETUP.md for prerequisites, install,
permission set deploy, seed data, and the dev-server flow. TL;DR:
git clone https://github.com/rammc/sf-react-pipeline-kanban.git
cd sf-react-pipeline-kanban
# 1. Install UI bundle dependencies
cd force-app/main/default/uiBundles/pipelineKanban
npm install
cd ../../../../..
# 2. Deploy and assign the permission set
sf project deploy start --source-dir force-app/main/default/permissionsets --target-org <alias>
sf org assign permset --name PipelineKanban_App --target-org <alias>
# 3. Seed demo data (idempotent, safe to re-run)
sf apex run --file scripts/seed-opportunities.apex --target-org <alias>
# 4. Start the dev server
cd force-app/main/default/uiBundles/pipelineKanban
sf ui-bundle dev --target-org <alias> --name pipelineKanban --openBrowser opens; six (or however-many-your-org-has) stage columns of Opportunities render; drag a card, edit an Amount, watch the forecast update.
Three layers, one direction of data:
flowchart LR
Org["<b>Salesforce Org</b><br/><small>Sandbox or Scratch Org</small><br/><br/>Opportunity records<br/>StageName picklist<br/>GraphQL UI API"]
Dev["<b>Local Dev Server</b><br/><small>sf ui-bundle dev</small><br/><br/>Vite + ui-bundle plugin<br/>Proxy with patch-package"]
Browser["<b>Browser</b><br/><small>React UI Bundle</small><br/><br/>SDK · Hooks · Store<br/>KanbanBoard + Components"]
Org -->|"HTTPS<br/>Bearer token"| Dev
Dev -->|"fetch<br/>localhost:5173"| Browser
classDef tier fill:#fbfaf6,stroke:#1a1a1a,stroke-width:1.5px,color:#1a1a1a
class Org,Dev,Browser tier
docs/ARCHITECTURE.md zooms into the browser
tier with its own flowchart, adds four sequence diagrams (initial
load, drag-and-drop with rollback, inline edit, filter / forecast),
documents the two-route structure (board + opportunity detail),
covers the visualization patterns from Phases 7 and 8 ("Visualisation
as workflow navigation"), and the load-bearing design decisions:
manual types vs codegen, client-side filtering, where the optimistic
update lives, why zustand for filter and theme state.
The git log is the table of contents. Read the commits in order; each one corresponds to one phase of the build, ends in a runnable state, and only adds what that phase teaches:
| Phase | Commit subject | What's introduced |
|---|---|---|
| 1 | chore: scaffold Multi-Framework UIBundle … |
Project bootstrap, deps, template, no UI logic |
| 2 | feat: add Data SDK client, GraphQL queries, and typed hooks |
createDataSDK, GraphQL strings, three minimal hooks, six unit tests |
| 3 | feat: render static Kanban from Salesforce data + verify against live org |
Static board with real data, schema verified against a live sandbox, three plugin bugs found and patched |
| 4 | feat: drag-and-drop stage updates with optimistic UI |
dnd-kit + DragOverlay, optimistic state in KanbanBoard, sonner toast on rollback |
| 5 | feat: filters, weighted forecast, and inline amount edit |
zustand filter store, ForecastSidebar, react-hook-form-driven inline edit |
| 6 | docs: README, architecture notes, and teaching guide |
Tests, error boundary, CI, the full doc set |
| 7 | feat: stage funnel chart in forecast bar |
Recharts integration, click-to-filter funnel as embedded visualisation |
| 8 | feat: close-date heatmap calendar with click-to-filter |
Custom SVG heatmap (no chart library), owner-aware filtering, collapsible. Contrast pattern to Phase 7 |
| 9 | feat: opportunity detail view at /opportunity/:id |
Second route, polymorphic activity query, deep linking, filter state preserved across navigation |
| 10 | feat: theme switcher with light, dark, and retro terminal modes |
CSS-variable token architecture, three themes, no theming library. Retro mode as the architecture's stress test |
git log --oneline and git show <hash> will tell you exactly what
each step touched.
| Excluded | Why |
|---|---|
| Apex triggers, validation rules, custom objects | Out of teaching scope; everything happens through the GraphQL UI API. |
| Authentication code | The SDK + dev-server proxy handle it. |
| TanStack Query / Redux / Apollo Client | Each adds learning surface without showing a Multi-Framework-specific concept. The hooks here are plain useState + useEffect so the data flow is observable. |
| Lightning App Builder integration | Not supported in beta. |
| i18n / l10n | Beta requires English default language. |
| Mobile-specific layouts | Out of scope for an example. |
| Production CI/CD pipelines | The .github/workflows/ci.yml here runs lint + test; no deploy. |
| Agentforce, Marketing Cloud, Service Cloud features | Different teaching repos. |
- Multi-Framework Beta documentation (Salesforce)
trailheadapps/multiframework-recipes: pattern-by-pattern recipes (a step beyond this repo)- Property Management Multi-Framework App: a full sample app (the next step beyond recipes)
MIT. Issues and PRs welcome. There's a deliberately short
.github/ISSUE_TEMPLATE/ set for bug reports, feature requests, and
plain questions. The repo is small enough that a real review fits in
one pass; please keep PRs scoped that way.