FAQ

Do I need a back end or a database? No. The template renders static demo data and runs as a static site (or on Node.js with next start). Connect your own API when you build your application.

Why does a page return 404 on my server? Upload the whole dist/tailwind folder: every page is a folder with its index.html (apps/kanban/index.html), so the server must use index.html as the default document (all servers do by default). No rewrite rule is needed. See Installation.

Can I deploy it in a sub-folder? Yes: ORBIX_BASE=/admin npm run build (see Installation).

Static export or server? Both, from the same code. npm run build writes a static site (every page prerendered at build time, no server needed); npm run build:server and npm start run the same pages on Node.js, where you can add API routes, middleware, server actions or server-side data fetching. The theme, the language and the page scripts run in the browser in both modes (they depend on the visitor's saved preferences).

Pages Router or App Router? App Router: one page.tsx per page in route groups (src/app/(app), (auth), (blank)) with shared layouts.

Does it use jQuery or a CDN? No. Every script and style is compiled locally by Next.js. There are no external requests.

Is TypeScript required? The template is written in strict TypeScript and npm test runs the type check. You can add plain .jsx files if you prefer, but typed props catch most mistakes when you change a component.

How do I change the logo and the app name? The logo is the brand block in src/components/shell/Brand.tsx: change the name there, and replace the ox-i-mark symbol in src/svg/orbix-icons.svg with your own SVG, then run npm run assets. The document title suffix is in src/layouts/usePageDocument.ts and in metadata of src/app/layout.tsx; the favicon is public/favicon.svg.

How do I change the default language? The language comes from the user's saved choice, then from <html lang> in src/app/layout.tsx (en). Change it there (es, pt, fr or ar; for Arabic also set dir="rtl"): the browser loads that language at start. The prerendered HTML stays in English until then (it is covered by the preloader).

How do I remove a language? See Languages.

How do I make dark mode the default? initTheme({ product: { mode: 'dark' } }) in src/core/app.ts (see Theming).

Why do the icons I added not show? Run npm run assets (or npm run dev / npm run build): only the icons referenced in src/ are added to the sprite.

Can I use React state and my own hooks in the pages? Yes. The page views are regular React client components: add state, effects, data fetching and event handlers as usual. The demo pages keep their interactions in small page scripts (src/scripts/) so that the markup stays identical across the Orbix editions.

Can I use Orbix for a SaaS where my customers pay? Yes, with the Extended License. The Regular License covers one end product whose users are not charged.

Where are the source images of the illustrations? The illustrations are inline SVG inside the auth and status components; edit their colors with the design tokens.

Can I use the demo photos in my product? Yes. They are CC0 1.0 or public domain (credits in public/images/CREDITS.json and licensing.txt). To use your own, replace the files in public/images with WebP or JPEG images of the same size, or change the src in the components; avatars fall back to initials when there is no photo.

Why are the page views client components? Every view uses the theme, the saved language and interactive behaviors that only exist in the browser, so it is a client component ('use client'); Next.js still prerenders it to HTML at build time. The route files (page.tsx) and the root layout stay server components: add server-side data fetching there and pass the data to the view as props.

I see "Hydration failed" in the console after my changes. The server HTML (English) and the first browser render must match. Read browser-only values (localStorage, window, the date) in useEffect, not while rendering, as the template does (src/layouts/AppLayout.tsx). The test tests/hydration.test.tsx checks every page.