Goodway is a minimal and efficient JavaScript component library designed to simplify UI development. With a size of just 410 bytes, Goodway provides a structured way to create reusable components with built-in support for props, templates, and modularity.
- 🪶 Ultra-lightweight - Only 410 bytes!
- ⚡ Simple API - Easy-to-use component structure.
- 📦 Modular - Components are self-contained and reusable.
- 🏗 Props System - Pass dynamic data easily.
- 🖼 Template-based Rendering - Define UI structure with placeholders.
Goodway requires no installation! Simply include the Goodway core script and your component files in your HTML project. You can use a CDN or host the files yourself.
import createApp from "//unpkg.com/goodway";A Goodway component is created using createApp(), which defines the
component’s name, props, and template.
import createApp from "//unpkg.com/goodway";
export default createApp(() => {
return {
name: "hero-component",
props: {
title: "Designer, Front-end Developer & Mentor",
description:
"I design and code beautifully simple things, and I love what I do.",
image:
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/640px-Cat03.jpg",
},
template: `
<section class="hero">
<div class="hero-content">
<h1>{title}</h1>
<p>{description}</p>
</div>
<div class="hero-avatar">
<img src="{image}" alt="Your Avatar" />
</div>
</section>
`,
};
});To use a Goodway component, add it to your HTML file and ensure it is properly imported.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Goodway Example</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<hero-component
title="Developer & Mentor"
description="I love creating simple and elegant web solutions."
image="https://example.com/avatar.jpg"
></hero-component>
</div>
<script type="module" src="./components/hero.js"></script>
</body>
</html>- Minimal Footprint - It’s super lightweight and does not bloat your project.
- Easy to Use - Define, import, and use components seamlessly.
- Scalable - Create a structured UI with reusable components.
MIT License. Feel free to use and contribute!
Happy coding! 🚀