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.
- ✨ 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+
npm install --save @limitless-angular/sanity @sanity/client| 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.
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',
}),
],
};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())],
};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
};
}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"
/>
`,
})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');
}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
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:devOpen http://localhost:3333/presentation after both dev servers start.
After changing blog schemas or GROQ queries, regenerate the frontend query types:
pnpm blog:typegen- 🎯 Performance optimizations
- 📚 Enhanced documentation and examples
- ✅ Comprehensive test coverage
- 🔄 Lazy loading for Portable Text components
We welcome contributions! Check our Contributing Guide for details.
Adapted from @portabletext/react v6.2.0 which provided the vast majority of node rendering logic.
This project is licensed under the MIT License. See our LICENSE file for details.