zuix.js web starter is the official base starter project for building component-based static websites with zuix.js and the Eleventy (11ty) static site generator, installed through the npx zuix new command.
What is zuix.js web starter?
zuix.js web starter is the base scaffolding for component-based web development with zuix.js and 11ty. It takes a project built from reusable HTML and JavaScript components and outputs a static website via Eleventy's build pipeline. The project requires Node.js v20 and is part of the zuix.js ecosystem, alongside companion templates for web apps and news blogs that share the same CLI installer.
Key Features
- npx installer — Scaffold a new project with
npx zuix new my-project-name; pass-t web-appor-t news-blogto use a sibling template instead. - Component-based development — Structure the site as reusable zuix.js components rather than single-page or multi-page files.
- Eleventy (11ty) static generation — Use the popular static site generator to transform the component source into deployable HTML.
- Node.js v20 requirement — The starter explicitly requires Node.js version 20 or newer to run the build tooling.
- PWA and static-site orientation — The repository metadata lists PWA and static-site among its topics, signaling support for progressive-web-app-style projects.
- Web App template variant — The
web-apptemplate ships a mobile-app layout with side drawer, collapsible header, Material Design UI, internal search engine, and adaptive desktop design. - News Blog template variant — The
news-blogtemplate provides an immersive feed layout for news or blog posts, with "Save for later", share/print, internal search, and adaptive design. - Public demo and docs — The starter includes a hosted demo and documentation site on GitHub Pages.
Who is it for?
- Front-end developers who want a component-based static-site workflow without configuring zuix.js and 11ty from scratch.
- Developers prototyping app-like web UIs who can start from the Web App template to get a side drawer, collapsible header, and Material Design look.
- Bloggers and news publishers who need an immersive reading template with built-in search and save-for-later behavior.
What can you do with zuix.js web starter?
- Indie web developers: scaffold a personal or portfolio site and compose pages from zuix.js components, then build with 11ty to get a static output.
- Product teams: spin up an interactive mobile-style web app demo using the
web-apptemplate's drawer, header, and search features. - Content editors: launch a news or blog site with the
news-blogtemplate, giving readers search, share, print, and save-for-later options.
How does zuix.js web starter work?
- Install Node.js v20 or newer.
- Run
npx zuix new my-project-namein your terminal; add-t web-appor-t news-blogfor a different template. - The CLI downloads the starter and scaffolds a project ready to edit and build with 11ty and zuix.js.
FAQ
What does zuix.js web starter do?
It provides the starting files and build setup for a component-based static website using zuix.js and Eleventy (11ty). You run the npx installer to create a new project, then write and compose zuix.js components in the source tree.
How do I install zuix.js web starter?
Install Node.js v20 or newer, then run npx zuix new my-project-name. The command creates a new project folder based on the starter. To use the web app or news blog variants, append -t web-app or -t news-blog.
What Node.js version is required?
The starter requires Node.js v20 or newer, as stated on the project page. Older Node.js versions may not run the build tooling correctly.
Are there other starter templates available?
Yes, there are three starter templates in the zuix.js ecosystem: the base web starter, the Web App template (Material Design UI, side drawer, collapsible header, internal search), and the News Blog template (feed layout, save-for-later, share/print). All are installed with the same npx zuix new command using a -t flag.
