@limitless-angular/sanity

Limitless Angular

Limitless Angular is a powerful collection of Angular libraries focused on Sanity.io integration, designed to enhance your development experience with features like Portable Text rendering, image optimization, real-time previews, and visual editing.

Quick Links

• 🚀 Portable Text Live Demo
• 💻 Example Project
• 📝 Analog Blog + Sanity Studio
• 📦 NPM Package

Features

• ✨ Portable Text: Complete implementation for rendering Sanity's Portable Text
• 🖼️ Image Optimization: Built-in image loader and directives for Sanity images
• 🔄 Real-time Preview: Live content updates with Preview Kit
• ✏️ Visual Editing: Seamless content management integration
• 🎯 Angular-First: Built specifically for Angular 18+

Installation

npm install --save @limitless-angular/sanity @sanity/client

Version Compatibility

Angular	@limitless-angular/sanity
20.x	20.x
19.x	20.x, 19.x
18.x	20.x, 19.x, 18.x

The current 20.x package line supports Angular 18, Angular 19, and Angular 20.

Quick Start

Basic Configuration

For image optimization features:

import { ApplicationConfig } from '@angular/core';
import { provideSanity } from '@limitless-angular/sanity';

export const appConfig: ApplicationConfig = {
  providers: [
    provideSanity({
      projectId: 'your-project-id',
      dataset: 'your-dataset',
    }),
  ],
};

Preview Kit & Visual Editing Configuration

For preview and visual editing features, use the client factory approach:

import { provideSanity, withLivePreview } from '@limitless-angular/sanity';
import { createClient } from '@sanity/client';

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset',
  apiVersion: 'YYYY-MM-DD',
  useCdn: true,
});

const getClientFactory = (preview?: { token: string }) =>
  preview?.token
    ? client.withConfig({
        token: preview.token,
        useCdn: false,
        ignoreBrowserTokenWarning: true,
        perspective: 'drafts',
        stega: {
          enabled: true,
          studioUrl: 'your-studio-url',
        },
      })
    : client;

export const appConfig: ApplicationConfig = {
  providers: [provideSanity(getClientFactory, withLivePreview())],
};

Features

Portable Text

Render Portable Text with Angular.

@Component({
  standalone: true,
  imports: [PortableTextComponent],
  template: `<div portable-text [value]="content" [components]="components"></div>`,
})
export class ContentComponent {
  content = [
    /* your portable text content */
  ];
  components: PortableTextComponents = {
    // Custom components configuration
  };
}

📚 Portable Text Documentation

Image Handling

Powerful features for working with Sanity images in Angular applications:

@Component({
  standalone: true,
  imports: [SanityImage],
  template: `
    <img
      [sanityImage]="imageRef"
      width="800"
      height="600"
      [alt]="imageRef.alt"
    />
  `,
})

📚 Image Loader Documentation

Preview Kit

The Preview Kit provides real-time preview capabilities for Sanity content in Angular applications, enabling live updates of content as it's being edited in the Sanity Studio:

import { LiveQueryProviderComponent } from '@limitless-angular/sanity/preview-kit';

@Component({
  standalone: true,
  imports: [LiveQueryProviderComponent],
  template: `
    @if (draftMode()) {
      <live-query-provider [token]="token">
        <router-outlet />
      </live-query-provider>
    } @else {
      <router-outlet />
    }
  `,
})
export class AppComponent {
  draftMode = signal(false);
  token = signal('your-preview-token');
}

📚 Preview Kit Documentation

Visual Editing

The Visual Editing feature allows editors to click elements in your preview to navigate directly to the corresponding document and field in Sanity Studio.

@Component({
  standalone: true,
  imports: [VisualEditingComponent],
  template: `
    <main>
      <router-outlet />
      @if (draftMode()) {
        <visual-editing />
      }
    </main>
  `,
})
export class AppComponent {}

📚 Visual Editing Documentation

Analog Blog Studio

The Analog blog example can be edited inside a first-class Sanity Studio through Presentation. The shared blog contract lives in the source-only @limitless-angular/analog-sanity-blog workspace package, so the Analog app and Studio import the same schemas, GROQ queries, Presentation routes, and Studio structure without adding another build artifact.

pnpm blog:setup
pnpm blog:dev

Open http://localhost:3333/presentation after both dev servers start.

After changing blog schemas or GROQ queries, regenerate the frontend query types:

pnpm blog:typegen

Roadmap

• 🎯 Performance optimizations
• 📚 Enhanced documentation and examples
• ✅ Comprehensive test coverage
• 🔄 Lazy loading for Portable Text components

Contributing

We welcome contributions! Check our Contributing Guide for details.

Support

• 🐛 Report Issues
• 💬 Discussions

Credits

Adapted from @portabletext/react v6.2.0 which provided the vast majority of node rendering logic.

License

This project is licensed under the MIT License. See our LICENSE file for details.