New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

miniui-frame

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Package was removed

Sorry, it seems this package was removed from the registry

miniui-frame

A lightweight frontend UI framework using Vanilla JavaScript

unpublished

latest

Source

npm

Version: 1.0.0

Version published: last year

Maintainers: 0

Created: last year

Source

mini-UI-frame Framework

mini-UI-frame is a lightweight UI framework that converts a simple syntax into frontend elements.

🚀 Features

Supports Tables, Buttons, Inputs, Modals, Dropdowns, Cards, Lists, and Images
Handles event listeners like onClick
Implements two-way data binding
Reactive state management
Custom components
Custom directives
Built-in API fetching
Virtual DOM for optimized rendering
Client-side routing
Nested components
Custom events
Built-in animations
Global styles
Dynamic data fetching
Component-based architecture

📦 Installation

You can install mini-UI-frame via NPM:

npm install mini-UI-frame

Or include the script in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/mini-UI-frame"></script>

🛠 Usage

Setting Up Your Project

Create a new project directory:

mkdir my-mini-ui-frame-project
cd my-mini-ui-frame-project

Initialize a new NPM project:
```
npm init -y
```
Install mini-UI-frame:
```
npm install mini-UI-frame
```

Creating Your First Component

Create an HTML file:

<!-- filepath: /c:/Users/pratikacharya/Desktop/PythonLib/my-mini-ui-frame-project/index.html -->
<!DOCTYPE html>
<html>
<head>
    <script defer src="node_modules/mini-UI-frame/src/miniUI.js"></script>
    <script defer src="script.js"></script>
</head>
<body>
    <h1>mini-UI-frame Framework Demo</h1>
    <div id="app"></div>
</body>
</html>

Create a JavaScript file:

// filepath: /c:/Users/pratikacharya/Desktop/PythonLib/my-mini-ui-frame-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');
});

Running Your Project

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 mini-UI-frame project in action.

📄 License

This project is licensed under the MIT License.

Keywords

FAQs

What is miniui-frame?

Is miniui-frame well maintained?

Package last updated on 04 Mar 2025

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.

Install

miniui-frame

mini-UI-frame Framework

🚀 Features

📦 Installation

🛠 Usage

Setting Up Your Project

Creating Your First Component

Running Your Project

📄 License

Keywords

Related posts

Supply Chain Attack on Axios Pulls Malicious Dependency from npm

TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware