Simple Way is a lightweight JavaScript/TypeScript framework to easily create DOM components: View, Button, Form, Input, Text, Link, Form, Span, List, Modal, Tab, Toast, Toat Container, Navbar , Notifications
It’s simple, fast, and usable in any front-end project.
npm install github:MaelProgramming/simple-wayFrom npm (once published)
npm install @maelgruand/simple-way@1.0.5<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Simple Way</title>
</head>
<body>
<script type="module">
import { View, Button, Input, Text, NavBar, Toast }
from "https://unpkg.com/@maelgruand/simple-way/dist/index.js";
// Create main container
const app = View("app");
document.body.appendChild(app);
// Input field
const input = Input("name", "text");
// Button with click event
const btn = Button("btn1", () => {
alert(`Hello ${input.value}`);
Toast(`Hello ${input.value}`, "success");
}, "Click me");
app.appendChild(input);
app.appendChild(btn);
// Add a simple navigation bar
const navbar = NavBar("mainNav", [
{ label: "Home", href: "#" },
{ label: "About", href: "#about" },
{ label: "Contact", href: "#contact" }
]);
document.body.prepend(navbar);
</script>
</body>
</html>| Component | Description |
|---|---|
View(id) |
Creates a <div> with a specific id |
Text(id, content) |
Creates a <p> element with given content |
Input(id, type) |
Creates an <input> of type text, password, checkbox, etc. |
Button(id, functionToExecute, content) |
Creates a <button> with a click callback and text |
Form(id, method, onSubmit) |
Creates a <form> with a method (get/post) and onsubmit callback |
Link(id, href) |
Creates an <a> element with a link |
Span(id, content, className) |
Creates a <span> element with text and CSS class |
List(id, items, ordered) |
Creates a <ul> or <ol> list with items |
Modal(id, title, content) |
Creates a modal window with title and content |
Tab(id, tabs) |
Creates a tabs component with multiple tabs |
Toast(message, type) |
Shows a temporary notification (success, error, info) |
ToastContainer() |
Creates a container for toasts |
NavBar(id, links, background, color) |
Creates a sticky navigation bar with links and optional styling |
That framework include Notification creation using:
import { Notification } from "@maelgruand/simple-way";
Notification.create("Hello !", {
body: "That's a notification.",
icon: "/icon.png" // your own icon of your page
}, () => {
console.log("Notification cliquée !");
});| Element | CSS Classes |
|---|---|
| Buttons | .muil-btn, .muil-btn-primary, .muil-btn-secondary |
| Inputs | .muil-input |
| Modals | .muil-modal-overlay, .muil-modal-box |
| Toasts | .muil-toast, .muil-toast-success, .muil-toast-error, .muil-toast-info |
| Navbar | .muil-navbar |
| Tabs | .muil-tabs-header button, .muil-tabs-header button.active |
Added database provider in core/Elements.ts
-
Introduced the createDatabase function to initialize and connect a database.
-
Currently supports IndexedDBDriver as the default provider.
-
Allows specifying the database name (providerName) and stores/collections (stores).
-
Returns a ready-to-use Database instance with all CRUD operations.
import { DB } from './index.ts'
const db = DB("MyAppDB", ["users", "posts"]);
await db.insert("users", { name: "YourName", age: 18 })
