alter-ui is a lightweight UI framework that converts a simple syntax into frontend elements.
onClickYou can install alter-ui via NPM:
npm install alter-ui
Or include the script in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/alter-ui"></script>
Create a new project directory:
mkdir my-alter-ui-project
cd my-alter-ui-project
Initialize a new NPM project:
npm init -y
Install alter-ui:
npm install alter-ui
Create an HTML file:
<!-- filepath: /c:/Users/pratikacharya/Desktop/PythonLib/my-alter-ui-project/index.html -->
<!DOCTYPE html>
<html>
<head>
<script defer src="node_modules/alter-ui/src/miniUI.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<h1>alter-ui Framework Demo</h1>
<div id="app"></div>
</body>
</html>
Create a JavaScript file:
// filepath: /c:/Users/pratikacharya/Desktop/PythonLib/my-alter-ui-project/script.js
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');
});
Start a local server:
You can use any local server to serve your HTML file. For example, using http-server:
npm install -g http-server
http-server
Open your browser:
Navigate to http://localhost:8080 (or the port specified by your local server) to see your alter-ui project in action.
This project is licensed under the MIT License.
FAQs
A lightweight frontend UI framework using Vanilla JavaScript
We found that alter-ui 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
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.
Security News
OpenSSF has issued a high-severity advisory warning open source developers of an active Slack-based campaign using impersonation to deliver malware.