Framework v2.4.0

The Q Object Framework

A modular, AI-assisted component architecture designed for rapid composition, type-safe hydration, and zero-config server rendering.

Read Documentation → View Examples

$ npm install @thatisaq/q-object

Architecture

How Q Object Works

Built around three core pillars, Q Object eliminates boilerplate while preserving strict type safety and performance.

Context-Aware Composition

Components self-resolve props, slots, and global state without explicit drilling. The compiler maps dependencies at build time.

Zero-Config SSR

Automated server-side rendering pipeline with streaming HTML, automatic hydration boundaries, and fallback rendering.

AI-Assisted Generation

Integrated CLI scaffolds type-safe interfaces, API contracts, and component trees from natural language prompts.

Capabilities

Built for Modern Stacks

Everything you need to ship production-grade applications without the configuration overhead.

⚡

Reactive Signals

Fine-grained reactivity without virtual DOM diffing. Updates propagate only to affected DOM nodes.

🧩

Slot Composition

Named, fallback, and dynamic slots with full TypeScript inference across component boundaries.

🌐

Edge-Ready Runtime

Runs natively on Cloudflare Workers, Vercel Edge, and Deno without polyfills or transpilation.

🔒

Type-Safe Hydration

Compile-time validation of client-server data contracts. Fail fast, never at runtime.

Usage

Quick Start

Integrate Q Object into your project in under 60 seconds.

/* App.tsx */
import { QProvider, QComponent } from "@thatisaq/q-object";

export default function App() {
  return (
    <QProvider theme={"adaptive"}>
      <QComponent name={"Dashboard"} autoHydrate={true}  
    </QProvider>
  );
}
                

/* App.vue */
<script setup>
import { QProvider } from "@thatisaq/q-object";

defineProps({
  mode: { type: String, default: "production" }
});
</script>

<template>
  <QProvider >
    <QComponent :mode={"auto"}  
  </QProvider>
</template>
                

/* q-object.config.ts */
import { defineConfig } from "@thatisaq/q-object";

export default defineConfig({
  ssr: { enabled: true, stream: true },
  hydration: { mode: "progressive" },
  ai: { scaffold: "auto", types: "strict" },
  targets: ["edge", "node18+"]
});
                

Ecosystem

Works With Your Stack

Drop-in compatible with major frameworks and deployment targets.

React 18+

Svelte 4

Next.js

Nuxt

Vite

Webpack

Cloudflare

Deno

Bun

Ready to Build Smarter?

Join thousands of developers shipping faster with Q Object's composable architecture.

Get Started → Read the Docs