Alter242 is a lightweight UI framework that converts a simple syntax into frontend elements.
onClickYou can install Alter242 via NPM:
npm install alter242
Or include the script in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/alter242"></script>
<!DOCTYPE html>
<html>
<head>
<script defer src="path/to/miniUI.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<h1>Alter242 Framework Demo</h1>
<div id="app"></div>
</body>
</html>
document.addEventListener("DOMContentLoaded", () => {
const ui = new MiniUI("app");
ui.registerComponent('button', {
template: `<button>{{ text }}</button>`,
onMount: () => console.log('Button Mounted!'),
onDestroy: () => console.log('Button Destroyed!')
});
ui.registerComponent('user-card', {
template: `
<div class="card">
<h3>{{ name }}</h3>
<p>Age: {{ age }}</p>
</div>
`,
onMount: () => console.log('User Card Mounted!'),
onDestroy: () => console.log('User Card Destroyed!')
});
// Set global styles
ui.setGlobalStyles({
'.card': {
'border': '1px solid #ddd',
'padding': '10px',
'margin': '10px',
'border-radius': '5px',
'box-shadow': '2px 2px 5px rgba(0,0,0,0.1)'
},
'.fadeIn': {
'animation': 'fadeIn 1s ease-in-out'
},
'@keyframes fadeIn': {
'from': { 'opacity': 0 },
'to': { 'opacity': 1 }
}
});
ui.registerRoute('/', `
Table:
row=3, column=3, border=1px solid black
Button:
text=Click Me, color=blue, onclick=Hello World!
Link:
text=Go to About, to=about
Card:
title=Welcome, content=This is a card with nested components., ui-animate=fadeIn
List:
items={{items}}
UserCard:
name=John Doe, age=30
`);
ui.registerRoute('about', `
Input:
placeholder=Type your name, model=username
Link:
text=Go Back, to=/
`);
ui.loadRoute();
// Example of custom event
ui.root.addEventListener('Hello World!', () => {
alert('Button was clicked!');
});
// Fetch data and update state
ui.fetchData('https://jsonplaceholder.typicode.com/todos', 'items');
});
This project is licensed under the MIT License.
FAQs
A lightweight frontend UI framework using Vanilla JavaScript
We found that alter242 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.