Frontend
Reference for frontend customization patterns in SolidX.
Frontend Customization Catalog
Use this section as the source of truth for where each customization type belongs and how it should be wired in the UI module system.
Mental Model
The SolidX frontend is designed so that custom UI code stays close to the module that owns the business feature.
- Use metadata-driven extensions when you are augmenting generated admin screens.
- Use bespoke UI when you need full route-level control.
- Keep ownership module-local so discovery, registration, and maintenance stay predictable.
The UI stays flexible because SolidX combines generated structure with module-owned custom code.
Customization Modes
Metadata-Driven Extensions
Use buttons, widgets, and event hooks to extend generated forms, lists, trees, and kanban views without replacing them.
Bespoke Screens
Create custom route-level pages when generated admin views are not the right fit for the workflow.
State and API Integration
Register Redux, RTK Query, and Solid HTTP helpers at the module level so custom UI stays composable.
Custom Views
Choose between metadata-driven custom widgets and bespoke route-level pages for frontend customization work.
UI Module Convention
In the current SolidX frontend model, custom frontend code should be organized inside module folders under solid-ui/src/<module-name>/.
Recommended structure:
solid-ui/src/
├── App.tsx # Application shell and providers
├── AppRoutes.tsx # Route composition entry
├── solid-ui-modules.ts # Module discovery and runtime aggregation
├── <module-name>/
│ ├── admin-layout/ # Metadata-driven admin extensions
│ ├── custom-layout/ # Bespoke route-level pages and shells
│ ├── redux/ # Module-owned reducers, middleware, RTK Query APIs
│ └── <module-name>.ui-module.ts # Module manifest for routes and extensionsUse these structure conventions:
admin-layout/for metadata-driven admin extensions such as buttons, event handlers, and widgetscustom-layout/for bespoke route-level UIs and custom application shellsredux/for module-owned RTK Query APIs, reducers, and middleware<module-name>.ui-module.tsas the manifest that registers routes, extension components, extension functions, reducers, and middleware
AppRoutes.tsx should live beside App.tsx at solid-ui/src/AppRoutes.tsx, and should consume aggregated module routes rather than manually registering every feature route inline.
Core API Convention
For extension/frontend API calls, use Solid HTTP helpers from @solidxai/core-ui:
solidGetsolidPostsolidPutsolidPatchsolidDeletesolidAxios
Use endpoint paths like /resource and do not hardcode /api in request paths.
Extension Component Types
- Form View Buttons
- List View Buttons
- Extension UI Guidelines
- Custom Widgets
- Form View Field Widgets
- List View Field Widgets
- Kanban Card Widgets
Extension Function Types
Bespoke UI
Use Bespoke Frontend UI for full route-level UIs under solid-ui/src/<module-name>/custom-layout/....