# Helper Preview Wiring
URL: https://pro.rv-grid.com/guides/gantt/features/helper-preview-wiring/
Source: src/content/docs/guides/gantt/features/helper-preview-wiring.mdx
Description: How Gantt helper source previews connect the docs examples page to the runnable Feature Recipes demo.
The Gantt helper preview wiring is implemented. It connects the examples documentation, source-code preview cards, and the runnable `gantt-example-recipes` demo so each packaged helper can be inspected from docs and opened in the demo portal.

This is documentation and demo infrastructure. It does not change the Gantt runtime API.

## What Is Wired

The [Gantt Examples](../../examples/) page renders `GanttExampleHelperSources`, which reads the `gantt-helper-sources` widget category and shows each helper as a card with:

- grouped tags;
- the registered source path;
- an "Open preview" link;
- an expandable inline source preview.

Each preview link targets the Feature Recipes demo with the helper path in the `file` query parameter:

```text
/gantt-example-recipes/ts?file=<helper-source-path>
```

The default external demo origin is `https://demo.rv-grid.com`, and docs builds can override it with `PUBLIC_DEMO_PORTAL_URL` or `DEMO_PORTAL_URL`.

## Registered Helper Sources

The helper source cards are declared in `apps/demos/src/docs-widgets.ts` under the `gantt-helper-sources` category.

Current helper previews include:

- context menu extensions;
- feature helper examples;
- GraphQL adapter;
- grid projection examples;
- persistence examples;
- PostgreSQL persistence;
- print/PDF recipe;
- REST adapter;
- validation recipes.

`docs-widgets.ts` resolves each source file through `apps/demos/src/catalog/source-registry.ts`, which imports raw portal component files and raw Enterprise Gantt example files. Missing source files fail during widget creation instead of rendering broken preview cards.

## Demo Registration

The `gantt-example-recipes` demo is registered in `apps/demos/src/catalog/demo-catalog.ts`.

Its TypeScript, React, Vue, and Angular variants include the shared recipe demo files plus `GANTT_EXAMPLE_HELPER_FILES`. Those helper entries are marked read-only, so the demo can expose packaged source files without treating them as user-editable sandbox files.

Framework preview routes are also registered:

- React: `apps/demos/src/preview/react/lifecycles.tsx`;
- Vue: `apps/demos/src/preview/vue/lifecycles.ts`;
- Angular: `apps/demos/src/preview/angular/lifecycles.ts`.

## Runtime Companion

The runnable companion demo uses `apps/portal/src/components/gantt/GanttExampleRecipesShared.ts` to compose the exported helper recipes into a visible Gantt scenario. The source-reference list in that shared file points back to representative Enterprise helper files, so docs and demo code stay aligned.

Integration-only helpers, such as REST, GraphQL, PostgreSQL, JSON snapshot, and print/PDF recipes, route to the same Feature Recipes demo. They are primarily source previews because their real backends or browser print flows are application-owned.

## Source References

- `apps/portal/src/content/docs/guides/gantt/examples/index.mdx`
- `apps/portal/src/components/gantt/GanttExampleHelperSources.astro`
- `apps/demos/src/docs-widgets.ts`
- `apps/demos/src/catalog/source-registry.ts`
- `apps/demos/src/catalog/demo-catalog.ts`
- `apps/portal/src/components/gantt/GanttExampleRecipesShared.ts`
- `packages/enterprise/gantt-recipes/`
