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:

``bash
npm install jutter


or


yarn add jutter
`

Getting Started

$3

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

`bash
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:

`bash
cd my-jutter-app
npm install
npm run start
`

Usage as a Library

You can also install jutter into an existing project.

$3

`bash
npm install jutter
`
or
`bash
yarn add jutter
`

$3

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

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

interface CounterState {
count: number;
}

class CounterComponent extends Component {
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:
`bash
cd example
`
2. Install dependencies:
`bash
npm install
`
3. Start the development server:
`bash
npm run start
``