create-genz-app

Quickly scaffold a new GenZ.js project with a single command.

What is GenZ.js?

GenZ.js is a mini framework for HTML-first interactivity. Add functionality through simple HTML attributes ending with 'z' - no complex JavaScript required!

Quick Start

Create a new GenZ.js app with one command:

npx create-genz-app my-app
cd my-app
npm run dev

That's it! 🎉 Your app will be running at http://localhost:5173

What's Included?

Your new project comes with:

| Feature | Description | | ----------------------------- | ---------------------------------- | | ⚡ Vite | Lightning fast development server | | 🎨 Pre-configured styling | Beautiful starter template | | 📦 GenZ.js | Ready to use interactive framework | | 🔥 Hot reload | See changes instantly |

Project Structure

my-app/
├── index.html          # Main HTML file with GenZ.js examples
├── style.css           # Starter styles
├── public/
│   ├── gen-z.min.js   # GenZ.js framework
│   └── assets/
│       └── logo.svg   # GenZ.js logo
└── package.json

Available Scripts

| Command | Description | | ----------------- | ------------------------ | | npm run dev | Start development server | | npm run build | Build for production | | npm run preview | Preview production build |

Example Usage

The starter template includes a counter example using GenZ.js:

<input letz="count:Number" type="number" value="0" hidez />
<button setz="count:count + 1" class="counter-button">
  Count is <span getz="count"></span>
</button>

How it works:

• letz - Declares a reactive variable
• setz - Sets/updates the variable value
• getz - Displays the variable value
• hidez - Hides the input element

Learn More

| Resource | Link | | -------------------- | ------------------------------------------------------ | | 📖 Documentation | GenZ.js Docs | | 💡 Examples | View Examples | | ⭐ GitHub | Star on GitHub | | 🌐 Website | Official Website |

✅ Requirements

• Node.js 14+
• npm or yarn

📄 License

MIT

Created with ❤️ for the GenZ.js community

Website • Docs • GitHub