Skip to content
Effectify
GitHub

SolidJS Integration

SolidJS Integration

Section titled “SolidJS Integration”

Effectify provides powerful SolidJS integrations that combine the reactive nature of SolidJS with the type-safety and composability of Effect. Our SolidJS packages enable you to build high-performance, maintainable applications with excellent developer experience.

Available Packages

Section titled “Available Packages”

@effectify/solid-query

Effect integration with TanStack Query for SolidJS applications. Provides type-safe data fetching with Effect’s error handling and SolidJS reactivity.

Learn more →

@effectify/solid-ui

A comprehensive UI component library built with SolidJS, Kobalte, and Tailwind CSS. Includes forms, layouts, and interactive components optimized for SolidJS.

Learn more →

@effectify/chat-solid

Real-time chat components and services for SolidJS applications. Built with Effect for robust state management and SolidJS for reactive UI updates.

Learn more →

Getting Started

Section titled “Getting Started”

Ready to start building with Effectify and SolidJS? Check out our getting started guide to set up your first project.

Quick Start

Get up and running with Effectify in your SolidJS application in minutes.

Get Started →

Key Features

Section titled “Key Features”
  • Reactive by Design: Leverages SolidJS’s fine-grained reactivity system
  • Type Safety: Full TypeScript support with Effect’s powerful type system
  • Error Handling: Robust error handling with Effect’s error management
  • Performance: Optimized for SolidJS’s compilation and runtime performance
  • Composability: Build complex applications from simple, composable parts
  • Developer Experience: Excellent tooling and debugging support

Why SolidJS + Effect?

Section titled “Why SolidJS + Effect?”

SolidJS and Effect are a perfect match:

  • Fine-grained Reactivity: SolidJS’s reactive primitives work seamlessly with Effect’s data flow
  • Compile-time Optimizations: Both libraries optimize at compile time for maximum performance
  • Functional Programming: Both embrace functional programming principles
  • Type Safety: Strong TypeScript support throughout the stack
  • Small Bundle Size: Both libraries prioritize minimal runtime overhead

Architecture Overview

Section titled “Architecture Overview”
// Effect handles business logic and data flow
const fetchUser = (id: number) =>
  Effect.tryPromise({
    try: () => fetch(`/api/users/${id}`).then(res => res.json()),
    catch: (error) => new Error(`Failed to fetch user: ${error}`)
  })

// SolidJS handles reactive UI updates
function UserProfile(props: { userId: number }) {
  const [user] = createResource(
    () => props.userId,
    (id) => Effect.runPromise(fetchUser(id))
  )

  return (
    <Show when={user()} fallback={<div>Loading...</div>}>
      <h1>{user()?.name}</h1>
    </Show>
  )
}

Community & Support

Section titled “Community & Support”

Examples

Section titled “Examples”

Explore our example applications: