Fict

Reactive UI with zero boilerplate.
Write JavaScript; let the compiler handle signals, derived values, and DOM updates.

Quick Start · Core Concepts · Examples · Docs · Playground

function Counter() {
  let count = $state(0)
  const doubled = count * 2 // auto-derived

  return <button onClick={() => count++}>{doubled}</button>
}

No useMemo. No dependency arrays. No .value. Just JavaScript.

Why Fict?

"Write JavaScript; the compiler handles reactivity." No .value, no deps arrays, no manual memo wiring. Not pitching "better React/Vue/Svelte" — Fict is a different mental model: compile-time reactivity on plain JS. The gain: less code, lower cognitive overhead.

Fict gives you the best of every world:

• 🧩 React's familiar syntax — JSX, destructuring-friendly, native if/for
• ⚡ Solid's fine-grained updates — no VDOM, surgical DOM patches
• ✨ Less boilerplate than both — compiler infers derived values automatically

Quick Start

npm install fict
npm install -D @fictjs/vite-plugin  # Vite users

import { $state, render } from 'fict'

export function Counter() {
  let count = $state(0)
  const doubled = count * 2 // auto-derived

  return (
    <div class="counter">
      <h1>Fict Counter</h1>
      <div class="card">
        <button onClick={() => count--}>-</button>
        <span class="count">{count}</span>
        <button onClick={() => count++}>+</button>
      </div>
      <p class="doubled">Doubled: {doubled}</p>
    </div>
  )
}

render(() => <Counter />, document.getElementById('app')!)

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

export default defineConfig({
  plugins: [fict()],
})

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "fict"
  }
}

Online Examples

• 🎮 Counter

Core Concepts

$state — Reactive data

let count = $state(0)

count++ // ✅ direct mutation
count = count + 1 // ✅ assignment

Automatic derivations — No useMemo needed

let price = $state(100)
let quantity = $state(2)

const subtotal = price * quantity // auto-derived
const tax = subtotal * 0.1 // auto-derived
const total = subtotal + tax // auto-derived

The compiler builds a dependency graph and only recomputes what's needed. Single-use derived values may be inlined as an optimization; use $memo or set inlineDerivedMemos: false to force explicit memo nodes.

$effect — Side effects

$effect(() => {
  console.log(`count is now ${count}`)
  return () => {
    /* cleanup */
  }
})

Execution Model: Not React, Not Solid

This is the most important concept to understand.

function Counter() {
  console.log('A') // 🔵 Runs ONCE
  let count = $state(0)
  const doubled = count * 2
  console.log('B', doubled) // 🟢 Runs on EVERY count change
  return (
    <button onClick={() => count++}>
      {(console.log('C'), doubled)} {/* 🟢 Runs on every change */}
      {(console.log('D'), 'static')} {/* 🔵 Runs ONCE */}
    </button>
  )
}

The mental model

Fict splits your component into reactive regions:

• 🔵 Code before $state: runs once
• 🟢 Expressions using state (count * 2): recompute when dependencies change
• 🔵 Static JSX: runs once

Examples

Conditional rendering

function App() {
  let show = $state(true)

  return (
    <div>
      {show && <Modal />}
      {show ? <A /> : <B />}
    </div>
  )
}

No <Show> or {#if} — just JavaScript.

List rendering

function TodoList() {
  let todos = $state([
    { id: 1, text: 'Learn Fict' },
    { id: 2, text: 'Build something' },
  ])

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  )
}

No <For> or v-for — just .map().

Async data fetching

function UserProfile({ userId }: { userId: string }) {
  let user = $state<User | null>(null)
  let loading = $state(true)

  $effect(() => {
    const controller = new AbortController()
    loading = true

    fetch(`/api/user/${userId}`, { signal: controller.signal })
      .then(res => res.json())
      .then(data => {
        user = data
        loading = false
      })

    return () => controller.abort() // cleanup on userId change
  })

  if (loading) return <Spinner />
  return <div>{user?.name}</div>
}

Props stay reactive

function Greeting({ name, age = 18 }: { name: string; age?: number }) {
  const label = `${name} (${age})` // auto-derived from props
  return <span>{label}</span>
}

Destructuring works. No toRefs() or special handling needed.

What Fict Compiles To

// ✍️ Your code
function Counter() {
  let count = $state(0)
  const doubled = count * 2
  return <div>{doubled}</div>
}

// ⚡ Compiled output (simplified)
function Counter() {
  const count = createSignal(0)
  const doubled = createMemo(() => count() * 2)

  const div = document.createElement('div')
  createEffect(() => {
    div.textContent = doubled()
  })
  return div
}

You write the simple version. The compiler generates the efficient version.

Advanced Features

Error Boundaries

import { ErrorBoundary } from 'fict'
;<ErrorBoundary fallback={err => <p>Error: {String(err)}</p>}>
  <RiskyComponent />
</ErrorBoundary>

Suspense

import { Suspense } from 'fict'
import { resource, lazy } from 'fict/plus'

const userResource = resource({
  suspense: true,
  fetch: (_, id: number) => fetch(`/api/user/${id}`).then(r => r.json()),
})

const LazyChart = lazy(() => import('./Chart'))

function Profile({ id }) {
  return (
    <Suspense fallback="Loading...">
      <h1>{userResource.read(() => id).data?.name}</h1>
      <LazyChart />
    </Suspense>
  )
}

SSR Streaming

Fict SSR supports shell-first streaming with Suspense boundary patching:

import { renderToPipeableStream } from '@fictjs/ssr'

const { pipe, shellReady, allReady } = renderToPipeableStream(() => <App />, {
  mode: 'shell',
})

pipe(res)
await shellReady
await allReady

import { renderToPartial } from '@fictjs/ssr'

const { shell, stream } = renderToPartial(() => <App />, { mode: 'shell' })
// shell: complete fallback HTML
// stream: deferred boundary patches

fict/plus — Advanced APIs

import { $store, untrack } from 'fict'
import { resource, lazy } from 'fict/plus'

// Deep reactivity with path-level tracking
const user = $store({ name: 'Alice', address: { city: 'London' } })
user.address.city = 'Paris' // fine-grained update

// Derived values are auto-memoized, just like $state
const greeting = `Hello, ${user.name}` // auto-derived

// Method chains are also auto-memoized
const store = $store({ items: [1, 2, 3, 4, 5] })
const doubled = store.items.filter(n => n > 2).map(n => n * 2) // auto-memoized

// Dynamic property access works with runtime tracking
const value = store[props.key] // reactive, updates when key or store changes

// Escape hatch for black-box functions
const result = untrack(() => externalLib.compute(count))

Control Flow and Branch Reactivity

Fict components execute once on mount. Reactive updates happen through bindings/memos.

JSX-only reads → fine-grained DOM updates:

let count = $state(0)
return <div>{count}</div> // Only the text node updates

Control flow returns → compiler emits reactive branch bindings:

let count = $state(0)
if (count > 10) return <Special /> // branch swaps reactively when count changes
return <Normal />

The compiler detects supported patterns (if-return, switch-return, try blocks containing return branches) and lowers them to reactive conditionals.

Framework Comparison

Performance

🚧 Note: Bundle size and memory optimizations are currently in progress.

Benchmark Summary (js-framework-benchmark)

Lower is better. Geometric mean is the weighted mean of all relative factors.

Versions: Vue Vapor 3.6.0-alpha.2 · Solid 1.9.3 · Svelte 5.42.1 · React Compiler 19.0.0

Status & Roadmap

⚠️ Alpha — Fict is feature-complete for core compiler and runtime. API is stable, but edge cases may be refined. Don't use it in production yet.

✅ Completed

• Compiler with HIR/SSA
• Stable $state / $effect semantics
• Automatic derived value inference
• $store in fict, resource/lazy in fict/plus
• startTransition, useTransition, useDeferredValue in fict
• Vite plugin
• ESLint plugin
• Support sourcemap
• DevTools
• Router
• Testing library
• SSR / streaming

🗺️ Planned

• Migration guides from React/Vue/Svelte/Solid

Documentation

{
  "plugins": ["fict"],
  "extends": ["plugin:fict/recommended"]
}

FAQ

Known Limitations

The compiler has some limitations when handling conditional rendering patterns.

Control-flow patterns supported

• Multiple sequential if-return branches are compiled into reactive conditionals.
• if blocks without return are auto-wrapped so reactive side effects still update.
• Nested branch logic (e.g. inner if/switch) and reactive prelude reads before return are automatically kept reactive. When fine-grained lowering is not possible, the compiler enables a safe runtime fallback that tracks branch reads and re-runs the active branch.

Acknowledgments

Fict is built upon the brilliant ideas and relentless innovation of the open-source community. We express our deepest respect and gratitude to these projects:

• React — For defining the modern era of UI development. Its component model and declarative philosophy set the standard for developer experience.
• Solid — For pioneering fine-grained reactivity and demonstrating the power of compilation. Its architecture is the bedrock upon which Fict's performance is built.
• Qwik — For its outstanding resumability-first SSR vision. Its approach to instant interactivity has been a major inspiration for Fict's resumable SSR direction.
• alien-signals — For pushing the boundaries of signal performance. Its implementation provided critical guidance for Fict's reactive system.

MIT License · © Fict Contributors