A simple and declarative JavaScript framework for building user interfaces.
npm install jutterjutter 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.
- Installation
- Getting Started
- CLI
- Manual Setup
- Core Concepts
- Elements
- Components & State
- Event Handling
- Styling & Attributes
- API Reference
- Examples
You can install Jutter via npm or yarn:
``bash`
npm install jutteror
yarn add jutter
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
You can also install jutter into an existing project.
`bash`
npm install jutter`
orbash`
yarn add jutter
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());
`
For more detailed API references, advanced usage patterns, and tutorials, please visit our documentation site.
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