Getting Started

Verbose is a signal-driven frontend framework built with TypeScript. It provides fine-grained reactivity, class components with decorators, and a complete ecosystem of first-party packages.

Installation

# Install the core packages
npm install @verbose/core @verbose/jsx @verbose/runtime @verbose/decorators

# Vite plugin for JSX and HMR
npm install -D @verbose/vite-plugin

Project Setup

Configure Vite to use the Verbose plugin:

// vite.config.ts
import { defineConfig } from 'vite'
import { verbose } from '@verbose/vite-plugin'

export default defineConfig({
  plugins: [verbose({ hmr: true })],
})

Configure TypeScript to use the Verbose JSX runtime:

// tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@verbose/jsx"
  }
}

Your First Component

import { Component, State, Prop } from '@verbose/decorators'
import { BaseComponent } from '@verbose/decorators'

@Component({ tag: 'my-counter' })
class Counter extends BaseComponent {
  @Prop() initialCount = 0
  @State() count = this.props.initialCount

  increment() {
    this.count++
  }

  render() {
    return (
      <div>
        <p>Count: {this.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    )
  }
}

Mounting the App

import { render } from '@verbose/runtime'
import { jsx } from '@verbose/jsx'

render(<Counter initialCount={0} />, document.getElementById('app')!)

Package Overview

Package	Purpose
core	Reactive primitives: signal, computed, effect, resource
composables	DOM and browser composition utilities
decorators	Class decorators for components
jsx	JSX runtime and type definitions
runtime	VNode rendering engine
store	Reactive state management
router	Client-side routing
motion	Animations: tweens, springs, keyframes
fsm	Finite state machines
concurrent	Async concurrency control
di	Dependency injection container
vite-plugin	Vite integration