Reactive HTML for server-rendered websites, with fine-grained signals, attribute-driven templates, and MPA boost navigation.
GyosJS is built for developers who like server-rendered HTML, traditional MPA architecture, and small amounts of JavaScript that stay close to the DOM. If AlpineJS feels familiar but you also want boosted MPA navigation similar to Turbo or Hotwire, GyosJS is designed for that middle ground.
## Why GyosJS
- Keep your backend-rendered HTML and existing routes.
- Add reactivity directly in markup with `g-scope`, `g-model`, `*if`, `*for`, and events.
- Upgrade link and form navigation with `g-boost` instead of rewriting the app as a SPA.
- Keep specific UI islands alive across navigations with `g-persist`.
- Use it with a CDN or install it from npm.
- Choose an optional strict-CSP build when the site cannot allow `unsafe-eval` or inline runtime styles.
## When It Fits
GyosJS is a good fit when you are building:
- Laravel, PHP, Rails, MVC, and other server-rendered apps
- admin tools and internal dashboards
- marketing sites with small interactive sections
- MPA products that want smoother navigation without client-side routing everywhere
- projects that do not need React/Vue-level component systems
GyosJS is not trying to replace a full SPA framework. If your app is primarily client-rendered and depends on complex client routing or large client-side state graphs, a SPA framework is usually the better tool.
## Quick Start
### CDN: no build step
Use the browser auto-init build when you want HTML-first usage with minimal setup.
```html
```
That build attaches `window.Gyos`, starts the router when `g-boost` exists, injects transition styles, and mounts scopes when the page is ready.
### npm: bundler or app build
```bash
npm install gyosjs
```
Use the core runtime when you want explicit control:
```js
import Gyos from 'gyosjs';
Gyos.scope('Counter', {
count: 0,
increment() {
this.count++;
}
});
Gyos.ready(() => {
Gyos.mountAll();
});
```
Or use the auto entrypoint:
```js
import 'gyosjs/auto';
```
Strict CSP deployments use `gyosjs/csp` or `gyosjs/csp/auto` with the static `gyosjs/styles.css` export. CSP mode keeps the same directives and router but intentionally supports a smaller expression language. See [Content Security Policy](./docs/en/content-security-policy.md).
## Minimal Example
```html
Hello, {name}