Flawed - Javascript/Typescript Html Framework

💾 Installation

Package On NPM

npm install @arnavk-09/flawed

Also install 'tslib' if any error comes on .ts

🔑 Features

• Support Dynamic Components
• Full Access To Routes
• Simple AF (Fast)
• Automatically Beatuifies Code
• Handler All Things Yourself
• Logs Everything
• Classes Based
• Compatible With ECM & CJS
• Out Of The Box Head Component
• Supports Static Files
• Automatic Favicon Picking

Simple Examples

// Imports 
const { FlawedClient, FlawedScreen, FlawedComponent, UseComponent } = require('@arnavk-09/flawed');

// Init Flawed App 
const app = new FlawedClient({
    port: 3000
});

// Nav Bar Component 
class Navbar extends FlawedComponent {
    // Giving Name To Component
    constructor() {
        super({
            name: 'Navbar'
        });
    };

    // Component Content 
    view(props) {
        return (
            `
            <a href='${props.link}'> ${props.title} </a>
            <br>
          `
        );
    };
};

// Creating Main Screen 
class MainScreen extends FlawedScreen {
    // Giving ID To Screen
    constructor() {
        super({
            route: 'main', // use 'main' for index route
        });
    };

    // Screen Content  
    render() {
        return {
            page: `
                ${UseComponent('Navbar', app, { title: 'Navbar (Props)', link: '/' })}
                Hellow Flawed!
            `,
        };
    };
};

// Adding Screens To App 
app.setScreens([new MainScreen()]);

// Register Components 
app.registerComponents([new Navbar()]);

// Setup 404 Page 
app.set404Content(`404 Page!`);

// Starting Flawed App 
app.start();

// Imports 
import { FlawedClient, FlawedScreen, FlawedComponent, UseComponent } from '@arnavk-09/flawed';

// Init Flawed App 
const app = new FlawedClient({
    port: 3000
});

// Nav Bar Component 
class Navbar extends FlawedComponent {
    // Giving Name To Component
    constructor() {
        super({
            name: 'Navbar'
        });
    };

    // Component Content 
    view(props) {
        return (
            `
            <a href='${props.link}'> ${props.title} </a>
            <br>
          `
        );
    };
};

// Creating Main Screen 
class MainScreen extends FlawedScreen {
    // Giving ID To Screen
    constructor() {
        super({
            route: 'main', // use 'main' for index route
        });
    };

    // Screen Content  
    render() {
        return {
            page: `
                ${UseComponent('Navbar', app, { title: 'Navbar (Props)', link: '/' })}
                Hellow Flawed!
            `,
        };
    };
};

// Adding Screens To App 
app.setScreens([new MainScreen()]);

// Register Components 
app.registerComponents([new Navbar()]);

// Setup 404 Page 
app.set404Content(`404 Page!`);

// Starting Flawed App 
app.start();

Checkout Structured Flawed Site Here...

🚔 Need help?

• Chat With Me On Discord
• Check Documentation

🎒 Packages

Here are some packages from Flawed

| Package | Description | | ------------------------------------------------------------------------------ | ------------------------------------------------------------ | | @arnavk-09/flawed | Useless JS/TS & Html Framework | | @arnavk-09/create-flawed | TODO |

💪 Classes

There is a system that allows you to create your site with Flawed

• FlawedClient
• FlawedComponent
• FlawedScreen
• FlawedHead

📚 Documentation

You can view documentation here

🆕 Newest Change

• v1.0.3

• [x] Added Docs Site

💝 Thank you

You can support @arnavk-09/flawed by giving it a GitHub star.