DEV Community

Harsh Singh
Harsh Singh

Posted on

1 1

Tatva - The Web Component Framework

In my previous Post, I introduced you guys to "Tatva.js", A Web Component Framework.
In that post, I showed you how to create a barebones Todo App using Tatva.js.

In today's post, I will show you how Tatva.js combines the Web Component API with Preact-inspired Hyperscript based Virtual DOM. Below is the source code of a Counter App created using Tatva.js.

Because it requires no build step, you can load the library from a CDN and start building your app.

Counter App Example:
app.js

import { Component, h, text } from 'https://unpkg.com/tatva@latest';

class MyApp extends Component {

    static get observedAttributes() {
        return ['count']
    }

    componentDidConnect() {
        console.log('Component Connected.');
    }

    incrementBy(n) {
        this.setAttribute('count', this.props.count + n);
    }

    render() {
        return h('div', {}, 
            h('p', {}, text(this.props.count)),
            h('div', {},
                h('button', { onclick: () => this.incrementBy(1) }, text('+')),
                h('button', { onclick: () => this.incrementBy(-1) }, text('-')),
            )
        );
    }

}

MyApp.propTypes = {
    count: Number
};

customElements.define('my-app', MyApp);
Enter fullscreen mode Exit fullscreen mode

index.html

<my-app count="0"></my-app>
Enter fullscreen mode Exit fullscreen mode

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay