Native APIs
Sonnet JS is a framework that allows you to write clean and organized JavaScript code using low-level APIs.
Routing
Built-in and easy to use routing system that allows you to create single-page applications with ease.
SSR
Server-side rendering supported out of the box. No need of extra runtime server renderer for your application.
No Configuration
No configuration needed. Just start writing your code and see it in action in the browser with boilerplate.
No Compiler
No need of a compiler to compile your code. Just write your code in Vanilla Javascript blazingly fast.
No Learning Curve
If you know JavaScript, you know Sonnet JS. No need to learn a new language or a new framework to get started.
App.tsbefore
import { $component, SonnetComponent } from '@sonnetjs/core';
class Counter extends SonnetComponent {
counter = 0;
public script() {
const counterButton = document.getElementById(
'counter',
) as HTMLButtonElement;
counterButton.addEventListener('click', () => {
this.counter += 1;
counterButton.innerText = `count is ${this.counter}`;
});
}
public get() {
return /*html*/ `
<div>
<h1>Sonnet JS Counter</h1>
<div class="card">
<button
id="counter"
type="button"
class="btn"
>
count is ${this.counter}
</button>
</div>
</div>
`;
}
}
export default $component(Counter);App.tsafter
import { $component, SonnetComponent } from '@sonnetjs/core';
import { div, h1, button } from '@sonnetjs/dom';
class Counter extends SonnetComponent {
counter = 0;
public script() {
const counterButton = document.getElementById(
'counter',
) as HTMLButtonElement;
counterButton.addEventListener('click', () => {
this.counter += 1;
counterButton.innerText = `count is ${this.counter}`;
});
}
public get() {
return (
div().children([
h1().innerText('Sonnet JS Counter').get(),
div().class('card').children([
button()
.id('counter')
.type('button')
.class('btn')
.innerText(`count is ${this.counter}`)
.get(),
]).get(),
]).get()
);
}
}
export default $component(Counter);VS