Skip to main content

​
Welcome to Resolid Framework

Resolid is a modern, TypeScript-first full-stack framework designed for building fast, scalable, and maintainable web applications. Built on top of React Router and Vite, Resolid provides a powerful foundation with dependency injection, event-driven architecture, and extensible plugins.

​
Why Resolid?

Resolid brings structure and scalability to full-stack TypeScript development by combining best-in-class tools with a clean, extensible architecture.

Type-safe DI

Built-in dependency injection with full TypeScript support, singleton and transient scopes, and circular dependency detection

Event-driven

Lightweight event system for building decoupled, reactive applications with async support

Extensible architecture

Plugin system with providers, bootstrap hooks, and lifecycle management

React Router integration

Seamless React Router v7 integration with Vite for modern full-stack apps

Multi-platform deployment

Deploy to Node.js, Vercel, or Netlify with platform-specific optimizations

Built-in modules

Caching, logging, database integration, and more — batteries included

​
Architecture overview

Resolid applications are built around a few core concepts:

​
Application container

The App class serves as your application’s container, managing services, extensions, and lifecycle: 
import { createApp } from "@resolid/core";

const app = await createApp({
  name: "my-app",
  debug: true,
  extensions: [
    // Your extensions here
  ]
});

await app.run();

​
Dependency injection

Services are registered as providers and resolved through the container: 
import { Container, inject } from "@resolid/di";

class LogService {
  log(message: string) {
    console.log(`[LOG]: ${message}`);
  }
}

class UserService {
  constructor(private logger: LogService) {}
  
  createUser(name: string) {
    this.logger.log(`Creating user: ${name}`);
  }
}

container.add({
  token: LogService,
  factory: () => new LogService(),
});

container.add({
  token: UserService,
  factory: () => new UserService(inject(LogService)),
});

​
Extensions

Extensions are reusable modules that add functionality to your application: 
import { type Extension } from "@resolid/core";

const logExtension: Extension = {
  name: "log",
  providers: [
    {
      token: LogService,
      factory: () => new LogService(),
    }
  ],
  bootstrap: async (context) => {
    context.emitter.on("app:ready", () => {
      console.log("App is ready!");
    });
  }
};

​
What you’ll learn

Get started

Build your first Resolid app in minutes

Core concepts

Understand applications, extensions, and DI

Modules

Explore built-in modules and create your own

API Reference

Complete API documentation

​
TypeScript-first

Resolid is written in TypeScript and designed with type safety in mind. All APIs are fully typed, providing excellent autocomplete and catching errors at compile time. 
import { createApp } from "@resolid/core";
import type { LogService } from "./services";

const app = await createApp({
  name: "my-app",
  expose: {
    log: LogService  // Type token
  }
});

// Fully typed access to exposed services
app.$.log.info("Hello world");  // TypeScript knows this is LogService

​
Next steps

1

Install Resolid

Learn how to install Resolid and its packagesGo to installation
2

Build your first app

Follow the quickstart guide to create your first applicationGo to quickstart
3

Learn core concepts

Understand the fundamental concepts behind ResolidGo to core concepts

Build docs developers (and LLMs) love

Get started for freeTalk to us