jutter

jutter is a lightweight, declarative JavaScript framework for building user interfaces. It leverages a component-based architecture and a functional syntax to create DOM elements, making it easy to build interactive web applications without the overhead of a virtual DOM or complex build steps.

Table of Contents

• Installation
• Getting Started
  • CLI
  • Manual Setup
• Core Concepts
  • Elements
  • Components & State
  • Event Handling
  • Styling & Attributes
• API Reference
• Examples

Installation

You can install Jutter via npm or yarn:

npm install jutter
# or
yarn add jutter

Getting Started

CLI

The quickest way to start building with jutter is by creating a new project using our command-line tool:

npx jutter create my-jutter-app

This command will set up a new directory named my-jutter-app with a ready-to-go jutter project.

Once the project is created, navigate into it and start the development server:

cd my-jutter-app
npm install
npm run start

Usage as a Library

You can also install jutter into an existing project.

Installation

npm install jutter

or

yarn add jutter

Basic Component Example

Here is a simple example of a jutter component that demonstrates state management:

import { div, h1, p, button, Component, render } from 'jutter';

interface CounterState {
    count: number;
}

class CounterComponent extends Component<CounterState> {
    constructor() {
        super({ count: 0 });
    }

    render() {
        return div(
            h1('Counter App'),
            p(`Count: ${this.state.count}`),
            button('Increment')
                .onClick(() => this.setState({ count: this.state.count + 1 }))
                .style({ padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' })
        );
    }
}

// To render this component to the DOM:
render('#app', new CounterComponent());

Further Documentation

For more detailed API references, advanced usage patterns, and tutorials, please visit our documentation site.

Example Application

This repository includes a full example application in the /example directory. It's a great way to explore various features of jutter.

To run the example locally:

1. Navigate to the example directory:

   cd example

2. Install dependencies:

   npm install

3. Start the development server:

   npm run start