paintor v2.0.3

Paintor

A JavaScript library with component-based model for building reactive client-side user interfaces or generating HTML code.

Why? Because JavaScript is good enough. So good, in fact, that even HTML can be written in JavaScript.

Documentation and Examples

Key Features

• JavaScript syntax: The code you write is the code to run
• No dependencies
• No Virtual DOM: Reactivity is achieved through Proxy and DOM events
• Templates in JavaScript or HTML (experimental): JavaScript HTML-like tree structure (HyperScript) or HTML syntax in template literals
• Scoped CSS: Each component can have its own style
• Observers: Receive events on state changes
• Server-Side Rendering (SSR): Generate HTML code on the server
• Internationalization (i18n)
• Type definitions: Built-in TypeScript definitions for code completion and type safety

Quick Examples

Clicks counter

import { css, compose, state, template } from 'paintor'

// Component
function Counter(/* Props */ { buttonText }) {
  // Scoped CSS
  css`
    div {
      span {
        color: blue;
      }
    }
  `

  // Template
  return template((x) => {
    // Local state
    const counter = state({ clicks: 0 })

    // HTML elements
    x.div(
      x.button(
        { onClick: () => counter.clicks++ },
        buttonText
      ),
      x.span(() => counter.clicks)
    )

    // Observe state changes
    on(counter.clicks).change((event) => {
      console.log(`Clicked ${event.value} times`)
    })
  })
}

// Render
const app = compose(
  Counter({ buttonText: 'Click me' })
)
app.paint('#app')

Generate HTML code (for Server-Side Rendering)

// To generate HTML code, instead of paint(), use html()
const htmlCode = app.html()

Observe state changes

import { state, on } from 'paintor'

// Create state
const myState = state({ count: 0 })

// Make state changes
setInterval(() => {
  myState.count++
}, 1000)

// Observe state changes
on(myState.count).change((data) => {
  console.log(data.value)
})

// The result in the console will be:
// 1
// 2
// 3
// ...

Performance

Paintor is faster than React in many aspects, and slower than Svelte, Vue and Angular.