Solarite is a small JavaScript library for native web components. Import it anywhere, write a class, change your data, and call render(). Solarite updates only the DOM that changed.
See the codeSolarite makes native web components fast to update, with no build step and no signals. You write plain JavaScript and call render() when your data changes; Solarite then patches only the DOM that changed. It's small (12.7KB with Brotli) and runs straight in the browser as a standard ES module.
Documentation & live examples →
npm install solarite
Or use it with no build step at all, straight from a CDN:
import h, {Solarite} from
'https://cdn.jsdelivr.net/npm/solarite@0.9.0/dist/Solarite.min.js';
import h, {Solarite} from 'solarite';
class Counter extends Solarite {
count = 0;
render() {
h(this)`
<my-counter>
<button onclick=${() => { this.count++; this.render() }}>
Clicked ${this.count} times
</button>
</my-counter>`;
}
}
Counter.define('my-counter');
document.body.append(new Counter());
It's one of the fastest UI libraries measured. It scores 1.07 on the js-framework-benchmark, where hand-written vanilla JavaScript scores 1.01 and lower is better.
Lit is a popular library for building web components. Here's where Solarite differs:
<style> in the light DOM, so global stylesheets, form participation, and third-party CSS still reach your elements. There's no Shadow DOM boundary to work around.@property decorators, no reactive controllers. Mutate plain JavaScript objects and arrays of any depth, then call render(). Updates happen exactly when you ask for them.The trade-off is that Solarite doesn't track dependencies for you. It re-renders when you call render().
MIT. Free for commercial use, no attribution required.
JavaScript
95.3%
HTML
3.7%
Solarite is a small JavaScript library for native web components. Import it anywhere, write a class, change your data, and call render(). Solarite updates only the DOM that changed.
See the codeSolarite makes native web components fast to update, with no build step and no signals. You write plain JavaScript and call render() when your data changes; Solarite then patches only the DOM that changed. It's small (12.7KB with Brotli) and runs straight in the browser as a standard ES module.
Documentation & live examples →
npm install solarite
Or use it with no build step at all, straight from a CDN:
import h, {Solarite} from
'https://cdn.jsdelivr.net/npm/solarite@0.9.0/dist/Solarite.min.js';
import h, {Solarite} from 'solarite';
class Counter extends Solarite {
count = 0;
render() {
h(this)`
<my-counter>
<button onclick=${() => { this.count++; this.render() }}>
Clicked ${this.count} times
</button>
</my-counter>`;
}
}
Counter.define('my-counter');
document.body.append(new Counter());
It's one of the fastest UI libraries measured. It scores 1.07 on the js-framework-benchmark, where hand-written vanilla JavaScript scores 1.01 and lower is better.
Lit is a popular library for building web components. Here's where Solarite differs:
<style> in the light DOM, so global stylesheets, form participation, and third-party CSS still reach your elements. There's no Shadow DOM boundary to work around.@property decorators, no reactive controllers. Mutate plain JavaScript objects and arrays of any depth, then call render(). Updates happen exactly when you ask for them.The trade-off is that Solarite doesn't track dependencies for you. It re-renders when you call render().
MIT. Free for commercial use, no attribution required.
JavaScript
95.3%
HTML
3.7%