The Web App template is a component-based progressive web app starter built on zuix.js, zKit, and Eleventy that produces an installable, offline-capable mobile-style web app with a side drawer and Material Design UI. It is released under the zuix.js project and is based on the zuix-web-starter scaffolding.
What is the Web App template?
The Web App template is a starter project that scaffolds a mobile app-style website with a navigation drawer, collapsible header, FAB menu, and Material Design UI. It takes Markdown content and zuix.js component definitions as input, and generates a static, installable PWA that can be searched and read offline. The template runs on Node.js 20 and uses Eleventy for static site generation, with zuix.js handling component logic and zKit providing Material Design components.
Key Features
- Navigation drawer — A collapsible side menu pattern that works on both mobile and desktop layouts.
- Material Design UI — Pre-styled components from zKit, following Google's Material Design guidelines.
- Search page — A built-in internal search engine that lets users find content within the site.
- RSS feed — Outputs an RSS feed, making the app suitable for blogs, news, or podcast-style content.
- Example web components — Includes sample zuix.js components that show how to structure and reuse UI pieces.
- Progressive Web App — The generated site is installable and works offline, meeting PWA requirements.
- Integrated content editor — A built-in editor so content can be updated directly from the app without a separate CMS.
Who should use the Web App template?
- Web developers who want a pre-configured starting point for a component-based PWA with Material Design and don't want to set up the build toolchain manually.
- Content publishers who need an app-like reading experience with search, RSS syndication, and offline access for articles or news.
- zuix.js learners who can study the example components and the wiring of the drawer, search, and PWA features to understand the library's conventions.
Use cases for the Web App template
- Building an installable mobile web app: Scaffold a site with a side drawer and FAB menu that users can add to their home screen.
- Creating an offline-first news or blog app: The combination of search, RSS, and offline support suits content-driven apps that need to work without a connection.
- Prototyping an app-like interface: Use the template as a base to mock up Material Design screens and navigation flows before adding custom logic.
How does the Web App template work?
The template is a starter based on zuix-web-starter. You clone the repository, install dependencies, and run the build with Node.js 20. Eleventy compiles Markdown content into static pages, zuix.js renders web components on the client, and the resulting site is a PWA that loads from a service worker, enabling offline use.
FAQ
Does the Web App template work offline?
Yes. The template generates a progressive web app that is installable and includes offline support, so once the site is loaded, its content remains accessible without a network connection.
What version of Node.js does the Web App template require?
The template requires Node.js 20 to run the build tooling. Make sure your development environment is using Node 20 or newer.
What static site generator does the Web App template use?
The template uses Eleventy (11ty) to generate the static HTML pages from Markdown content. zuix.js handles the component-based UI layer on top.
