v1.0 Alpha is now available

Content Management for
Modern React Websites

Give clients control without compromising your code. Type-safe, headless, and built for the modern web stack.

layout.tsx
import { defineConfig, LoomioProvider } from "@loomio/sdk/react";
import { Navbar } from "@/components/navbar";
import { Footer } from "@/components/footer";
import "./globals.css";

const config = defineConfig({
    siteId: process.env.LOOMIO_SITE_ID
});

export default function RootLayout({ children }) {
    return (
        <html lang="en" className="antialiased bg-background text-foreground" suppressHydrationWarning>
            <body>
                <LoomioProvider config={config}>
                    <Navbar />
                    <main className="min-h-screen">
                        {children}
                    </main>
                    <Footer />
                </LoomioProvider>
            </body>
        </html>
    );
}

Everything you need to ship

Built for modern React applications with developer experience and performance in mind.

React SDK

Framework-agnostic SDK with React hooks, TanStack Query integration, and full TypeScript support.

Theme Management

Real-time theme customization with light/dark modes. Server-side injection prevents theme flashing.

File Storage

Integrated file management with soft delete, scheduled cleanup, and delegation patterns.

Image Gallery

Organized gallery system with tagging, metadata, and automatic file relationships.

Custom Values

Developer-defined key/value pairs for dynamic content. Update text, URLs, and config without code.

Multi-Tenant

Built for agencies and SaaS. Manage multiple client sites with role-based access control.

Real-time Sync

Powered by Convex for instant data synchronization. Updates appear immediately.

TypeScript First

Type-safe from database to frontend. Convex schema generates types automatically.

Three steps to get started

From dashboard to deployment in minutes.

01

Create Your Site

Sign up and create a site in the Loomio dashboard. Configure your SEO, contact info, and brand settings.

  • Type-safe
  • Real-time
  • Secure
// Dashboard creates your site
{
  name: "My Portfolio",
  url: "myportfolio.com",
  description: "...",
  theme: { ... }
}
02

Install SDK

Add the Loomio SDK to your React project. It works with Next.js, Remix, or any React framework.

  • Type-safe
  • Real-time
  • Secure
npm install @loomio/sdk

// or
pnpm add @loomio/sdk
yarn add @loomio/sdk
03

Use Hooks

Import hooks and start consuming your CMS data. Updates happen in real-time with automatic caching.

  • Type-safe
  • Real-time
  • Secure
import { useSite, useGallery } from '@loomio/sdk/react'

function HomePage() {
  const { data: site } = useSite()
  const { data: gallery } = useGallery()

  return <h1>{site.name}</h1>
}

Built for developers

Clean API, excellent TypeScript support, and delightful developer experience.

TypeScript
React
layout.tsx
import { defineConfig, LoomioProvider } from '@loomio/sdk/react'
import { Navbar } from '@/components/navbar'
import { Footer } from '@/components/footer'
import "./globals.css"

const config = defineConfig({
    siteId: process.env.LOOMIO_SITE_ID
})

export default function RootLayout({ children }) {
    return (
        <html lang="en" className="antialiased bg-background text-foreground" suppressHydrationWarning>
            <body>
                <LoomioProvider config={config}>
                    <Navbar />
                    <main className="min-h-screen">
                        {children}
                    </main>
                    <Footer />
                </LoomioProvider>
            </body>
        </html>
    )
}
100%
Type Safe
<5kb
Core Size
SSR
Ready

Type Safety

End-to-end type safety from Convex schema to your React components

Server-Side Rendering

Full SSR support with smart caching strategies for Next.js, Remix, and more

Real-time Updates

Content changes appear instantly without polling or page refreshes

TanStack Query

Built on industry-standard React Query for optimal caching and performance

Quick Install
$ npm install @loomio/sdk

Powerful extensions

Extend your CMS with purpose-built modules for common use cases.

Available

Gallery

Complete image management system with tags, metadata, and automatic file relationships.

  • Tag-based filtering
  • Metadata management
  • File storage integration
  • Responsive images
Available

Products

Full-featured product catalog for e-commerce sites with inventory and pricing.

  • Product catalog
  • Inventory tracking
  • Pricing management
  • Category organization
Available

Chat Bubble

Embeddable chat widget for real-time visitor communication and support.

  • Real-time messaging
  • Visitor tracking
  • Custom styling
  • Easy embedding
Coming Soon

Blog

Rich content blog system with markdown support, categories, and SEO optimization.

  • Markdown editor
  • Categories & tags
  • SEO optimization
  • Draft/publish workflow
Coming Soon

Forms

Dynamic form builder with submissions tracking and email notifications.

  • Form builder
  • Submission storage
  • Email notifications
  • Validation rules
Coming Soon

Analytics

Privacy-focused analytics to understand your audience and content performance.

  • Page views
  • Visitor insights
  • Content analytics
  • Custom events

More extensions coming soon

Have an idea for an extension? Let us know

Performance that matters

Built on modern infrastructure for speed, reliability, and developer happiness.

100%
Type Safe

Full TypeScript coverage from database to frontend

<50ms
Query Speed

Lightning-fast data fetching with Convex

Real-time
Updates

Content changes sync instantly across all clients

Zero Config
SSR Support

Works out of the box with Next.js and Remix

Powered by Convex
The reactive backend platform for modern apps