GETTING STARTED
HTML5 developer guide
Editable HTML, Bootstrap 5 CSS and readable native JavaScript.
HTML developer documentation
Detailed HTML setup, native JavaScript customization, API integration and a runnable mock backend.
Open HTML documentation Mock backend guide1. Upload and run
Copy the root HTML files, assets/, images/ and
email-templates/ into your hosting directory. Open index.html.
There is no server-side build or React runtime. Subdirectory hosting works because links and
assets are relative.
For local preview use any static server, or run npm run preview with Node
installed and visit localhost:5185. The shipped pages
also open directly; some browser storage and clipboard features require localhost or HTTPS.
2. Customize a page
Copy starter.html. Change its title and main content. Update the
sidebar link in the HTML, and add its page entry to assets/js/catalog.js for
global search/top navigation.
Most showcase markup is directly editable in each HTML file. Connected operations pages are
rendered by workflows.js; edit their field models/render functions there.
Page-specific examples live in examples.js.
3. Appearance
Open Appearance for ten themes, dark mode, RTL, top navigation, icon-only sidebar, header styles and independent sidebar backgrounds.
Colors use the same CSS variables as the React edition: --accent,
--surface, --canvas, --text, --line and
--chart-1 through --chart-5. Put custom overrides in
assets/css/html.css. Readable source style references are in
source/styles/.
4. Connect your backend
The browser demo stores records under navrenza:html:data and files in IndexedDB
navrenza-html-files. Replace the mutation/storage helpers in
core.js and workflows.js with authenticated API calls.
Validate permissions, ownership, stock, seat limits and uploaded content on the server. Use server audit records and payment-provider webhooks as the source of truth. Login, invitations, checkout and billing examples do not create accounts, send email or collect payments.
File map
| File | Purpose |
|---|---|
| assets/js/preferences.js | Saved theme and layout preferences |
| assets/js/catalog.js | Page directory, sample data and images |
| assets/js/core.js | Navigation, header, tables, dialogs and storage helpers |
| assets/js/workflows.js | Team, tickets, files, billing, audit, customers, projects, orders and stock |
| assets/js/examples.js + enhancements.js | Forms, wizard, cart, editor, cropper, calendar, media and UI examples |
| assets/css/html.css | Native HTML edition additions and custom overrides |
| source/page-manifest.json | Route-to-HTML filename map |
Scope and integration notes
- Chart pages include responsive SVG sample visuals; change their data/markup or integrate your preferred chart library. They do not include the React chart engine.
- Rich text uses a native editable surface; searchable controls use native input/datalist examples. They are functional HTML counterparts, not bundled React plugins.
- Google Maps needs your own provider/API configuration. Email layouts are static HTML examples.
- Profile and content pages include presentation examples. Production messaging, notifications, rich content persistence and other service actions require your APIs.
- Demo data is local to this HTML edition and does not sync with the React app.
Reusable helpers
Navrenza.notice('Saved successfully');
Navrenza.modal('Edit record', formMarkup, values => saveRecord(values));
Navrenza.table(container, { rows, columns, label: 'Records' });
NavrenzaAppearance.update({ theme: 'ocean', dark: true });
Keep user-entered text escaped with Navrenza.escape. Use safe text nodes for
content from APIs.