All Projects

Music Pad

Fascinated by the Markov chain, I built an app that uses a markov stochastic model to generate music.

Connected Nodes

A simple graph engine published as a react component library.

Web Piano

I built a web based piano that can be controlled by a MIDI controller. Go ahead and try your MIDI controllers out and have some fun.

MewUI

A application UI building library inspired by VueJS with simple data binding syntax and event handling.

Musical Lights

An application for musicians to connect to their existing lights and create the stage setting without expensive equipment.

PrototypedJS

A library to create mock APIs for UI prototypes.

Video Games Sales

A visualization and analysis of of video game sales.

MewUI

A simple UI building library inspired by VueJS. MewUI uses a simple data binding syntax and keeps the DOM updated automatically.

More details at Mew UI Github

Package is published on npm at MewUI on NPM

Installation

npm install @mewui/core

yarn add @mewui/core

Creating a Component

import { component } from '@mewui/core';

const User = component('user', {
  template: `
    <div class="user-card">
      <img @src="user.profileImg" alt="Profile Image" />
      <h4>@user.firstName @user.lastName</h4>
      <p>
        @user.designation at @user.company
      </p>

      <button @onclick="emit('view-details', @user.id)">View Details</button>
    </div>
  `,
  events: {
    'view-details': (event) => console.log(`View details for user ID ${event.detail}`),
  },
});

Using the Component

import { render } from '@mewui/core';

const user1 = User.instance();
user1.firstName = 'John';
user1.lastName = 'Doe';
user1.designation = 'Professional Procrastinator';
user1.company = 'Day Dreamers Inc.';

render('#app', [user1]);

user1.designation = 'Professional Daydreamer'; // Reactive property, updates DOM automatically.