https://github.com/alexewerlof/jj
Make HTML and CSS in Just Javascript!
https://github.com/alexewerlof/jj
frontend-framework javascript-library
Last synced: 3 months ago
JSON representation
Make HTML and CSS in Just Javascript!
- Host: GitHub
- URL: https://github.com/alexewerlof/jj
- Owner: alexewerlof
- License: mit
- Created: 2020-01-09T22:10:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2026-04-01T20:32:58.000Z (3 months ago)
- Last Synced: 2026-04-02T07:56:21.029Z (3 months ago)
- Topics: frontend-framework, javascript-library
- Language: TypeScript
- Homepage: https://alexewerlof.github.io/jj/
- Size: 1.13 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Just JavaScript!
**Faster than VDOM. No Build Step. Use the Platform!**
**JJ** is a lightweight, no-transpilation library for modern web development. What You Write Is What Is Run (WYWIWIR).
## ⚡ Quick Start
CDN:
[Import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap): Add this to your HTML:
```html
{
"jj": "https://cdn.jsdelivr.net/npm/jj/lib/bundle.min.js"
// Or a specific version
"jj": "https://cdn.jsdelivr.net/npm/jj@2/lib/bundle.min.js
}
```
And then:
```js
import { JJHE } from 'jj'
```
CDN:
```js
import { JJHE } from 'https://cdn.jsdelivr.net/npm/jj/lib/bundle.min.js'
```
NPM:
```bash
npm i jj
```
```js
import { JJHE } from 'jj'
JJHE.create('div')
.addClass('card')
.setText('Hello World!')
.on('click', () => console.log('Hi'))
```
Use namespace-aware wrappers for non-HTML elements:
```js
import { JJSE, JJME } from 'jj'
const icon = JJSE.create('svg').setAttr('viewBox', '0 0 24 24')
const formula = JJME.create('math').addChild(JJME.create('mi').setText('x'))
```
## 🚀 Why JJ?
- **Zero Build** – Runs directly in modern browsers
- **Native Speed** – Direct DOM manipulation, no VDOM overhead
- **Web Standards** – First-class Web Components support
- **Fluent API** – Chainable methods for cleaner code
JJ is **not** a reactive framework, template compiler, or state-management system.
## API Notes
Batch setter helpers use plural methods:
- `setAttrs({...})`
- `setAriaAttrs({...})`
- `setDataAttrs({...})`
- `setClasses({...})`
## 🧩 Custom Elements Readiness
Use `defineComponent(name, constructor, options?)` and expose a static `defined` promise on each custom element class:
```js
import { defineComponent } from 'jj'
export class MyWidget extends HTMLElement {
static defined = defineComponent('my-widget', MyWidget)
}
await MyWidget.defined
```
`defineComponent()` resolves a `Promise`:
- `false`: this call registered the component.
- `true`: it was already registered with the same constructor.
This explicit definition step is important for reliability. If markup is parsed before the element is defined, upgrades can race with rendering and produce flaky behavior.
## 📚 Learn More
**👉 [Visit the full site with tutorials, examples, and API docs](https://alexewerlof.github.io/jj)**
## 🤖 AI-Optimized Development
JJ is designed for AI-assisted development. Install the skill for intelligent code suggestions:
```bash
npx skills add alexewerlof/jj
```
Once installed, AI agents (GitHub Copilot, Cursor, Claude Code, Windsurf, etc.) will:
- Follow JJ's patterns and conventions automatically
- Know when to use `.ref` for native DOM access
- Suggest correct framework translations (React/Vue/jQuery/Svelte → JJ)
- Generate idiomatic, type-safe code
The skill definition (`SKILL.md`) is also included in the npm package at `node_modules/jj/SKILL.md`.
## ✅ Testing
The entire public API is tested thoroughly.
Tests live in the `test/` folder and mirror the source filenames (e.g., `test/JJE.test.ts` for `src/JJE.ts`, `test/JJME.test.ts` for `src/wrappers/JJME.ts`) while importing the target from `./src/index.js`.
Run tests with:
```bash
npm test
```
## License
MIT
_Made in Sweden 🇸🇪 by [Alex Ewerlöf](https://alexewerlof.com/)_
```
```