In the rapidly evolving landscape of web development, developers are constantly seeking tools that not only boost productivity but also ensure code reliability and maintainability. Today, we're excited to introduce Igniter.js, a groundbreaking TypeScript framework that redefines how we build full-stack applications with unprecedented type safety, seamless real-time capabilities, and an exceptional developer experience.
Created by Felipe Barcelos, Igniter.js emerges from years of experience building scalable web applications and recognizing the gaps in existing solutions. This framework addresses the fundamental challenges developers face when building modern applications: maintaining type safety across the entire stack, managing complex state synchronization, and building robust backend services without sacrificing performance or developer experience.
Modern web development often involves juggling multiple technologies, each with its own paradigms and type systems. Developers typically face several challenges:
Traditional full-stack development creates artificial boundaries between frontend and backend code. Even with TypeScript on both sides, the communication layer—APIs, database queries, and client-server interactions—often lacks proper type safety, leading to runtime errors and maintenance headaches.
Keeping client-side state synchronized with server-side data requires intricate solutions involving caching, invalidation strategies, and real-time updates. Most frameworks treat these as separate concerns, adding complexity to the development process.
Building robust backend services requires integrating multiple systems: databases, caching, background jobs, pub/sub messaging, and real-time updates. Each system typically requires separate configuration and lacks unified type safety.
Developers often switch between different mental models, toolchains, and debugging approaches when working across the stack, reducing productivity and increasing cognitive load.
Igniter.js addresses these challenges through a unified, type-safe approach that treats your entire application as a cohesive system rather than separate frontend and backend components.
Igniter.js is built on three fundamental principles:
Igniter.js introduces a revolutionary approach to API development using controllers and actions that ensure complete type safety:
// features/users/controllers/users.controller.ts
export const userController = igniter.controller({
path: '/users',
actions: {
// Type-safe query with automatic validation
getUser: igniter.query({
path: '/:id' as const,
query: z.object({
id: z.string()
}),
handler: async ({ request, response, context }) => {
const user = await context.db.user.findUnique({
where: { id: request.query.id }
});
if (!user) {
return response.notFound('User not found');
}
return response.success(user);
},
}),
// Type-safe mutation with validation
createUser: igniter.mutate({
path: '/',
method: 'POST',
body: z.object({
name: z.string().min(1),
email: z.string().email()
}),
handler: async ({ request, response, context }) => {
const user = await context.db.user.create({
data: request.body
});
return response.success({ user }, { status: 201 });
}
})
}
});
On the client side, consuming this API is equally type-safe and intuitive:
'use client';
import { api } from '@/igniter.client';
function UserProfile({ userId }: { userId: string }) {
// Fully typed query with automatic caching and revalidation
const userQuery = api.users.getUser.useQuery({
query: { id: userId },
enabled: !!userId,
staleTime: 5000,
refetchOnWindowFocus: false,
onSuccess: (data) => {
console.log('Successfully fetched user:', data);
},
onError: (error) => {
console.error('Error fetching user:', error);
},
});
const createUserMutation = api.users.createUser.useMutation({
onSuccess: (data) => {
console.log('User created successfully:', data.user);
// Invalidate and refetch user queries
userQuery.refetch();
},
onError: (error) => {
console.error('Failed to create user:', error.message);
}
});
if (userQuery.isLoading) {
return <div>Loading user...</div>;
}
if (userQuery.isError) {
return <div>Error loading user: {userQuery.error.message}</div>;
}
return (
<div>
<h1>{userQuery.data?.name}</h1>
<p>{userQuery.data?.email}</p>
<button
onClick={() => createUserMutation.mutate({
body: {
name: 'John Doe',
email: 'john@example.com'
}
})}
disabled={createUserMutation.isLoading}
>
{createUserMutation.isLoading ? 'Creating...' : 'Create User'}
</button>
</div>
);
}
Igniter.js provides a powerful procedure system for creating reusable, type-safe middleware that can extend your application context:
// procedures/auth.procedure.ts
export const auth = igniter.procedure({
handler: async (options: { isAuthRequired: boolean }, { response, context }) => {
const user = await getCurrentUser(context.env.SECRET);
// If auth is required but there's no user, return an unauthorized error.
// This stops the request from proceeding further.
if (options.isAuthRequired && !user) {
return response.unauthorized('Authentication required.');
}
// The returned object is merged into the context.
// Now, context.auth.user will be available in our controller.
return {
auth: {
user,
},
};
},
});
// Usage in controller
export const userController = igniter.controller({
path: '/users',
actions: {
getCurrentUser: igniter.query({
path: '/me',
// Use the procedure created in the previous step.
// TypeScript knows that context.auth.user is now available!
use: [auth({ isAuthRequired: true })],
handler: async ({ request, response, context }) => {
// You can get fully type-safe user object from Auth Procedure
const user = context.auth.user;
// Return current session user
return response.success(user);
},
}),
}
});
Igniter.js automatically keeps your UI synchronized with server state through automatic revalidation. When a mutation occurs, the server can trigger client-side data refetches instantly:
// Backend: Regular query and mutation with automatic revalidation
export const postsController = igniter.controller({
path: '/posts',
actions: {
// A regular query to list posts
list: igniter.query({
path: '/',
stream: true,
handler: async ({ context, response }) => {
const posts = await context.database.post.findMany();
return response.success({ posts });
},
}),
// A mutation that triggers automatic revalidation
create: igniter.mutate({
path: '/',
body: z.object({
title: z.string(),
content: z.string()
}),
handler: async ({ body, context, response }) => {
const newPost = await context.database.post.create({
data: body
});
// This automatically triggers revalidation for all clients
// using api.posts.list.useQuery() - no additional code needed!
return response.created(newPost).revalidate(['posts.list']);
},
}),
},
});
// Frontend: Standard useQuery - automatically updates in real-time
function PostsList() {
const postsQuery = api.posts.list.useQuery();
if (postsQuery.isLoading) {
return <div>Loading posts...</div>;
}
return (
<ul>
{postsQuery.data?.posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
// When ANY user creates a post, ALL users see the update instantly!
// No WebSockets, no manual refetching, no additional complexity.
Igniter.js includes a powerful job system for handling background processing with full type safety:
// src/services/jobs.ts
// Creates a set of registered jobs, using the merge method to add new jobs
export const registeredJobs = jobs.merge({
// Defines a group of jobs related to emails
emails: jobs.router({
jobs: {
// Registers the 'sendWelcome' job
sendWelcome: jobs.register({
name: 'sendWelcome', // Job name
input: z.object({
message: z.string() // Defines the input format using Zod (type validation)
}),
handler: async ({ input }) => {
// Function to be executed when the job runs
console.log(input.message) // Displays the received message in the console
}
})
}
})
})
// Enqueue jobs from anywhere
export const userController = igniter.controller({
path: '/users',
actions: {
create: igniter.mutate({
path: '/',
body: z.object({
name: z.string(),
email: z.string().email(),
}),
handler: async ({ body, context }) => {
const user = await context.database.user.create({
data: body,
});
// Enqueue welcome email job
await igniter.jobs.emails.enqueue({
task: 'sendWelcome',
input: {
userId: user.id,
email: user.email,
},
});
return response.success({ user });
},
}),
},
});
Igniter.js is designed to work seamlessly with any JavaScript runtime and framework. The core philosophy is "write once, deploy anywhere":
Framework Flexibility: Igniter.js can be integrated with React, Vue, Svelte, Angular, or any other frontend framework. The type-safe client can even be used in mobile applications built with React Native or other cross-platform solutions.
Next.js Integration:
// app/api/[...igniter]/route.ts
import { igniter } from '@/igniter';
// Igniter.js automatically handles all HTTP methods
export const { GET, POST, PUT, DELETE, PATCH } = igniter.nextjs();
Express.js Integration:
// server.ts
import express from 'express';
import { igniter } from './igniter';
const app = express();
// Mount Igniter.js on any path
app.use('/api', igniter.express());
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
Bun Integration:
// server.ts
import { igniter } from './igniter';
// Direct integration with Bun's native server
Bun.serve({
port: 3000,
fetch: igniter.fetch,
});
console.log('Bun server running on http://localhost:3000');
Cloudflare Workers:
// worker.ts
import { igniter } from './igniter';
// Deploy to the edge with zero configuration
export default {
fetch: igniter.fetch,
};
Igniter.js is engineered for performance and scale from the ground up:
Starting a new Igniter.js project is incredibly simple thanks to our comprehensive CLI tool:
# Create a new Igniter.js project
npx @igniter-js/cli init my-app
# Choose your preferred setup
# ✓ Next.js + React
# ✓ TanStack Start
# ✓ Bun + React
# ✓ Express.js API
# ✓ Custom setup
cd my-app
npm run dev
The CLI provides several starter templates:
Igniter.js stands out in the crowded framework landscape by addressing specific pain points that other solutions leave unresolved:
While tRPC provides excellent type safety for API calls, Igniter.js goes further by including integrated queues, real-time updates, AI capabilities, and a more comprehensive developer experience.
Next.js is an excellent React framework, but it doesn't provide backend abstractions or type safety across the full stack. Igniter.js complements Next.js by providing the backend architecture and type-safe communication layer.
Remix offers great full-stack capabilities but is tightly coupled to React and doesn't provide the same level of type safety or AI integration that Igniter.js offers.
The T3 Stack combines excellent tools but requires significant configuration and doesn't provide integrated solutions for queues, real-time updates, or AI. Igniter.js provides all these features out of the box.
Igniter.js is just getting started. Our roadmap includes:
We're building Igniter.js as an open-source project with community collaboration at its core. Here's how you can get involved:
Igniter.js represents a new paradigm in full-stack development, where type safety, developer experience, and modern capabilities like AI integration are not afterthoughts but fundamental design principles. By eliminating the traditional boundaries between frontend and backend development, Igniter.js enables developers to build more reliable, maintainable, and feature-rich applications with significantly less complexity.
Whether you're building a simple CRUD application, a complex enterprise system, or an AI-powered platform, Igniter.js provides the tools and abstractions you need to focus on what matters most: delivering value to your users.
Ready to experience the future of full-stack development? Get started with Igniter.js today and join the growing community of developers who are building the next generation of web applications.
Igniter.js is created and maintained by Felipe Barcelos and the open-source community. Special thanks to all contributors who are helping shape the future of full-stack development.
Next Steps: Ready to dive deeper? Check out our Quick Start Guide or explore our starter templates to begin building with Igniter.js today.
Igniter.js provides everything you need to create production-ready applications. Start building your next project in minutes.