GETTING STARTED
HTML5 developer guide
Editable HTML, Tailwind CSS 4 styles 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 node scripts/serve.mjs with Node
installed and visit localhost:5187. 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-tailwind:data and files in IndexedDB
navrenza-html-tailwind-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.